Usa una jerarquía de encabezados limpia

Qué comprueba esta auditoría

Analiza cada elemento de encabezado de la página (h1–h6) en orden de documento y verifica que los niveles desciendan sin saltos. La comprobación falla cuando aparece un h4 antes de cualquier h3, cuando dos h1 conviven en la misma página, o cuando la profundidad de sección salta más de un nivel.

Por qué importa

Un outline limpio importa en tres frentes a la vez.

• Lectores de pantalla. Anuncian el nivel del encabezado en cada salto. Una persona que navegue por encabezados (un patrón habitual entre usuarios sin visión) oye “encabezado nivel 2: características, encabezado nivel 4: precios” y asume que se ha saltado un nivel 3. La página se vuelve innavegable.
• Buscadores. Siguen leyendo el outline de encabezados como pista sobre la estructura temática. Un h1 seguido de cinco h3 sin ningún h2 se lee como un bloque plano de contenido, no como un artículo organizado.
• Extractores de IA (ChatGPT browsing, Perplexity, Google AI Overviews) trocean el contenido por los límites de los encabezados al resumirlo. Una jerarquía rota produce fragmentos que cruzan varios temas y baja la calidad de las citas.

Cómo solucionarlo

Usa exactamente un h1 por página, normalmente el título de la página. Cada encabezado posterior baja como mucho un nivel cada vez:

<h1>Comparando auriculares inalámbricos en 2026</h1>
  <h2>Qué probamos</h2>
    <h3>Calidad de audio</h3>
    <h3>Autonomía</h3>
  <h2>Mejor opción general: Sony WF-1000XM5</h2>
    <h3>Pros</h3>
    <h3>Contras</h3>

El atajo visual. A veces los diseñadores usan <h4> porque “tiene el tamaño correcto”. No lo hagas: elige el nivel que encaje en el outline del documento y luego dale estilo con CSS. En Tailwind: <h3 class="text-base font-semibold">.

WordPress / page builders. La mayoría de editores por bloques (Gutenberg, Elementor) permiten cambiar el nivel del encabezado independientemente de su estilo. Recorre la página una vez y reetiqueta cada bloque.

Astro / Next.js / React. Crea un pequeño wrapper <Section> que incremente un contexto de nivel de encabezado, para que los componentes reutilizables no fijen <h3> en su código y rompan el outline al anidarse.

Audítalo tú — pega la URL de la página en el validador HTML del W3C y mira la vista previa del outline del documento, o ejecuta la extensión de navegador headingsMap.

Preguntas frecuentes

¿Puedo tener dos h1 en una misma página?

HTML5 permite técnicamente varios h1 dentro de elementos <section> o <article>, pero todos los fabricantes de tecnología de apoyo (y Google) siguen tratando un h1 por página como el patrón correcto. Quédate con uno. Consulta la página de Etiqueta H1.

¿Y los sidebars y widgets?

Los encabezados dentro de <aside> o de regiones de plantilla repetidas también cuentan para el outline. O los bajas a <h3> para que se aniden bajo el contenido principal, o los envuelves en un landmark con su propio ámbito de encabezado.

¿Esto afecta a la puntuación de Lighthouse o accesibilidad?

Sí: heading-order es una de las reglas de axe-core que ejecuta Lighthouse. Una jerarquía rota baja directamente tu puntuación de accesibilidad de Lighthouse.