HTML5 y sus implicaciones SEO

HTML5 será el nuevo estándar para HTML y pese a que aún sigue siendo un proceso en desarrollo, desde que algunos navegadores soportan su uso ya se utiliza y se escribe mucho sobre sus implicaciones en la web.

A priori son muchas las ventajas que aporta el HTML5, por ejemplo, como escribía mi colega @germanmunuera, representar una alternativa viable a Flash para contenidos de vídeo, siendo posible ahora integrar Google Analytics en vídeos HTML5.

Pero en este post queremos hacer un repaso de las implicaciones a nivel de SEO más destacables que puede aportarnos el HTML5, las dudas que plantean algunos de los nuevos elementos y los posibles usos para el posicionamiento en buscadores:

Estructura de página SEO Friendly

Mientras que las versiones pre-HTML5 cuentan con numerosos elementos div, HTML5 aporta nuevos elementos con una estructura más similiar a XML, haciendolo el código mucho más simple, limpio y amigable para los buscadores. Este sencillo esquema comparativo resulta perfecto para ilustrar la diferencia:

Estructura con HTML4

Estructura con HTML5

Con HTML5 los elementos se diferencian más claramente, siendo más sencillo para los buscadores asignar la relevencia adecuada a cada segmento.

Elementos <header> y <hgroup>

La novedad viene con hgroup, un nuevo elemento que nos permitirá agrupar varios encabezados, muy útil cuando queramos destacar varias piezas de información antes de empezar con el cuerpo de la noticia o artículo, por ejemplo el titular de una noticia, el subtitular y el autor. Aquí un ejemplo de como aplicar este elemento:

Es importante distinguir header de hgroup:

• Para utilizar únicamente un titular no es necesario el elemento hgroup, utilizaremos simplemente header y la etiqueta <hx> que corresponda.
• Si tenemos un titular y un subtitular a incluir, es cuando hgroup debe emplearse.
• En los casos donde además de un titular y subtitular, queremos incluir meta datos, como puede ser la fecha de publicación, utilizaremos los dos elementos, incluyendo el hgroup y los metadatos dentro del elemento header.

Elemento <article>

La aportación más interesante de HTML5 para SEO. Representa una sección que se identifica como un bloque independiente de contenido de un documento o página. Con “independente” entendemos una pieza de contenido que tiene sentido en sí mismo, como una noticia completa, un comentario en un foro o un artículo.

Lo interesante de article es que podemos utilizar los nuevos elementos hgroup y footer dentro de cada bloque y también la etiqueta section para diferenciar la naturaleza de la información, por ejemplo distinguir la noticia de los comentarios. Aquí un ejemplo:

Elemento <nav>

W3C en su definición nos indica que la finalidad de este nuevo elemento es servir como bloque que agrupe los principales enlaces para la navegación del sitio. Sin embargo es un poco confusa, mencionando también que su propósito puede ser el mismo que footer. Todavía no sabemos si los enlaces incluidos dentro de nav serán considerados por los buscadores como más o menos relevantes que otros enlaces, como los contextuales o los incluido en footer.

Desde el punto de vista del posicionamiento SEO no tiene sentido limitarnos a darle el mismo uso que a los enlaces incluidos al pie de página, por lo que recomendamos utilizar este elemento para:

• Potenciar las páginas más relevantes para nuestros objetivos de posicionamiento web
• Destacar los nuevos contenidos que se van pubicando
• Los enlaces incluidos en una tabla de contenidos, siempre y cuando podamos asignar una palabra clave a cada enlace
• Para sitios con una gran número de páginas, podemos utilizar este elemento para enfatizar los enlaces de los breadcrumbs. Pero como decía antes, esto sería efectivo si cada enlace cuenta con un anchor text optimizado

 Elemento <aside>

Este elemento toma una dimensión diferente a sidebar, ya que aside pude utilizarse prácticamente como contenido secundario, más relacionado con el contenido concreto de la página que con contenido sobre la web en general, como solía utilizarse el contenido ofrecido en el sidebar.

Por ejemplo podemos incluir este elemento dentro o fuera del elemento article, con lo que sería lógico creer que el aside incluido dentro de article tiene una relevancia más directa con el contenido específico de la página. Por contra, el aside no incluido dentro de un elemento article podría ser más genérico del contenido de la web, o utilizarse para fines más típicos del sidebar, como un blogroll o un grupo de enlaces de navegación. Las implicaciones SEO aquí son todavía una incógnita, ya que no sabemos si los buscadores aplicarán la misma lógica o no a la hora de interpretar la información.

Queda mucho por decir y debatir sobre las implicaciones que puede tener en SEO el uso de HTML5, por lo que no dudéis en aportar vuestros comentarios sobre nuevos elemntos de HTML5 que pueden beneficiar o entorpecer las labores del SEO. Gracias por leer y hasta la próxima.

Tags: article, aside, header, hgroup, html, html5, html5 y seo, nav, Posicionamiento en buscadores, posicionamiento seo, posicionamiento web, SEO, w3c