Uso de varios elementos H1: Con HTML5 se puede
Las etiquetas H son desde hace mucho una de las piedras angulares del SEO. Evidentemente el SEO abarca mucho más, pero son pocos los artículos que podemos encontramos sobre esta materia que en algún punto no mencionen el uso correcto de estas etiquetas. Por desgracia la inmensa mayoría de estos posts son pre-HTML5 y por tanto se guían por el gran dogma de la etiquetas H, "no puede haber más de un H1 por página o documento".
Sin embargo, y con la llegada de HTML5, hasta esto ha cambiado. Como no podía ser de otra manera el uso de varias etiquetas H1 debe de hacerse de forma lógica y controlada (nuestro documento no puede convertirse en una amalgama de etiquetas H1), y siguiendo rigurosamente las reglas que la W3C nos da para que nuestro documento sea correcto, al menos en cuanto a semántica se refiere. Hay que tener en cuenta que no todo el mundo está de acuerdo con esta práctica (siendo en HTML5 del todo correcta) y los expertos en SEO suelen ser bastante recelosos, aunque como verás en este artículo su uso es una cuestión 100% lógica.
¿Qué es y qué no es una etiqueta H?
Confundir conceptos es lo que generalmente nos lleva al mal uso de las etiquetas H. Por experiencia se que hay una tendencia generalizada a usar estas etiquetas como marcadores de título, y no, una etiqueta H no es una etiqueta de título, es una etiqueta de encabezado.
Cierto que un encabezamiento es a fin de cuentas un título, pero un título no es necesariamente un encabezamiento. Un encabezamiento lleva implícito la creación de una nueva sección de contenido y un título puede ir por ejemplo sobre un sidebar (que no necesariamente tiene contenido), un widget del tipo predicción meteorológica o un calendario (que evidentemente no son contenido) o una simple lista de enlaces cualquiera (que a mi ver tampoco es contenido). ¡Si lo que queremos es resaltar un título para eso tenemos CSS!. Según la W3C los elementos h1-h6 no deben ser usados para marcar subencabezados, subsecciones, títulos alternativos o eslogans.
Lo básico para un buen uso es determinar que títulos de nuestra web son o no son encabezados, y a partir de ahí distribuir nuestras etiquetas H de una forma lógica y ordenada, recuerda que al fin y al cabo son etiquetas estructurales. No tiene mucho sentido crear una sección con un H2 y que esta nueva sección que hemos creado en su interior contenga una etiqueta H1 (¿por qué iba a ser más importante una subsección que la propia sección principal?), aunque es correcto no es una buena práctica.
El porqué del uso de varios elementos H1
El problema semántico que genera el uso de una única etiqueta H1 en un documento no es nuevo, es mas, este se agrava cuando pensamos en la estructura de un sitio al completo. Para que veas de lo que estoy hablando voy a hacer un marcado general de un blog. Con su página principal (o índice) y una página de un post será más que suficiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>El batiburrillo</title>
</head>
<body>
<div>
<h1>El batiburrillo</h1>
<p>Un blog para hablar de todo un poco.</p>
</div>
<div>
<h2>Una manzana al día ...</h2>
<p>Contenido del artículo.</p>
</div>
<div>
<h2>El nuevo iphone</h2>
<p>Contenido del artículo.</p>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>El batiburrillo</title>
</head>
<body>
<div>
<p>El batiburrillo</p>
<p>Un blog para hablar de todo un poco.</p>
</div>
<div>
<h1>Una manzana al día ...</h1>
<p>Contenido del artículo.</p>
</div>
</body>
</html>
Este es el marcado general de cualquier blog pre-HTML5. Vemos que en el índice damos mucha importancia al nombre del blog, que a fin de cuentas es su marca, pasando los artículos que aparecen (que puede ser o no resumidos) a un segundo plano. ¿Acaso no tienen la misma importancia?.
En un blog como en el del ejemplo, donde se habla de todo, es muy difícil que un buscador puede interpretar el asunto de la página, teniendo en cuenta que el contenido de la única etiqueta H1 en un marcado pre-HTML5 denota también la temática del documento. Una marca, el título de un blog, o el nombre de una empresa no tienen porqué dar ninguna pista sobre la temática del documento, sin embargo es lógico etiquetarlo así para darle importancia, para una empresa su nombre o marca está por encima de todo.
También hay que tener en cuenta los esquemas o resúmenes que se generan a partir de cualquier documento (son como una tabla de contenido del sitio web), y que hasta la llegada de HTML5 se hacían a partir de las etiquetas de encabezado, haciendo difícil distinguir entre los dos artículos del ejemplo (de temática dispar), que a efectos prácticos son igual de importantes y que sin embargo pasan a ser parte de un único contenido, el marcado por el H1.
Cuando pasamos al artículo, la cosa cambia. Ahora damos más importancia al título del artículo, ya que el documento va a tratar enteramente sobre ello. ¿Acaso ahora no es importante el título de nuestro blog?. Piensa ahora en que pasaría si fuese el nombre de una gran empresa, ¿sería capaz de diluir su marca en favor de un artículo?. Ten en cuenta también, que además de un cambio en el marcado HTML, supone además un cambio en nuestra hoja de estilos para que a ojos del usuario nada cambie.
La solución: las nuevas etiquetas de HTML5
Las etiquetas semánticas, de las que empecé hablando en Semántica en HTML5 (I): Header, son la solución a este problema, ellas y el nuevo algoritmo de esquema de HTML5, que ya no se apoya únicamente en las etiquetas de encabezado para su generación.
De todas estas nuevas etiquetas tan sólo cuatro de ellas son etiquetas seccionadoras: section, article, nav y aside, y siempre que abramos una nueva sección con una de estas etiquetas es posible usar un H1. En sendos artículos de la W3C sobre los elementos h1-h6 y encabezados y secciones podemos ver ejemplos sobre su uso. Siguiendo las directrices de la W3C nuestro blog de ejemplo quedaría de esta forma:
<!DOCTYPE HTML>
<html>
<head>
<title>El batiburrillo</title>
</head>
<body>
<div>
<h1>El batiburrillo</h1>
<p>Un blog para hablar de todo un poco.</p>
</div>
<article>
<h1>Una manzana al día ...</h1>
<p>Contenido del artículo.</p>
</article>
<article>
<h1>El nuevo iphone</h1>
<p>Contenido del artículo.</p>
</article>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>El batiburrillo</title>
</head>
<body>
<div>
<h1>El batiburrillo</h1>
<p>Un blog para hablar de todo un poco.</p>
</div>
<article>
<h1>Una manzana al día ...</h1>
<p>Contenido del artículo.</p>
</article>
</body>
</html>
El uso de varias etiquetas H1 está aprobado por la W3C, es a fin de cuentas una solución a una serie de problemas y a todas luces genera un documento 100% correcto, si no me crees compruébalo en el validador de la W3C. El único problema es una advertencia en cuanto a accesibilidad desde un screenreader, aunque como en todo lo nuevo es cuestión de que estas tecnología también se actualicen.
En cuanto al SEO no debe haber ningún tipo de problema. La norma del uso de un único H1 para todo el documento ya no existe en HTML5, así que es de esperar que los motores de búsqueda se hayan adaptado a ello, al menos Bing y Google sí. Si quieres un artículo más completo o aún no te he atraído al lado oscuro de la fuerza, léete este post de Kezz Bracey, a mi me convenció.