Estructura de encabezados

Un encabezado no es un texto grande. Es una etiqueta semántica que declara dos cosas a la vez: aquí empieza una sección, y esta sección cuelga de aquella otra. El rango lo fija el número del elemento, de h1 a h6, y ese número es la única parte que las máquinas leen.

De ahí sale la confusión más común. El tamaño visual y el rango semántico son independientes: una hoja de estilos puede hacer que un h4 se vea enorme y que un h2 se vea discreto. Elegir el elemento por su aspecto en pantalla destruye la estructura sin que nada avise.

Conviene delimitar el concepto frente a tres vecinos. El title es el título del documento y vive en la cabecera, fuera del contenido. El sumario o índice es una navegación construida a partir de los encabezados, no un sustituto. Y el subtítulo, el claim o la línea de apoyo no son encabezados: el estándar prevé agruparlos con el titular dentro de hgroup, en forma de párrafo.

La estructura, en sentido estricto, es la lista de todos los encabezados del documento en el orden en que aparecen, con su rango. Esa lista es la que recorre quien navega con lector de pantalla.

Aquí conviene separar tres fuentes de autoridad que dicen cosas distintas.

El estándar HTML. Fija dos reglas comprobables. Si un documento tiene encabezados, al menos uno debería ser de nivel 1. Y cada encabezado que sigue a otro debe tener un rango menor, igual o como mucho uno mayor que el anterior, lo que prohíbe pasar de h1 a h3. El estándar también permite varios encabezados de primer nivel en un mismo documento y lo ilustra con un ejemplo.

Las pautas de accesibilidad. El criterio de información y relaciones, de nivel A, exige que la estructura transmitida visualmente se pueda determinar por programa, y la técnica prevista para los encabezados es usar los elementos h1 a h6 de verdad. El criterio de encabezados y etiquetas, de nivel AA, exige que describan el tema o el propósito. Ninguno de los dos impone una jerarquía concreta ni un número de h1.

Google. Su guía es explícita y va en contra del consejo habitual: tener los encabezados en orden semántico es excelente para los lectores de pantalla, pero desde el punto de vista de la Búsqueda da igual que estén desordenados. Añade que no existe una cantidad ideal de encabezados, con una regla práctica: si a ti te parecen demasiados, probablemente lo sean.

<h1>Zapatillas de trail Kora Ridge</h1>
  <h2>Características</h2>
    <h3>Suela y agarre</h3>
    <h3>Amortiguación</h3>
  <h2>Tallas y equivalencias</h2>
  <h2>Opiniones de clientes</h2>

Lo que circula fuera de esas tres fuentes es costumbre. Que un h1 por página sea obligatorio, que la palabra clave deba ir en el h1, que el h1 tenga que coincidir con el title o que un salto de nivel penalice: ninguna de esas afirmaciones aparece en la documentación de Google ni en las pautas de accesibilidad. Son prácticas defendibles, sin respaldo publicado.

La primera decisión que depende de esto es presupuestaria. Si alguien vende una auditoría cuyo entregable principal es reordenar niveles de encabezado para ganar posiciones, está vendiendo algo que Google desmiente por escrito. Ese esfuerzo tiene sentido por otra razón, y conviene decirlo con el motivo correcto.

Ese motivo es la accesibilidad, y ahí el efecto está medido. En la encuesta de referencia entre personas que usan lector de pantalla (1.539 respuestas, recogidas en diciembre de 2023 y enero de 2024), el 71,6 % declaró que para localizar información en una página larga lo primero que hace es recorrer los encabezados, y el 88,8 % considera los niveles útiles. Una página cuyos encabezados son bloques de diseño convierte esa navegación en ruido.

La segunda decisión es editorial. Una estructura correcta obliga a responder qué secciones tiene realmente el texto, y suele destapar que dos apartados dicen lo mismo o que falta el que responde a la pregunta del usuario.

La tercera es de riesgo. Los criterios de accesibilidad que sí afectan a los encabezados son de nivel A y AA, es decir, el listón que suelen exigir los pliegos públicos y las revisiones de conformidad. Ahí la estructura no es estética: es un requisito con nombre.

• Usa un encabezado solo cuando abra una sección real. Si un bloque destacado no inicia contenido propio, dale estilo con p o span y deja el rango libre.
• No saltes rangos hacia abajo: después de un h2 vienen h2, h3 o un rango superior, nunca un h4.
• Asegura al menos un encabezado de nivel 1 que describa el contenido de esa página concreta, no la marca ni la categoría.
• Redacta encabezados que se entiendan fuera de contexto, porque así es como los oye quien salta de uno a otro sin leer lo que hay en medio.
• Separa tamaño y rango con CSS. El diseño elige cómo se ve; el rango, dónde encaja.
• Agrupa el titular con su subtítulo o su claim dentro de hgroup, en lugar de convertir la línea de apoyo en un encabezado fantasma.

• Elegir el elemento por su tamaño en pantalla, con h3 usados como texto destacado y h2 como pie de foto.
• Marcar el eslogan del banner o el nombre del menú como h1, de forma que la página se queda sin un encabezado de primer nivel que la describa.
• Convertir elementos de interfaz repetidos, como «Envío gratis» o el precio de cada tarjeta, en encabezados: la lista que recorre el lector de pantalla se llena de entradas inútiles.
• Saltar de h1 a h4 porque la plantilla del CMS solo ofrece esos dos estilos.
• Rehacer toda la jerarquía esperando un efecto en el ranking, y presentar después cualquier variación de tráfico como prueba de que funcionó.