Taller sobre los beneficios del HTML5 al SEO de una web en la sala Camon de Madrid
Santiago Montiu
HTML5
SEO
Nuevas etiquetas
Internacionalización
Microformatos
RDFa
Microdata
Contenido enriquecido
3. ¿ QUÉ ES EL SEO ?
¿ QUÉ ES EL HTML5 ?
BENEFICIOS
SEMÁNTICA
DISEÑO != ESTRUCTURA
ESTRUCTURAS HTML
ORGANIZACIÓN DE CONTENIDOS
<MAIN>
MICROFORMATOS PROS y CONTRAS
RDFa PROS y CONTRAS
MICRODATA PROS Y CONTRAS
17. Contenidos
• De calidad (shares)
• Actualizados (date)
• Mayor cantidad (items)
• Estructurados
o Ordenados (logic)
o Enlazados (itemref)
o Referenciados (autoría) (person)
32. Internacionalización
<wbr>
Representa una oportunidad de salto de línea
En ocasiones nos gustaría indicar por donde tiene
que romper una frase o texto.
Ahora ya podemos
Ej:
mi casa es de ...
Muy usado y recomendado por Yahoo! para romper las url antes del marcado.
34. Valor Semántico
<nav></nav>
Define una navegación dentro del documento. Se
trata de una sección en si misma compuesta
únicamente por enlaces que apunta a otros
documentos o partes propias # hashtag
No puede ser elemento descendiente o hijo de
<address>
35. Valor Semántico
<article></article>
Define un contenido separado del resto del
documento o site. Que posee valor propio
(significado).
No puede ser elemento descendiente o hijo de
<address>
36. Valor Semántico
<aside></aside>
Define un contenido separado del resto del
documento con un valor irrelevante para el resto. Si
se eliminase el resto seguiría manteniendo sentido
y significado propio.
No puede ser elemento descendiente o hijo de
<address>
37. Valor Semántico
<header></header>
Define el encabezado de una sección.
No puede ser elemento descendiente o hijo de
<footer>
No puede ser elemento descendiente o hijo de
<address>
No puede ser elemento descendiente o hijo de
<header>
38. Valor Semántico
<footer></footer>
Define el pie de una sección.
No puede ser elemento descendiente o hijo de
<footer>
No puede ser elemento descendiente o hijo de
<address>
No puede ser elemento descendiente o hijo de
<header>
39. Valor Semántico
<main></main>
Define el contenido principal.
No puede ser elemento descendiente o hijo de
<article>
No puede ser elemento descendiente o hijo de
<aside>
No puede ser elemento descendiente o hijo de
<header>
No puede ser elemento descendiente o hijo de
<nav>
40. Valor Semántico
<figure></figure>
Define una única unidad con respecto al contenido
principal, no teniendo por que ser independiente
del contenido.
Puede ir acompañada de <figcaption></figcaption>
para indicar una leyenda, encabezamiento, título, o
subtítulo.
Normalmente se hace referencia desde el contenido
principal.
41. Valor Semántico
<time></time>
Define un tiempo o una fecha.
Atributo:
datetime especifica el valor de lo que representa el
elemento. RFC 3339
No puede ser elemento descendiente o hijo de
<time>
42. Valor Semántico
<mark></mark>
Define un contenido con relevancia dentro del
contexto, también como referencias a otros
contextos.
No puede ser elemento descendiente o hijo de
<time>
47. Elementos interactivos
<details></details> widget para obtener mayor información
<summary></summary> leyenda de <details>
<menuitem></menuitem> representa un comando
<menu></menu> representa una lista de comandos
50. Estudio previo, análisis y planificación
1º Organización, jerarquía y composición de contenidos.
2º Identificación del contenido principal.
3º Valor y relevancia de secciones.
4º Subsecciones e items internos.
54. Microformatos
“Designed for humans first and machines second, microformats are a set of simple,
open data formats built upon existing and widely adopted standards.”
Convenciones para describir un tipo concreto de información, definir las
propiedades de cada identidad, como por ejemplo : una persona, un
evento, un lugar, una opinión, ...
Utilizan el atributo class para identificar cada entidad y sus propiedades
http://microformats.org/
55.
56. Microformatos
Utilizan el atributo class para identificar cada entidad y sus propiedades
Prefijos independientes de los vocabularios
h-* marca del vocabulario
p-* propiedades (texto)
u-* propiedades (url)
dt-* propiedades (marcas temporales)
e-* propiedades (elementos embebidos)
http://microformats.org/
64. Microdata
¿Cómo implementar microdata ?
1º Establecer el ámbito del microdato
http://schema.org
http://schema.org/docs/full.html
2º Especificar el tipo de elemento
3º Indicar las propiedades del elemento
http://www.google.com/webmasters/tools/richsnippets
66. Microdata
Itemref
Cuando tenemos propiedades no descendientes y necesitamos
asociar la propiedad a un item.
itemref=“id id”
Itemprop
Determinamos las propiedades. Las propiedades pueden repetirse para
un mismo scope
<ul itemscope>
<li itemprop=“name”>Álvaro</li>
<li itemprop=“name”>Carlos</li>
</ul>
68. Microdata
Pueden coexistir varias propiedades para un mismo elemento
<span itemprop=“name image”></span>
Itemtid
Identificadores globales, ISBN para libros, ids de productos, ...
<span itemid=“urn:isbn:0-350-3402-8”>El mago de Oz</span>