Estructura de encabezados SEO

Cómo funciona esta comprobación

Scanaris cuenta las etiquetas <h1> del HTML de tu página. El resultado correcto es exactamente una. Si no hay ninguna, abre un hallazgo de severidad media: ni Google ni un lector de pantalla saben cuál es el tema principal. Si hay dos o más, abre uno de severidad baja con el recuento: varios titulares principales diluyen de qué va la página. Solo se mira el HTML servido, sin ejecutar JavaScript, y solo la página escaneada.

Por qué importa

El <h1> es el titular de la página, lo primero que un lector de pantalla anuncia y una de las señales más claras que tiene Google para entender el tema. Una página sin h1 es como un artículo sin título: el buscador tiene que deducirlo del resto. Varios h1 no son un error de HTML, pero reparten esa señal: si tu página de producto tiene el nombre del producto, el eslogan y "Opiniones" todos como h1, ninguno de los tres es el tema. Y es la base del resto de la jerarquía: los h2 dividen el contenido en secciones, los h3 subdividen, y así es como navega quien usa teclado o lector de pantalla y como los asistentes de IA trocean tu texto para citarlo.

Por qué pasa

El caso más común de cero h1 es el diseño: el texto grande del hero es un div con clases de tamaño, o un p, porque quien lo maquetó pensó en el aspecto y no en la estructura. En aplicaciones de una sola página, el h1 lo pinta JavaScript y no está en el HTML inicial. El caso de varios h1 suele venir de componentes: cada tarjeta, cada sección o cada widget trae su propio h1, o el logotipo está envuelto en uno "para el SEO", que es un consejo de 2008.

Cómo arreglarlo

• Un h1 por página con el tema principal, visible y cerca del principio del contenido. En la home, lo que haces; en un artículo, su título; en un producto, su nombre.
• El logotipo no es un h1. Es un enlace a la home con el nombre de la marca como texto o como alt.
• El resto en h2 y h3, sin saltarse niveles: un h3 va dentro de una sección con h2. Si una etiqueta solo te interesa por el tamaño, usa una clase de CSS, no un nivel de encabezado.
• En componentes, acepta el nivel como prop (<Heading :level="2">) en lugar de fijarlo dentro, para que la misma tarjeta sea h2 en una página y h3 en otra.
• En SPA, renderiza en servidor al menos la estructura de la página o usa prerenderizado; si no, Google ve una página vacía antes de ejecutar tu JavaScript.

Comprueba que está arreglado

curl -s https://tudominio.com | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Debe salir una sola línea que empiece por h1:, seguida de la jerarquía de h2 y h3 en orden lógico. Si no sale nada, el contenido lo pinta JavaScript y Google tampoco lo ve de primeras.

Preguntas frecuentes

HTML5 permite un h1 por sección. ¿Por qué se marca?

La especificación lo permitía con el algoritmo de "outline" por secciones, pero ningún navegador ni lector de pantalla lo implementó nunca, y la especificación lo retiró en 2022. En la práctica, un h1 por página sigue siendo la recomendación de Google y de las guías de accesibilidad.

Mi h1 está oculto con CSS para que el diseño quede limpio.

Un h1 oculto con display: none no lo leen ni Google ni los lectores de pantalla. Si necesitas que no se vea pero sí se lea, usa una clase de texto visualmente oculto (sr-only); pero piensa si de verdad el titular principal de la página debería estar escondido.

¿Se revisan los demás niveles?

Esta comprobación cuenta solo los h1. Los encabezados vacíos los detecta accesibilidad, y el título de la pestaña, que no es lo mismo que el h1 aunque suelen parecerse, lo revisa metadatos SEO.