Estructura de encabezados HTML H1–H6: guía completa para el SEO

HTML ofrece seis niveles de encabezado, desde <h1> hasta <h6>. La mayoría de quienes crean contenido sabe que el H1 importa para el SEO. Pero pocos entienden el papel de H2, H3 y los niveles inferiores, cómo interactúan con los rastreadores de los buscadores y por qué una jerarquía rota perjudica tanto al SEO como a los usuarios.

Para el rastreador de Google, las etiquetas de encabezado son el índice de un documento. El robot las usa para determinar el tema de la página, identificar los subtemas y decidir cuánto encaja el documento con una consulta concreta. Un nivel que falta, un H1 de más o un encabezado usado solo por su aspecto visual destruyen ese mapa.

zoom_in

Qué son las etiquetas de encabezado H1–H6

H1–H6 son elementos semánticos de HTML que marcan encabezados en seis niveles de importancia. H1 es el encabezado principal de la página; H6 es el subencabezado anidado más profundo. Cada nivel envía al rastreador una señal: «el contenido de esta sección trata sobre este tema».

A diferencia del formato visual (<b>, <big>, clases CSS), las etiquetas de encabezado tienen significado. Los navegadores muestran el H1 en negrita y grande por defecto, pero el tamaño es solo un efecto secundario. Puedes hacer que un H6 se vea más grande que un H1 con CSS, pero eso no cambia la semántica: para los buscadores y los lectores de pantalla, el H1 sigue siendo el encabezado principal.

Jerarquía: H1, H2, H3 y niveles inferiores

Una jerarquía de encabezados correcta funciona como el índice de un libro: un título (H1), varios capítulos (H2), apartados dentro de cada capítulo (H3) y párrafos de detalle debajo (H4 y siguientes). Romper esa estructura equivale a arrancar capítulos de un libro y mezclar las páginas.

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

Cuándo se necesitan H4–H6

H4, H5 y H6 se usan poco: solo en documentos técnicos extensos que requieren un cuarto nivel de anidación o más. Por ejemplo, contratos legales, documentación de API o protocolos médicos. Para artículos de blog y landing pages, tres niveles (H1–H3) bastan para todo.

Cómo afectan los encabezados al SEO

Cada etiqueta de encabezado es una señal de relevancia. Cuanto mayor es el nivel, más fuerte es la señal: H1 pesa más que H2, y H2 más que H3. Pero todas participan en la evaluación de lo cerca que está un documento de una consulta de búsqueda.

Google usa los encabezados para generar fragmentos destacados. Cuando un usuario hace una pregunta, el algoritmo busca páginas en las que un H2 o H3 coincida estrechamente con la consulta y el bloque de contenido siguiente dé una respuesta directa. Los H2 bien redactados son candidatos gratuitos a la posición cero.

Los encabezados también alimentan el enlazado interno: el texto ancla que coincide con el H2 de la página de destino refuerza la relevancia. Y los sitemaps: algunos CMS añaden automáticamente atributos id a los encabezados, lo que crea URL con ancla que pueden referenciarse directamente en el sitemap XML para secciones profundas de la página.

Accesibilidad y lectores de pantalla

Los lectores de pantalla (software de apoyo para usuarios con discapacidad visual) usan las etiquetas de encabezado como principal mecanismo de navegación en una página. El usuario pulsa H para saltar entre encabezados y escucha el índice de la página. Una jerarquía de encabezados rota hace inútil la navegación.

Según WCAG 2.1 (criterio 1.3.1 «Información y relaciones»), los encabezados deben implementarse con etiquetas HTML semánticas, no con estilos. Un botón con font-size: 24px; font-weight: bold no es un encabezado para un lector de pantalla. <h2> sí lo es. La diferencia es enorme.

Reglas para usar encabezados

Cinco reglas que cubren el 95 % de las situaciones reales.

Errores habituales en la estructura de encabezados

Estos errores aparecen en auditorías de la mayoría de sitios, desde pequeños blogs hasta plataformas empresariales.

• Varios H1 en la página. Suele deberse a constructores visuales que envuelven cualquier bloque grande en un H1. Para encontrarlos: Screaming Frog → H1 → Multiple. Solución: deja un solo H1 y sustituye el resto por H2 o por un <div> con estilos.
• Encabezados usados para el estilo, no para la semántica. Un diseñador eligió H4 porque «queda bien de tamaño», saltándose H2 y H3. El rastreador ve H1 → H4 → H1 → H4: caos en lugar de estructura.
• H1 ausente. Tras un rediseño o una migración de CMS, el H1 desaparece de la plantilla. Una página sin H1 pierde su principal señal de relevancia en la página.
• H1 = nombre del sitio en todas las páginas. Una plantilla del CMS inserta el nombre de la empresa en el H1 de forma global. Todas las páginas tienen el mismo H1: duplicados en todo el sitio y cero relevancia.
• Niveles saltados al anidar. H1 → H3 (falta H2), H2 → H4 (falta H3). El lector de pantalla informa de un error; el rastreador pierde el contexto del subapartado.
• Usar <p> o <div> en lugar de etiquetas de encabezado. El texto parece un encabezado visualmente, pero para los buscadores y los lectores de pantalla no lo es. Es habitual en plantillas antiguas.
• Encabezados demasiado largos. Un H2 de tres frases no es un encabezado, es un párrafo. Un encabezado debe leerse de un vistazo: lo óptimo son entre 4 y 12 palabras.

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

Herramientas para auditar la estructura de encabezados

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

Checklist de la estructura de encabezados

H1

• Exactamente un H1 en cada página del sitio
• El H1 contiene la consulta principal objetivo de la página
• El H1 coincide en significado con la etiqueta title (la redacción puede variar)
• El H1 es único en todo el sitio y la plantilla no lo duplica
• El H1 no está vacío, no contiene solo una imagen y no está oculto con CSS

H2

• Cada H2 sigue al H1 sin saltar ningún nivel
• Cada H2 describe una sección principal distinta de la página
• Los H2 contienen consultas secundarias y términos LSI (de forma natural, sin saturar)
• La redacción de un H2 puede servir de ancla para un fragmento destacado
• No hay H2 solo por efecto visual: únicamente donde empieza una nueva sección temática

H3–H6

• H3 se anida dentro de H2, y H4 dentro de H3 (sin saltar niveles hacia abajo)
• H4–H6 se usan solo cuando la anidación profunda es realmente necesaria
• Ninguna etiqueta H3–H6 se usa en lugar de un H2 solo por su tamaño visual
• La estructura general se lee como un índice lógico al escanear la página

Accesibilidad

• El orden de los encabezados está verificado con la extensión HeadingsMap o WAVE
• Todos los encabezados están implementados con etiquetas HTML semánticas, no con divs con estilos
• No hay encabezados ocultos (display: none, visibility: hidden)
• Cada encabezado tiene contenido significativo: ninguno vacío ni de relleno

Preguntas frecuentes

Respuestas a las preguntas más frecuentes sobre la estructura de encabezados que surgen en auditorías y talleres con equipos de contenido.