SEO on-page
Capítulo 03 / 08
Jerarquía de headers
Los headers son la tabla de contenidos que tu página le entrega a Google, a los motores de IA y a los lectores de pantalla. Si te brincas un nivel o falsificas la jerarquía, los tres leen la página mal.
Los headers son el esqueleto estructural de una página web. Le dicen a Google, a los motores de IA, a los lectores de pantalla y a cualquier humano que escanea la página cómo está organizado el contenido: de qué trata la página (H1), cuáles son las secciones mayores (H2) y cómo se desglosan esas secciones (H3, H4). Bien hechos, los headers forman un outline que podrías leer solo y aún entender la página. Mal hechos — niveles brincados, varios H1, headers usados como estilo visual — la jerarquía se rompe para todas las audiencias a la vez.
“Si pegas tus H1 al H4 en una app de notas y el resultado se lee como una tabla de contenidos coherente, tu jerarquía sirve. Si se lee revuelto, ni Google ni un lector pueden seguir lo que hay en la página.”
Los cinco niveles de header y para qué sirve cada uno
| Nivel | Propósito | Cuántos por página |
|---|---|---|
| H1 | Tema de la página: keyword principal palabra por palabra | Exactamente uno |
| H2 | Secciones mayores de la página | Típicamente 4-10 |
| H3 | Subsecciones dentro de un H2 | 0-5 bajo cada H2 |
| H4 | Subpuntos dentro de un H3 (raro en artículos, común en docs) | Úsalo con moderación |
| H5/H6 | Estructura anidada profunda (solo docs técnicas) | Casi nunca en páginas de marketing/blog |
La regla del único H1
Cada página tiene exactamente un H1. Lleva la keyword principal palabra por palabra. Coincide con el title tag y con el slug de la URL según la regla H1 = URL = Title. No hay versión de esta regla donde dos H1 sean aceptables en una página de contenido que apunta a una sola keyword principal.
La especificación de HTML5 técnicamente permite varios H1 cuando cada uno vive dentro de un elemento sectioning (article, section, aside, nav). El argumento de “dos H1 está bien” cita el algoritmo de outline de HTML5. El problema: ningún motor de búsqueda, motor de IA o lector de pantalla en producción implementa de verdad ese algoritmo. Aplanan el documento, leen los headers en orden de fuente y tratan los múltiples H1 como una señal temática fragmentada.
La solución es trivial: cuando tu diseño tiene un logo y un titular del hero los dos estilizados grandes, marca el logo como párrafo o imagen y el titular del hero como H1. Un solo H1, sin compromiso semántico, la parte visual queda igual.
La prueba de la página outlineable
La forma más rápida de auditar la jerarquía de una página es extraer solo los headers y leerlos como lista:
- H1: Jerarquía de headers
- H2: Los cinco niveles de header y para qué sirve cada uno
- H2: La regla del único H1
- H2: La prueba de la página outlineable
- H2: Cómo leen los headers los motores de IA
Si esa lista se lee como un outline coherente del tema de la página, la jerarquía funciona. Si ves brincos (H2 a H4), falta de contexto (un H3 sin H2 padre arriba) o duplicación (dos H1, tres H2 idénticos), tienes un problema de estructura que ninguna cantidad de body lo arregla.
Los headers como tabla de contenidos del motor de IA
Los motores de respuesta con IA recuperan pasajes, no páginas enteras. Cuando ChatGPT, Perplexity o Gemini escanea tu documento buscando un pasaje relevante para citar, los headers son el mapa de navegación. Una página con bordes claros de H2 deja que los pasajes se extraigan limpios: el motor sabe dónde empieza y termina cada tema. Una página con headers vagos o ausentes deja que el body se corte de forma arbitraria, lo que produce peor retrieval y peores citas.
Implicación práctica: escribe H2 que nombren la pregunta o el subtema que la sección responde. “Para qué sirven los headers” es mejor que “Antecedentes”. “La regla del único H1” es mejor que “Encabezados”. Los motores de IA que recuperan pasajes prefieren títulos de sección específicos y con forma de consulta.
Los cinco errores más comunes de jerarquía
- Falta H1. La página no tiene H1, solo un H2 haciendo el trabajo visual. Google cae al title tag, pero la señal a nivel de página se debilita.
- Múltiples H1. Dos o más H1 parten la señal temática. Común en sitios template-driven donde el logo y el hero son ambos H1.
- Niveles brincados. H2 seguido directamente de H4. Rompe la navegación de lectores de pantalla; los motores de IA pierden la agrupación de secciones.
- H2 usados como elementos de diseño. Widgets de sidebar, cajas de callout y cajas de features marcadas como H2 cuando no son secciones de página. Contamina el outline.
- H2 vagos. “Resumen”, “Detalles”, “Conclusión” no le dicen a lectores ni a motores de IA qué contiene la sección. Reemplázalos por títulos específicos.
Headers y accesibilidad
Los lectores de pantalla usan los niveles de heading como herramienta principal de navegación dentro de la página. Un usuario que presiona ‘H’ salta entre todos los headings; ‘2’ salta entre H2; ‘3’ salta entre H3. El lector arma un mapa mental de la página solo con la lista de headings. Tres cosas rompen ese mapa:
- Niveles brincados. Saltar de H2 a H4 deja al usuario preguntándose qué se suponía que iba a introducir el H3 que falta.
- Headings usados como estilo visual. Un párrafo estilizado como heading no aparece en la lista de headings; un heading estilizado como párrafo fragmenta la lista.
- Listas largas de headings sin jerarquía clara. Una página con veinte H2 y ningún H3 es técnicamente válida pero prácticamente innavegable.
La buena noticia: la jerarquía de accesibilidad y la de SEO convergen. Una página que los lectores de pantalla pueden navegar también es una página que Google y los motores de IA pueden outlinear. Arreglar una arregla la otra.
Headers en páginas templatizadas y programáticas
Las páginas programáticas (páginas de ubicación, comparativas, listados de productos) generan headers desde un template. Dos patrones a seguir:
- El H1 es dinámico, el framework de H2 es estático. El H1 lleva la entidad única de la página (“Servicios de SEO en Ciudad de México”). Los H2 son los mismos en todo el template (Precios, Proceso, Casos, FAQ). Eso vuelve cada página outlineable de la misma forma.
- Prueba el H1 más largo posible. Los templates programáticos suelen producir H1 que se cortan feo o se ven rotos para nombres de entidad largos. Prueba el peor input antes de lanzar.
La interacción con enlaces internos
Los headers anclan los saltos dentro de la página que usan los enlaces internos. Cuando enlazas a /articulo/#nombre-de-seccion, el H2 slugificado se vuelve el destino del fragmento. Dos implicaciones:
- El wording estable de los H2 importa: renombrar un H2 rompe todo enlace ancla existente hacia él.
- H2 descriptivos producen URLs de fragmento descriptivas (“#la-regla-del-unico-h1”) que son ya una pequeña señal de ranking y ayudan al usuario a entender a dónde lo va a llevar el link.
El veredicto
La jerarquía de headers es la pieza más barata de SEO estructural disponible. Un solo H1 por página, keyword principal palabra por palabra. H2 para secciones mayores, escritos como títulos de sección específicos, no etiquetas vagas. H3 bajo H2 cuando hace falta, sin brincar niveles. El estilo visual es un asunto separado de la estructura semántica: el CSS maneja tamaño y peso, los headers cargan significado. Aciértale al outline y Google, los motores de IA, los lectores de pantalla y los humanos que escanean leen todos la misma página en el mismo orden.
Preguntas frecuentes
Preguntas frecuentes
Respuestas rápidas a lo que nos preguntan antes de cada prueba.
Sigues necesitando un solo H1 por página. La especificación de HTML5 técnicamente permite varios H1 dentro de elementos sectioning, pero ni Google ni los motores de IA usan el algoritmo de sectioning en producción. Aplanan el documento y leen los headers como una sola jerarquía. Múltiples H1 confunden la señal temática aunque el HTML sea válido. La regla segura es uno solo, siempre.
En este clúster