Etiquetas HTML H1 H2 H3 para SEO

Cuando desarrollamos una web una de las primeros aspectos a tener en cuenta es la correcta arquitectura del código HTML, de las URLs y de los directorios y taxonomía que forma el espacio web.
El primer paso para organizar nuestros contenidos correctamente a nivel estructural y SEO, es meter mano al código HTML donde debemos definir y colocar correctamente las etiquetas: H1, H2 y H3.

Las etiquetas de encabezado H1, H2, H3…y sucesivas son un arma muy poderosa con las que contamos a nivel de Posicionamiento Web SEO, con ellas estamos definiendo e indicando al buscador cuál es el contenido y el contexto de nuestra Web. Aunque en principio parece algo sencillo, no siempre se le suele dar un uso adecuado. Este artículo tiene como objetivo analizar la correcta configuración de las etiquetas de encabezado, hacer desaparecer los falsos mitos sobre etiquetas de títulos, y dar algunos consejos que puedan servir de ayuda.

Desde sus inicios en el código HTML, las etiquetas de encabezado han tenido siempre mucha importancia, y aunque en ocasiones han variado en su influencia, siempre se han mantenido, por lo que llegamos a la conclusión de que debemos de ser cautos con ellas y tratarlas de forma adecuada. Lo mejor quizás sea tenerlas en cuenta desde el principio con el SEO onpage (en el momento de creación de una Web), pero no siempre esto es posible y también tendremos que ir retocándolas sobre la marcha o a posteriori.

Cómo usar la etiqueta H1 para SEO

H1 es la etiqueta HTML encargada de definir el título de una página web, cuando hablamos de página web nos referimos a una única página, y no al sitio web al completo, ya que un sitio web puede estar compuesto de múltiples páginas.
Un H1 resume en una frase final todo el contenido de la página en la que nos encontramos, por lo que no tiene mucho sentido que tengamos varios H1 en un mismo documento web. Algo común con los h1, es usarlos inadecuadamente en Webs como por ejemplo los blogs, donde ya adquirimos un theme y nos olvidamos de retocar estor aspectos, como por ejemplo se plasma en plugins como: últimos posts, donde cada uno de ellos lleva un titular H1, esto no es correcto, y lo mejor sería que en ese listado los títulos sean H2 (de menor magnitud), y ya dentro de la página del artículo completo si que se muestre el título como un H1.
Otro ejemplo de mal uso es por ejemplo esas Webs donde ves que los H1 hacen referencia al nombre de la empresa, utilizando el mismo en todas sus páginas.
Tanto para la experiencia de usuario como para el posicionamiento web SEO, lo más lógico es que la etiqueta h1 aparezca lo más arriba posible en el documento.
Cuidado con los H1 que hacen de Links, si nuestro h1 es un enlace a otra página, de manera indirecta estamos expresando que la página con verdadera relevancia es a la que estamos vinculando, y no a la actual.
El texto ancla de la estructura de enlaces internos que hacen referencia a una página determinada, debe coincidir con el título H1 de la misma, para reforzar el alcance de la misma.
La longitud de caracteres del H1 debe ser corta, pues la importancia de las palabras clave que contiene el titular irá perdiendo fuerza cuanto más largo sea.
La metaetiqueta title en sus primeras posiciones dentro de las palabras, debe coincidir en la mayor medida posible con el H1, ya que google da mayor importancia a las primeras palabras de la frase que a las últimas. No obstante los meta title van destinados más para el punto de vista de poder captar al usuario, ya que es lo que se muestra en los resultados de búsqueda, aunque como anécdota podemos observar que a falta de un meta title, lo que se muestra en Google puede ser el H1.
Las palabras clave incluidas en el H1 deben estar contenidas dentro del texto de la página, de nada sirve un título que no expresa la realidad de la página donde esta contenido.

Cómo usar la etiqueta H2 para SEO

La etiqueta H2 en muchos aspectos se parece al H1, ya que define títulos de importancia para sub-apartados del documento web en el que nos encontramos. A diferencia del h1, en un mismo documento pueden existir varios H2, indicando diferentes títulos de menor magnitud.
No debemos utilizar los H2 en lugares de nuestra web como: Webs amigas, Bienvenido, Panel de usuario… esto son títulos genéricos para apartados de una web, pero que nada tienen que aportar al contenido real de la misma. Para este tipo de cosas podemos utilizar las etiquetas: «span», «strong», como antiguamente se utilizaba «font».
Los titulares H2 nos indican los diferentes apartados del texto que tenemos delante, una especie de listado de elementos. El texto del h2 debe incluir palabras clave del texto que encontramos justo a continuación, o de la página a la que estamos vinculando.
Podemos colocar varios H2 dentro de una misma página, el contenido de la misma será el que nos indique cuantos debe haber.

Cómo utilizar las etiquetas H3, H4 …

Las etiquetas H3 y en adelante, definen títulos de sub-secciones. Su importancia en el posicionamiento Web SEO es menor, y por lo tanto no es recomendable el trabajar con fines para SEO con los titulares posteriores a H4.
El orden más común es colocar lo más arriba posible el titular H1, después todos los H2 y a continuación los H3.
Los titulares y texto que va a continuación debe tener una relación proporcional y razonable: Utilizar más encabezados de la cuenta puede perjudicar

Asignar Estilos a las Etiquetas de encabezado

Logicamente como cualquier etiqueta HTML, a las etiquetas de encabezado se le pueden asignar estilos CSS, pero por ejemplo un H1 excesivamente pequeño puede ser concebido por los buscadores como un intento de engaño. De la misma manera, el tamaño y la diferencia entre H1, H2 y el resto de titulares debe seguir una lógica.
Podemos incluir dentro de las etiquetas de encabezado otros elementos como spans, pero sin abusar, lo más adecuado es el contenido de la etiqueta H sin otros elementos, de este modo será más eficaz. Sí es posible utilizaremos mejor las clases.
Cuidado con colocar etiquetas de encabezado de forma oculta a través de los CSS, yo no me la jugaría.

Asignar Estilos a las Etiquetas de encabezado

En este artículo hablamos desde una perspectiva global, ya que en ocasiones las reglas cambian en según que versión de HTML estemos programando nuestra web, por ejemplo para la versión HTML5 podemos tener un h1 por sección, que corresponderá al título que define el contenido de cada apartado (sección).

Si te gustó este artículo o te sirvió de ayuda por favor compártelo
Un saludo,
Óscar / DevService
Por Óscar Carrillo