HTML semántico para SEO: las 5 etiquetas que Google sí lee

Qué es realmente la jerarquía semántica

Una página web es un documento. Como cualquier documento, tiene una estructura: un título, secciones, subsecciones, navegación, el contenido principal y los elementos de los bordes. La jerarquía semántica es escribir esa estructura dentro del HTML, para que cualquier cosa que lea la página entienda qué es cada parte.

Tres piezas importan:

1. Encabezados: del h1 al h6. Definen el esquema del documento, como los títulos de los capítulos de un libro.
2. Landmarks: header, main, nav, article, aside, footer. Marcan las regiones de la página.
3. Elementos de contenido: button para botones, ul y li para listas, a para enlaces, p para párrafos. La etiqueta correcta para cada cosa.

Si lo haces bien, el mismo marcado sirve para todos: una persona vidente leyendo la página con estilos, un crawler de un buscador analizando la estructura y un lector de pantalla anunciando la página a una persona ciega. La misma lógica que hace que el alt text en las imágenes sirva a las dos audiencias se aplica aquí. Una sola fuente de verdad.

Por qué importa

Hay dos audiencias que leen tu HTML directamente: los buscadores y la tecnología de asistencia. Ninguna ve tu diseño. Las dos dependen de las etiquetas.

Google analiza la estructura para entender de qué va la página. El h1 le dice el tema. Los h2 le dicen las secciones principales. Las listas, los artículos y la región main le ayudan a decidir cuál es el contenido real frente a la navegación o el pie de página.

Un lector de pantalla hace lo mismo por una razón distinta. Las personas que no pueden ver la pantalla pulsan una tecla para saltar de un encabezado a otro, o para ir directamente al landmark main. Si tu página tiene seis h1, no tiene main y los botones son en realidad div, esa persona se queda recorriendo cada palabra en orden lineal.

Mismo marcado, las dos audiencias atendidas. Esa es la idea.

La regla del h1

Un solo h1 por página, y debería describir el tema de esa página.

Suena obvio. La mayoría de CMS lo hace mal. Meten el logotipo del sitio en un h1 en cada página, así que todas las páginas tienen el mismo h1: el nombre de la empresa. Y luego el título real de la página acaba siendo un h2 o, peor, un div con estilos para que parezca grande.

Cómo arreglarlo:

• El logotipo en el header del sitio debería ser un enlace normal, normalmente dentro de un landmark <header>.
• El tema de la página, lo único de esa página, debería ser el h1.
• En un post de blog, el título del post es el h1. En una ficha de producto, el nombre del producto es el h1. En la home, la propuesta principal es el h1.

Abre cualquier página de tu sitio, dale a Ver código fuente y busca <h1. Deberías encontrar una sola etiqueta, y el texto debería coincidir con el tema de la página.

Orden de los encabezados

Los encabezados son un esquema. Los esquemas no se saltan niveles.

La regla es sencilla: tras un h1 viene un h2, tras un h2 viene un h3, tras un h3 viene un h4. Puedes subir (un h2 después de un h3 empieza una sección nueva), pero no saltar hacia abajo. Un h1 seguido de un h4 confunde a cualquier parser.

Error típico: alguien quiere un encabezado pequeño visualmente, así que coge un h4 porque tiene el tamaño que quiere. Para. Usa el nivel correcto para la estructura y luego usa CSS para que se vea como quieras. Un h2 con 14px está bien. Un h4 usado como atajo de tamaño de fuente es estructura rota disfrazada de estilo.

Landmarks

Los landmarks son las regiones de la página. Los principales:

• <header>: la parte de arriba de la página o de un artículo.
• <nav>: un bloque de enlaces de navegación. La mayoría de páginas tiene uno en el header y a veces otro en el footer.
• <main>: el contenido principal de la página. Uno por página. Es la región a la que las personas con lectores de pantalla saltan con una sola tecla.
• <article>: un contenido autónomo. Un post de blog, un comentario, una tarjeta de producto.
• <aside>: contenido tangencial. Un sidebar, un widget de posts relacionados, una llamada de atención.
• <footer>: la parte de abajo de la página o de un artículo.

No necesitas todos los landmarks. Sí necesitas <main>, y no debería haber dos. Envuelve tu contenido real en él. Ese cambio solo, por sí mismo, hace tu página navegable para tecnología de asistencia mucho más que cualquier cantidad de ARIA.

Elementos de contenido

Un botón es un <button>. Un enlace es un <a> con href. Una lista es un <ul> o un <ol> con hijos <li>.

Suena trivial. No lo es, porque los frameworks y los design systems empujan a usar <div> para todo. Tres patrones que conviene corregir:

