Headings y semántica HTML
Los headings (<h1> a <h6>) no son un recurso visual: son la estructura semántica principal del documento.
Definen cómo un motor, una IA o una tecnología asistiva entiende la jerarquía y el significado del contenido.
Un sitio puede verse perfecto visualmente y, al mismo tiempo, estar semánticamente roto.
3.1 Qué son los headings (y qué no)
Los headings:
- describen la estructura lógica del contenido
- indican importancia y jerarquía
- ayudan a:
- crawling
- indexación
- accesibilidad
- AEO / GEO
Los headings no son:
- títulos visuales
- herramientas de diseño
- reemplazos de
<div>o<span>
El heading correcto puede no verse grande.
El texto grande puede no ser un heading.
3.2 El rol del H1
Qué es el H1
El <h1> representa el tema principal de la página.
Es el equivalente semántico al “título del documento” dentro del contenido visible.
Reglas /nk para H1
- Un solo H1 por página
- Debe describir claramente el contenido principal
- Debe existir en el HTML inicial
- No debe depender de JS post-hydration
Impacto real
- Señal fuerte de relevancia temática
- Referencia para buscadores e IA
- Punto de entrada para lectores de pantalla
Errores comunes
- Múltiples H1 por página
- H1 vacío o genérico
- H1 distinto al contenido real
- H1 generado dinámicamente según estado del cliente
3.3 Jerarquía correcta (H2–H6)
Los headings deben seguir una estructura jerárquica, no visual.
Ejemplo correcto:
<h1>Web Development Services</h1>
<h2>What we do</h2>
<h3>Corporate Websites</h3>
<h3>E-commerce</h3>
<h2>Technologies</h2>
Ejemplo incorrecto:
- Saltar niveles (H1 → H4)
- Usar H2 solo para agrandar texto
- Cambiar jerarquía por diseño
Regla clave
Un heading siempre “depende” del anterior de nivel superior.
3.4 Headings y accesibilidad
Desde accesibilidad:
- los headings permiten navegar el documento
- definen secciones lógicas
- evitan bloques de texto planos
Un documento sin headings correctos:
- es difícil de leer para humanos
- es ambiguo para crawlers
- es poco usable para IA
SEO, accesibilidad y UX convergen en este punto.
3.5 Headings vs estilos visuales
Separación clara de responsabilidades:
- HTML: semántica
- CSS: presentación
- JS: comportamiento
Buenas prácticas:
- usar headings por significado, no por tamaño
- estilizar headings libremente con CSS
- no “simular” headings con
<div>
3.6 Headings en sitios con CMS / componentes
En arquitecturas componentizadas:
- el riesgo principal es romper la jerarquía sin notarlo
Casos típicos:
- componentes reutilizables que incluyen H1
- bloques de contenido que renderizan headings sin contexto
- layouts que agregan headings “decorativos”
Buenas prácticas /nk:
- definir claramente quién renderiza el H1
- auditar headings en páginas compuestas
- evitar H1 dentro de componentes reutilizables
- en caso de no ser un campo de Rich Text, permitir que el cliente pueda elegir el heading a renderizar
3.7 Headings y SEO moderno (AEO / GEO)
Los headings:
- ayudan a identificar secciones relevantes
- facilitan extracción de respuestas
- mejoran featured snippets
- ordenan el contenido para IA
Para AEO:
- headings claros
- secciones bien delimitadas
- preguntas como headings cuando aplica
Para GEO:
- estructura predecible
- jerarquía lógica
- contenido fácilmente extraíble
3.8 Headings y renderizado
Requisitos técnicos:
- los headings deben existir en el HTML inicial
- no deben depender de:
useEffect- fetch client-side
- estados transitorios
Si el bot no ve el heading, no existe.
3.9 Checklist mínimo de la sección
Antes de considerar una página válida:
- Existe un solo H1
- El H1 describe el contenido principal
- La jerarquía H2–H6 es lógica
- No se usan headings solo por estilo
- Los headings están presentes en el HTML inicial
- Componentes reutilizables no rompen la jerarquía
3.10 Conclusión
Los headings son la columna vertebral semántica de una página.
No optimizarlos correctamente no rompe el layout, pero rompe la comprensión del contenido.
En /nk:
- los headings se definen con intención
- se auditan como parte del SEO técnico
- y forman parte del Definition of Done