Hay que tener en cuenta que con el HTML «antiguo» no existían etiquetas capaces de agrupar bloques enteros y que tuviesen significado por sí mismas y, por eso la gente, usaba el div como etiqueta para todo. Si bien con los atributos «role» se mejoraba bastante este problema, estos nunca se usaron de forma muy extendida. De esta forma, las páginas carecían de un HTML semántico que con la llegada del HTML5 se solventó.

Uso semántico de elementos del HTML5

Para refrescar: llamamos HTML semántico a un documento que usa correctamente las etiquetas HTML para que la estructura resultante, quitándole la capa de diseño, tenga sentido por sí sola. Precisamente, el HTML5 introdujo estos elementos semánticos que permitían una mejor estructuración del contenido: <header>, <nav>, <article>, <section>, <aside>, <hgroup>, <footer>, entre otros. Utilizar estos elementos de manera apropiada y semántica empezó a ayudar a los motores de búsqueda a comprender mejor la jerarquía y la relación entre el contenido de la página. Por ejemplo empezamos a usar:

• <header/> : para identificar la cabecera de la página (que no forma parte del contenido único).
• <footer/> : para identificar el footer (que tampoco forma parte del contenido único).
• <nav/> : que permite marcar conjunto de links como menús y, por tanto, ayuda a los buscadores a detectar nuestra estructura web.
• <hgroup/> : que agrupa titulares y nos permite jugar más con el peso de estos.

Aplicación de las etiquetas semánticas de HTML5

A la hora de orientar la maquetación a SEO hay que tener en cuenta una serie de aspectos sobre las etiquetas semánticas que, al igual, no se han llegado a considerar desde que se consolidara el uso del HTML5.

1. Uso de <div/> en HTML5 orientado a SEO.

La etiqueta div no murió, sigue ahí y sigue significando lo que siempre ha significado: conjunto de elementos. En ningún momento se ha transformado a una etiqueta «tonta» que puedas usar libremente para ayudarte con el CSS ni ha sido sustituida totalmente por la etiqueta <section/>. Por lo tanto, nuestro deber es usarla como ayuda a la estructura de página: como base para crear el layout de nuestras páginas, siempre y cuando no exista otra etiqueta de conjunto que represente mejor este papel… En otras palabras, div es la herramienta para unir elementos cuando no podemos asociar significado semántico a este conjunto.

2. Uso de <section/> en HTML5 orientado a SEO.

El uso de section es muy parecido al de div pero aportando la carga de significado mínima posible al contenido. Englobando distintos elementos dentro de una etiqueta <section/> lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento. La diferencia es sutil pero muy importante: cuando creamos bloques cuyo contenido forma un todo usaremos <section/>, cuando estos bloques responden más a diseño o a necesidades de estructura usaremos <div/>.

3. Uso de <article/> en HTML5 orientado a SEO.

La etiqueta <article/> es el siguiente paso a la hora de declarar que un conjunto de elementos en nuestra página tiene significado. En este caso, el paso dado es el dar a entender que ese conjunto tiene significado claro incluso si lo sacamos totalmente de la página. Es decir, al incluir algo dentro dentro de la etiqueta <article/> lo que estamos diciéndole a los buscadores es que dentro de este article podrá encontrar contenidos únicos con su propio significado. Esto nos lleva, casi siempre, a que en páginas normales nuestro contenido será el único <article/> de la página y en páginas con listados de elementos tendremos un <article/> por cada elemento del listado (que si queremos identificar bien, tendrá un link con rel=»bookmark» hacia el contenido real). Comentar que idealmente la etiqueta, al ser un contenido con significado propio, podría contener en su interior etiquetas <header/>, <section/>, <aside/> y <footer/> ya que… al ser contenido propio, ¿porque no pueden tener sus mismas características?

4. Uso de <aside/> en HTML5 orientado a SEO.

Por último, nos queda la etiqueta aside que viene a ser una etiqueta <section/> venida a menos. Y es que aside sirve para indicar que ese bloque es solo un añadido a los bloques que tiene al lado. Son datos extra sin lo que podríamos pasar perfectamente pero que hemos decidido añadir en el documento. Así pues, un <aside/> como hijo de la etiqueta <body/> nos dice que se trata de un contenido añadido por temas que no tienen nada que ver con el contenido de la página (normalmente esas columnas laterales llenas de tags y banners). Cuando lo incluimos dentro de un <article/> nos indica que esa información complementa el artículo pero no forma parte de él (listas de datos, testimoniales, banners relacionados, etc…).

Otros aspectos importantes a tener en cuenta

Más allá de estas etiquetas que ponían orden a la estructura de la página, el HTML5 trajo otras ventajas al SEO deberían tener su crédito.

1. Encabezados y etiquetas de título.

Los encabezados <h1> a <h6> y las etiquetas de título <title> son fundamentales para indicar la estructura y la jerarquía del contenido. Es importante utilizarlos de manera coherente y relevante para resaltar la información más importante y facilitar la comprensión del contenido por parte de los motores de búsqueda.

2. Atributos alt en imágenes.

Las imágenes son importantes para el contenido visual de un sitio web, pero los motores de búsqueda todavía no pueden interpretarlas de forma directa. Por lo tanto, es conveniente usar el atributo alt en las etiquetas de imagen <img> para proporcionar una descripción concisa y relevante del contenido de la imagen. Esto no solo mejora la accesibilidad del sitio, sino que también ayuda a los motores de búsqueda a indexar y clasificar el contenido de las imágenes, si es lo que nos interesa.

3. Datos estructurados y microdatos.

El HTML5 admite la implementación de datos estructurados mediante el uso de microdatos, JSON-LD u otros formatos. Estos datos proporcionan información adicional sobre el contenido de la página, como eventos, productos, reseñas, recetas, etc. La implementación de datos estructurados puede mejorar la visibilidad del sitio en los resultados de búsqueda al permitir que los motores de búsqueda comprendan y muestren mejor el contenido.

4. Optimización para dispositivos móviles.

HTML5 incluye características específicas para el desarrollo de sitios web responsivos y amigables para dispositivos móviles. Utilizar elementos como <meta name=»viewport»> y <meta name=»mobile-friendly»> puede mejorar la experiencia del usuario en dispositivos móviles, lo que a su vez puede influir en el ranking de búsqueda móvil.

En resumen

La maquetación SEO en HTML5 implica utilizar elementos semánticos, encabezados apropiados, datos estructurados… de una forma coherente que pueda ayudar a mejorar la indexación, la visibilidad, además de facilitar la experiencia del usuario. No obstante, los lenguajes cambian, las estrategias también y no hay que olvidar repasar si los estándares del HTML5 siguen siendo los mismos o si las directrices de los motores de búsqueda han sufrido algún cambio…