Etiquetas de título (H1-H6) y jerarquía
¿Qué son las etiquetas de título?
Las etiquetas de título, desde H1 hasta H6, son etiquetas HTML que definen la jerarquía del contenido y la estructura de las secciones de una página. H1 representa el título de nivel superior, H2 las secciones principales, H3 las subsecciones, y así sucesivamente. Aunque estas etiquetas se vean más grandes o en negrita en el navegador, su objetivo principal no es visual, sino estructural: al igual que el índice de un libro, conforman el esqueleto lógico de la página.
Esta jerarquía no es solo un orden legible para el ojo humano, sino también una estructura de árbol que los navegadores y las tecnologías de apoyo (como los lectores de pantalla) «entienden» de forma programática. Un usuario de un lector de pantalla suele navegar por la página saltando de un título a otro; por eso, si se altera la jerarquía, también se altera la navegación.
Los niveles de encabezado también hacen que el contenido extenso de una página sea «escaneable»: el usuario encuentra la sección que busca echando un vistazo a los encabezados, en lugar de leer la página línea por línea. Esto puede influir positivamente tanto en la experiencia del usuario como en el tiempo que pasa en la página.
¿Por qué es importante?
Una jerarquía de títulos adecuada facilita que los motores de búsqueda comprendan la coherencia temática de la página y sus subtemas, y permite que los usuarios que utilizan lectores de pantalla puedan navegar por la página. Google deduce de la estructura de los encabezados qué sección de una página larga abarca cada subtema; esto puede ayudar a seleccionar el fragmento correcto, especialmente en resultados enriquecidos como los «fragmentos destacados» (featured snippet).
Una jerarquía desordenada o incompleta provoca que la estructura del contenido resulte ambigua y da lugar a problemas de accesibilidad. Por ejemplo, saltar directamente de un H2 a un H4 puede confundir al usuario de un lector de pantalla, que se preguntará: «¿Falta aquí un nivel intermedio o se ha acabado la sección?».
En un caso extremo, en las aplicaciones de página única (single page application) o en los sistemas de plantillas con múltiples componentes, los distintos componentes pueden generar sus propios H1 de forma independiente; esto puede dar lugar, sin darse cuenta, a que haya más de un H1 en la página. En este tipo de arquitecturas técnicas, es importante gestionar los niveles de encabezado desde un punto central.
¿Cómo se soluciona?
- Solo debe haber un H1 en la página; este suele ser el título principal de la página y debe resumir claramente el tema de la misma.
- Utiliza los encabezados en orden: H1 → H2 → H3, sin saltarte ningún nivel.
- Utiliza los encabezados para definir la estructura del contenido, no por motivos visuales; si quieres texto grande o en negrita, utiliza CSS, no elijas un nivel de encabezado incorrecto.
- Cada H2/H3 debe ser un título de sección real, no texto decorativo ni eslogan.
- Utiliza las palabras clave de forma natural en los títulos; no llenes cada título a la fuerza con palabras clave.
- En páginas largas, escribe los encabezados de forma coherente y predecible para que formen una tabla de contenidos; esto ayuda tanto al usuario como a los motores de búsqueda.
- Si utilizas una biblioteca de temas o componentes, documenta en una guía de estilo centralizada qué nivel de título utilizan los distintos componentes (encabezado, hero, tarjeta, pie de página).
- Al modificar el diseño de la página, comprueba periódicamente con las herramientas de desarrollo del navegador (árbol DOM) si se ha alterado la jerarquía de los títulos.
- En blogs o sitios de noticias, establece un flujo de trabajo de gestión de contenidos que mantenga el título del artículo (H1) junto con el título editorial, y el título SEO en un campo separado; no vincules ambos entre sí.
- En los sitios web con varios autores, cada editor puede tener hábitos diferentes; por eso, plasmar las normas de la jerarquía de títulos en una guía de estilo aumenta la coherencia.
Ejemplo
<h1>Guía de SEO</h1>
<h2>SEO Técnico</h2>
<h3>Velocidad del Sitio</h3>
<h2>SEO de Contenidos</h2>
<h3>Investigación de Palabras Clave</h3>Mal ejemplo: <h1>Bienvenido</h1> utilizar directamente <h4>Nuestros Productos</h4> — se han saltado los niveles H2 y H3, rompiendo la jerarquía.
Errores habituales
- Utilizar más de un H1 en la página (p. ej., tanto en el área del logotipo como en el contenido).
- No utilizar ningún H1.
- Utilizar las etiquetas de título solo para conseguir una fuente grande o en negrita, sin tener en cuenta la jerarquía.
- Saltar de H2 directamente a H4.
- Cuando en el informe de Seoraporu.co aparece una advertencia de «más de un H1» o «falta de H1», hay que corregirlo a nivel de plantilla o tema, ya que suele ser un problema que se repite en todas las páginas.