Cómo corregir la jerarquía de encabezados en WordPress

Los encabezados aportan al contenido de tu página una estructura clara y lógica. No son solo elementos visuales para que el texto se vea más grande. Los lectores de pantalla los utilizan para que las personas naveguen por las secciones, y los motores de búsqueda los emplean para entender la jerarquía temática de tu contenido. Una estructura de encabezados rota confunde tanto a personas como a máquinas, así que hacerlo bien merece la pena para la accesibilidad, el SEO y la legibilidad general.

Cómo es una jerarquía de encabezados correcta

Piensa en tus encabezados como en un esquema o índice de contenidos. Cada nivel representa una profundidad de anidamiento, y nunca deberías saltarte un nivel al bajar. Así es como se ve una estructura adecuada:

H1: Título de la página (solo uno por página)
  H2: Primera sección principal
    H3: Subsección de la primera sección principal
    H3: Otra subsección
      H4: Detalle dentro de la subsección
  H2: Segunda sección principal
    H3: Subsección de la segunda sección principal
  H2: Tercera sección principal

Fíjate en cómo cada nivel de encabezado está contenido dentro del nivel superior. No saltarías de H2 directamente a H4, igual que no crearías una sub-subsección sin una subsección previa. Volver a subir está bien: tras un H4 puedes regresar a un H2 para una nueva sección principal.

Errores habituales de encabezados en WordPress

La mayoría de problemas de jerarquía de encabezados en WordPress provienen de unos pocos patrones recurrentes:

• El tema usa etiquetas incorrectas para el título de la página: algunos temas muestran el título de la entrada o página como H2 en lugar de H1, o utilizan el nombre del sitio como H1 en cada página. Esto significa que el verdadero título de tu contenido queda degradado, y muchas páginas pueden no tener un H1 apropiado.
• Varias etiquetas H1 en una sola página: suele ocurrir cuando el tema muestra el título del sitio como H1 en la cabecera y el título de la página también es un H1. Cada página debería tener exactamente un H1. En las páginas internas, el nombre del sitio debería ser un <p>, <span> o un <div> con estilos, no un H1.
• Saltarse niveles de encabezado: pasar de H2 a H4 o de H1 a H3 ocurre cuando los autores eligen los niveles de encabezado en función de su aspecto visual y no de su significado lógico. Si el H3 tiene el tamaño que parece adecuado, eligen H3, aunque no exista un H2 por encima.
• Usar encabezados para dar estilo visual: a veces los autores usan un H2 o H3 solo porque quieren texto grande y en negrita para una llamada a la acción o el título de un widget de la barra lateral. Estos no son encabezados de contenido reales y deberían estilizarse con clases CSS.
• Encabezados de constructores de páginas y widgets: los constructores como Elementor y las áreas de widgets a menudo insertan encabezados en niveles inesperados. Un widget de la barra lateral puede usar un H3 mientras el área de contenido no tiene un H2, creando un nivel omitido en la jerarquía global de la página.

Cómo comprobar tu jerarquía de encabezados

Antes de corregir nada, necesitas ver cómo es tu estructura actual de encabezados. Aquí tienes varias formas de hacerlo:

• InspectWP: ejecuta un análisis y revisa la sección de contenido. InspectWP muestra la jerarquía completa de encabezados de tu página, facilitando detectar etiquetas H1 ausentes, H1 duplicados, niveles omitidos y otros problemas.
• Extensión del navegador HeadingsMap: disponible para Chrome y Firefox, esta extensión muestra una vista en árbol de todos los encabezados de la página actual. Resalta los errores estructurales como niveles omitidos con iconos de advertencia.
• Herramienta de accesibilidad WAVE: la extensión WAVE para navegador (wave.webaim.org) evalúa tu página en busca de problemas de accesibilidad, incluidos los problemas de estructura de encabezados. Superpone iconos directamente sobre la página donde se detectan problemas.
• Inspección manual: haz clic derecho en la página, selecciona "Ver código fuente de la página" (Ctrl+U) y busca <h1, <h2, <h3, etc. Esto te muestra las etiquetas de encabezado en bruto en el HTML.

