Las etiquetas de encabezado HTML, <h1> a <h6>, definen los encabezados y subencabezados de tu contenido. Crean un esquema jerárquico del documento que indica a los navegadores, motores de búsqueda y tecnologías de asistencia cómo está estructurada tu página. Piénsalas como los títulos de capítulos y secciones de un libro: el H1 es el título del libro, los H2 son los títulos de capítulos, los H3 son las secciones dentro de los capítulos, y así sucesivamente.
Comprender la jerarquía de encabezados
Cada nivel de encabezado representa una profundidad diferente en la estructura de la página:
<h1>: el encabezado principal de la página. Describe de qué trata toda la página. La buena práctica es usar exactamente un H1 por página. En una entrada de blog, normalmente es el título de la entrada. En una página de inicio, podría ser la propuesta de valor principal.<h2>: encabezados principales de sección. Estos dividen tu contenido en sus secciones primarias. En un artículo largo, cada H2 introduce un nuevo tema o punto principal.<h3>: subsecciones dentro de una sección H2. Si tu sección H2 cubre "Cabeceras de seguridad" y quieres dividirla en partes, cada parte recibe un H3.<h4>a<h6>: niveles de anidamiento más profundos. La mayoría del contenido rara vez necesita ir más allá de H4. Usar H5 o H6 normalmente indica que el contenido podría beneficiarse de reestructurarse en páginas o secciones separadas.
Por qué importa la jerarquía de encabezados para el SEO
Los motores de búsqueda usan los encabezados para entender el tema y la estructura de tu contenido. Google ha confirmado que los encabezados ayudan a sus rastreadores a captar de qué trata cada sección de una página. Aunque los encabezados por sí solos no son un factor de posicionamiento enorme, contribuyen al SEO on-page general de varias maneras:
- Señales de tema: las palabras clave en los encabezados tienen más peso que las palabras clave en el cuerpo del texto. Un H2 que diga "Cómo proteger tu inicio de sesión de WordPress" le indica a Google que esa sección trata específicamente sobre la seguridad del inicio de sesión.
- Fragmentos destacados: Google a menudo extrae contenido de secciones con encabezados claros para los resultados de fragmentos destacados. Una página bien estructurada con encabezados descriptivos tiene más posibilidades de aparecer en estas posiciones prominentes.
- Comprensión de la estructura de la página: una jerarquía lógica de encabezados ayuda a Google a entender la relación entre secciones. Si tu H2 es "Optimización del rendimiento" y tus H3 son "Compresión de imágenes" y "Caché", Google entiende que son subtemas del rendimiento.
- Posicionamiento por pasajes: Google puede posicionar pasajes individuales de una página. Los encabezados claros ayudan a Google a identificar dónde termina un pasaje y empieza otro.
Accesibilidad y navegación con lector de pantalla
Para los usuarios que dependen de lectores de pantalla (como JAWS, NVDA o VoiceOver), los encabezados son una de las principales herramientas de navegación. Los usuarios de lectores de pantalla suelen pulsar una tecla de atajo (normalmente "H") para saltar de encabezado a encabezado, ojeando la estructura de la página de la misma forma que un usuario vidente la escanea visualmente. Si tus encabezados faltan, están desordenados o se usan para estilo visual en lugar de para la estructura, los usuarios de lectores de pantalla pierden esta capacidad de navegar de forma eficiente. Las Pautas de Accesibilidad para el Contenido Web (WCAG) abordan específicamente la estructura de encabezados. El Criterio de Éxito 1.3.1 exige que la información y las relaciones transmitidas mediante la presentación sean determinables programáticamente. En la práctica, esto significa que tus niveles de encabezado deben reflejar la jerarquía real del contenido, no solo verse bien.
Errores comunes con los encabezados en WordPress
Los sitios WordPress son particularmente propensos a problemas de encabezados porque la estructura de encabezados se reparte entre el tema y el editor de contenido:
- Múltiples etiquetas H1: este es el problema más común. Algunos temas muestran el título del sitio como H1 en la cabecera y también envuelven el título de la página/entrada en un H1. Eso da a la página dos encabezados principales en competencia. Aunque Google ha dicho que múltiples H1 están "bien" en el sentido de que no son una penalización, un único H1 que indique claramente el tema de la página sigue siendo el enfoque más limpio.
- Saltarse niveles de encabezado: pasar de H2 directamente a H4, saltándose por completo el H3. Esto rompe el esquema lógico. Los lectores de pantalla anuncian los niveles de encabezado, así que un usuario que oiga "Encabezado nivel 2" seguido de "Encabezado nivel 4" se preguntará qué ha pasado con el nivel 3.
- Usar encabezados para dar estilo: elegir un H3 en lugar de un H2 porque el tamaño de fuente del H3 queda mejor en el tema. Esto es un mal uso de los encabezados. El enfoque correcto es usar el nivel de encabezado adecuado para la estructura y luego ajustar el CSS para conseguir la apariencia visual deseada.
- Ningún H1: algunos temas o diseños de maquetadores omiten accidentalmente el H1 por completo, o el H1 se establece como el título del sitio en la cabecera mientras que el contenido real de la página empieza en H2. Cada página debería tener exactamente un H1 que describa su tema principal.
- Encabezados dentro de widgets y barras laterales: los widgets de WordPress a menudo muestran encabezados H2 o H3 como títulos de widget. Estos encabezados no forman parte de la jerarquía principal del contenido y pueden confundir el esquema del documento. Algunos temas manejan esto con atributos
aria-, pero muchos no. - Etiquetas de encabezado vacías: a veces los temas o maquetadores dejan etiquetas de encabezado vacías en el marcado (un
<h2>sin texto). Son invisibles para los usuarios videntes pero confunden a los lectores de pantalla.
Cómo gestiona WordPress los encabezados
En una configuración típica de WordPress, la estructura de encabezados funciona así: el tema genera el H1, normalmente a partir del título de la entrada o de la página. El contenido que escribes en el editor debería empezar con encabezados H2 para las secciones principales y usar H3 y por debajo para las subsecciones. Casi nunca deberías escribir un H1 dentro del editor de contenido, porque el tema ya muestra uno. Si estás usando un maquetador o una landing page personalizada donde el tema no muestra un H1, entonces sí necesitas añadir uno tú mismo. Antes de publicar cualquier página, vale la pena comprobar si el tema muestra un H1 automáticamente, para evitar duplicados.
Encabezados en el editor de bloques Gutenberg
Gutenberg facilita insertar y gestionar encabezados. El bloque Encabezado te permite elegir el nivel (de H2 a H6, y H1 si es necesario) desde un desplegable. Gutenberg también incluye una función de "Esquema del documento" en la barra lateral del editor que te muestra la estructura completa de encabezados de tu entrada de un vistazo. Si te saltas un nivel de encabezado, la vista del esquema lo marcará con una advertencia. Es una herramienta integrada útil que muchos usuarios de WordPress pasan por alto. Acostúmbrate a comprobar el esquema del documento antes de pulsar Publicar.
Herramientas para comprobar y visualizar la estructura de encabezados
Más allá del esquema integrado de Gutenberg, hay varias formas de auditar tu estructura de encabezados:
- Extensiones de navegador: la extensión "HeadingsMap" (disponible para Chrome y Firefox) muestra la jerarquía de encabezados de cualquier página como un árbol plegable. La herramienta de accesibilidad "WAVE" también resalta problemas de encabezados.
- Plugins de SEO: Yoast SEO y Rank Math comprueban la estructura de encabezados como parte de su análisis de contenido. Te avisarán de H1 faltantes o de un uso subóptimo de los encabezados.
- Validadores en línea: el W3C Markup Validation Service comprueba tu HTML en busca de problemas estructurales, incluidos problemas de orden de los encabezados.
- InspectWP: InspectWP escanea tu página y lista cada encabezado en orden, facilitando ver toda la jerarquía de un vistazo.
Buenas prácticas para los encabezados de WordPress
- Un H1 por página: deja que el tema gestione el H1 a partir del título de la entrada/página. No añadas otro en el contenido.
- Empieza el contenido en H2: tu primer encabezado dentro del editor debería ser H2, no H1.
- No te saltes niveles: ve H2, luego H3, luego H4. Nunca saltes de H2 a H4.
- Usa los encabezados para la estructura, no para el estilo: si quieres texto más pequeño o más grande, usa clases CSS en lugar de cambiar el nivel del encabezado.
- Mantén los encabezados descriptivos: "Seguridad" es menos útil que "Buenas prácticas de seguridad en WordPress" tanto para los lectores como para los buscadores.
- Comprueba el esquema del documento: usa el esquema integrado de Gutenberg o una extensión de navegador antes de publicar.
Qué comprueba InspectWP
InspectWP analiza la estructura de encabezados de tu página WordPress y lista cada encabezado en orden, de H1 a H6. Detecta etiquetas H1 faltantes, múltiples etiquetas H1, niveles de encabezado saltados y encabezados vacíos. Esto te da una imagen clara del esquema del documento de tu página y te ayuda a corregir problemas estructurales que afectan tanto al SEO como a la accesibilidad.