• Divs que deberían ser botones. Si al pulsarlo hace algo en la página actual, es un botón. Un <div onClick> no recibe foco con teclado, no se anuncia como botón a los lectores de pantalla y no responde a Enter ni a Espacio. Usa <button type="button"> y dale los estilos que quieras.
• Listas hechas de párrafos con estilos. Una fila de elementos es una lista. Envuélvelos en <ul> y deja que cada uno sea un <li>. Los lectores de pantalla anuncian “lista de 5 elementos” y permiten saltarla entera si la persona quiere.
• Enlaces que deberían ser botones, o botones que deberían ser enlaces. Si navega a una URL, es un enlace. Si dispara una acción en la página actual, es un botón. No uses uno por otro.

Errores habituales, en un solo sitio

Una lista corta de cosas que buscar en tu código:

• Más de un <h1> por página.
• Un <h1> que dice lo mismo en todas las páginas (normalmente el nombre del sitio).
• Encabezados fuera de orden: h1, h3, h2, h5.
• Un nivel de encabezado elegido por su tamaño de fuente por defecto y no por su significado estructural.
• Falta de <main>, o dos regiones <main>.
• Elementos <div> con manejadores de clic y sin soporte de teclado.
• Listas renderizadas como una pila de <p> con guiones tecleados a mano.
• <span> genéricos por todas partes, con la estructura real metida dentro de los nombres de clase.

Cada uno es pequeño. Juntos hacen una página que se ve bien y se interpreta mal.

Una auditoría rápida en cinco minutos

Abre la página en Chrome o Firefox. Abre DevTools. Busca el panel de Accesibilidad (en Chrome está dentro de Elements, en Accessibility tree, en el lado derecho).

Mira el árbol. Deberías ver los landmarks en el nivel superior: header, main, footer. Dentro de main deberías ver tus encabezados en orden, con el h1 del tema en primer lugar.

Si el árbol parece una lista plana de regiones genéricas, a tu página le falta estructura. Arregla primero los landmarks y luego los encabezados.

Otra opción: instala una extensión gratuita de outline como HeadingsMap. Dibuja el árbol de encabezados en un panel lateral, igual que lo haría una tabla de contenidos. Las páginas con jerarquía rota saltan a la vista.

Tercera opción, sin instalar nada: abre la página, mira el código fuente y lee los encabezados en voz alta como si le narrases la página a alguien por teléfono. Si el resultado tiene sentido como esquema hablado, la estructura está bien. Si no, ya sabes dónde corregir.

La idea práctica

Escribe la estructura como se la explicarías a alguien que no puede ver la página.

Empieza por: “Esta es una página sobre X”. Ese es tu h1. Después: “Tiene estas secciones”. Esos son tus h2. Dentro de cada sección, los subpuntos son h3. Alrededor del contenido principal, la navegación va en <nav>, el contenido central va en <main>, la identidad del sitio va en <header> y <footer>.

Cuando ese esquema se lea con sentido en voz alta, dale estilo visual con CSS. Haz el h2 pequeño si te apetece. Oculta un encabezado con una utilidad visualmente accesible solo para lectores de pantalla si es decorativo. La estructura sigue siendo correcta y el diseño vive donde le toca.

Si te interesa el lado de rendimiento del SEO, el artículo sobre Core Web Vitals lo cubre. Si trabajas con imágenes, mira WebP frente a PNG y JPG. Para estructura multilingüe, hreflang y canonical es el siguiente paso.

Si usas la app SEO Expert, su vista de outline muestra el árbol de encabezados de cualquier página. La misma idea que el accessibility tree de DevTools, enfocada al trabajo de SEO.

Preguntas frecuentes

¿Cuántas etiquetas h1 debe tener una página? Una. El h1 debería describir el tema de la página, no el sitio entero.

¿Puedo saltarme niveles de encabezado por diseño visual? No. Usa el nivel correcto para la estructura y luego usa CSS para fijar el tamaño y el peso que quieras.

¿Le sigue importando a Google la jerarquía de encabezados? Sí. Google ha dicho que analiza los encabezados para entender la estructura de la página. Tolera marcado imperfecto pero recompensa la estructura limpia.

¿Qué diferencia hay entre section y article? Un <article> es autónomo: tendría sentido aunque lo copiases a otro sitio. Un <section> es una agrupación temática dentro de un documento mayor. En caso de duda, usa <section>.

¿Necesito roles ARIA si uso las etiquetas HTML correctas? Normalmente no. Los elementos HTML nativos ya traen los roles correctos. ARIA sirve para tapar huecos cuando no puedes usar el elemento adecuado, no para sustituirlo.