Comprobador de estructura de encabezados
Pega el código HTML de cualquier página para ver sus encabezados como un esquema H1-H6 con sangría. El comprobador señala un H1 ausente o repetido, niveles de encabezado saltados y encabezados vacíos o demasiado largos, para que corrijas rápidamente problemas de SEO y accesibilidad.
Última actualización:
Cómo usar Comprobador de estructura de encabezados
- Abre la página en tu navegador y mira su código fuente (Ctrl+U o Cmd+Option+U).
- Copia todo el HTML y pégalo en el cuadro, o abre un archivo .html guardado.
- Haz clic en Comprobar encabezados; los resultados también se actualizan mientras escribes.
- Lee la lista de problemas y las líneas señaladas en el esquema.
- Corrige los encabezados en tu plantilla y vuelve a pegar el HTML para confirmarlo.
Reglas de encabezados que comprueba
| Comprobación | Gravedad | Por qué importa |
|---|---|---|
| No hay H1 en la página | Error | El tema principal no tiene encabezado para los usuarios, las tecnologías de apoyo ni los buscadores. |
| Encabezado vacío | Error | Los lectores de pantalla lo anuncian como un encabezado en blanco; suele ser un resto de una plantilla. |
| Más de un H1 | Advertencia | HTML válido, pero no deja claro qué encabezado es el título de la página. |
| Nivel saltado (p. ej. H2 → H4) | Advertencia | Implica que falta una sección y rompe el esquema lógico. |
| El primer encabezado no es el H1 | Advertencia | Los encabezados de la cabecera del sitio o del menú aparecen antes del título de la página. |
| Encabezado de más de 120 caracteres | Advertencia | Los encabezados largos son difíciles de leer de un vistazo; pasa el detalle a un párrafo. |
| Texto de encabezado duplicado, encabezados ocultos | Nota | Vale la pena revisarlo: las etiquetas repetidas y los encabezados ocultos se pasan por alto fácilmente. |
Ejemplo de un esquema limpio
| Nivel | Encabezado |
|---|---|
| H1 | Guía para principiantes sobre plantas de interior |
| H2 | Elegir la planta adecuada |
| H3 | Plantas para poca luz |
| H3 | Plantas para ventanas soleadas |
| H2 | Nociones básicas de riego |
| H3 | Con qué frecuencia regar |
Consejos para corregir problemas de encabezados
- Convierte los encabezados decorativos de barras laterales y pies de página (como "Síguenos") en párrafos con estilo o dales el nivel correcto dentro de una sección.
- Si un tema envuelve el logotipo del sitio en un H1 en todas las páginas, cámbialo por un div y reserva el H1 para el título de la página.
- Usa el esquema como prueba de índice: si se lee como un resumen sensato de la página, la estructura es buena.
Preguntas frecuentes
¿Qué es una buena estructura de encabezados?
Una página debe tener un H1 que describa su tema principal, H2 para las secciones principales, H3 para las subsecciones dentro de un H2, y así sucesivamente. Los niveles deben bajar de uno en uno, de modo que un H4 siempre esté bajo un H3. Volver a subir cualquier número de niveles, por ejemplo de H4 a H2, está bien.
¿Es malo tener más de un H1?
El estándar HTML permite varios H1 y Google ha dicho que tener varios H1 no es un problema para el posicionamiento. Aun así, un H1 claro deja evidente el tema de la página para los usuarios, los lectores de pantalla y los buscadores, por lo que es la buena práctica habitual. El comprobador informa de los H1 adicionales como advertencia, no como error.
¿Por qué son un problema los niveles de encabezado saltados?
Los usuarios de lectores de pantalla suelen saltar entre encabezados o listarlos para entender una página. Un salto de H2 a H4 sugiere que falta una sección y hace confusa la estructura. La técnica G141 de las WCAG recomienda anidar los encabezados en orden para transmitir la estructura de la página.
¿Se deben elegir los encabezados por su tamaño?
No. Elige el nivel del encabezado según su lugar en la estructura del documento y usa CSS para definir el tamaño. Un subtítulo de aspecto pequeño puede seguir siendo un H2, y una línea promocional grande que no sea el título de una sección debe ser un párrafo.
¿Por qué el comprobador cuenta los encabezados de mi navegación y pie de página?
Forman parte del esquema de la página, así que los lectores de pantalla también los anuncian. Si solo quieres revisar el artículo en sí, marca la opción para comprobar solo dentro del elemento main.
¿Puedo comprobar una URL en vivo?
Por motivos de seguridad, los navegadores no pueden leer directamente el HTML de otros sitios web, así que pega el código fuente de la página. Usa Ver código fuente en tu navegador para copiar el HTML original. Si los encabezados se añaden con JavaScript, copia el HTML renderizado desde el panel Elements de las herramientas de desarrollo.
¿Se envía mi HTML a algún sitio?
No. El HTML se analiza en tu navegador con el analizador DOM integrado, sus scripts nunca se ejecutan y no se sube nada.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.