Corregir encabezados en el editor de bloques Gutenberg

Si usas el editor de bloques de WordPress (Gutenberg), corregir los niveles de encabezado es sencillo:

1. Haz clic en cualquier bloque de Encabezado de tu contenido.
2. En la barra de herramientas del bloque, en la parte superior, verás el nivel de encabezado actual (por ejemplo, "H3"). Haz clic para abrir un desplegable.
3. Selecciona el nivel de encabezado correcto en el desplegable. Recuerda que las secciones de tu contenido deben empezar con H2 (ya que H1 está reservado para el título de la página) y las subsecciones deben usar H3.
4. El editor de bloques incluye ahora una función de "Esquema del documento". Haz clic en el icono de información (círculo con "i") en la barra superior para ver la estructura de encabezados de toda la entrada. Te avisa de niveles omitidos.

Si usas el Editor Clásico, cambia a la pestaña "Texto" para ver el HTML en bruto y modificar manualmente las etiquetas de encabezado.

Corregir encabezados en las plantillas del tema

Si tus problemas de encabezados vienen del tema y no del contenido, tienes que editar los archivos de plantilla del tema. Usa siempre un tema hijo para que tus cambios sobrevivan a las actualizaciones del tema.

Las correcciones habituales incluyen cambiar la etiqueta del título del sitio en las páginas internas:

// En header.php de tu tema hijo
<?php if (is_front_page()) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>

Y asegurarte de que el título de la entrada usa H1 en las plantillas de entrada/página individual:

// En single.php o content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>

En las páginas de archivo (categoría, etiqueta, archivos por fecha), el título del archivo debería ser normalmente el H1, y los títulos individuales de las entradas dentro del bucle deberían ser H2.

Estilizar encabezados sin romper la jerarquía

Si quieres que un texto se vea visualmente como un encabezado pero no es un encabezado estructural (por ejemplo, un banner promocional o el título de un widget), usa una clase CSS en lugar de una etiqueta de encabezado:

.heading-style {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

Aplica esta clase a un elemento <p> o <div>. A la inversa, si quieres que un encabezado real se vea más pequeño o distinto al predeterminado, dale estilo con CSS en lugar de elegir un nivel de encabezado más bajo por su apariencia.

Impacto en la accesibilidad de la jerarquía de encabezados (WCAG 1.3.1)

El criterio de éxito 1.3.1 de las Pautas de Accesibilidad para el Contenido Web (WCAG) exige que la información, la estructura y las relaciones transmitidas mediante la presentación se puedan determinar de forma programática. Los encabezados son una de las principales formas en que los usuarios de lectores de pantalla navegan por las páginas web. Según la encuesta de usuarios de lectores de pantalla de WebAIM, más del 67% utiliza los encabezados como su método principal para encontrar contenido en una página. Si te saltas niveles o usas encabezados solo por estética, los usuarios de lectores de pantalla no podrán navegar tu contenido de forma fiable. Corregir tu jerarquía de encabezados es una de las mejoras de accesibilidad más sencillas y de mayor impacto que puedes realizar.

Impacto en el SEO de una correcta estructura de encabezados

Google ha confirmado que utiliza los encabezados para entender el contenido y la estructura de una página. Aunque los encabezados por sí solos no van a determinar tu posicionamiento, sí aportan importantes señales de contexto. Un H2 que diga "Guía de instalación" le indica a Google que la sección siguiente trata sobre la instalación. Los encabezados correctamente anidados también ayudan a Google a generar fragmentos destacados y enlaces de sitio. Saltarse niveles o usar encabezados de forma incoherente envía señales contradictorias sobre la estructura de tu contenido y puede impedir que los motores de búsqueda interpreten correctamente los temas de tu página.

Verifica tu jerarquía de encabezados con InspectWP

Tras realizar las correcciones, ejecuta un nuevo análisis con InspectWP. La sección de contenido muestra cada encabezado de tu página en orden, junto con su nivel. Deberías ver un único H1, seguido de H2 para las secciones principales, H3 para las subsecciones y ningún nivel omitido. Si detectas problemas pendientes, vuelve al editor o a la plantilla del tema y ajústalos en consecuencia.