Analizador de encabezados
El esquema de H1 a H6
Este analizador de encabezados dibuja el esquema de cualquier página: cada encabezado en orden, sangrado por nivel, con los niveles saltados y los encabezados vacíos marcados. Pega una dirección o pega directamente el marcado.
- GratisPrecio
- 2Modos
- NingunoRegistro
- NadaGuardado
Analizador de encabezados
El esquema de H1 a H6 de una página, y dónde se rompe
- Encabezados
- 0
- Etiquetas H1
- 0
- Niveles saltados
- 0
- Encabezados vacíos
- 0
- Nivel más profundo
- —
Listo. Pega una dirección, o cambia al modo marcado y pega la propia página.
Para qué sirve un esquema de encabezados
Un encabezado es estructura, no letra gorda. Son el índice que una página construye para sí misma y, de hecho, dos grupos leen ese índice en lugar de la página.
Los usuarios de lectores de pantalla saltan entre encabezados para llegar a la parte que quieren. Del mismo modo, los rastreadores leen esa estructura para saber qué cubre una página larga.
Por eso un esquema sin H1, o uno que salta de H2 a H4, se lee como un índice al que le faltan capítulos.
La Iniciativa de Accesibilidad Web del W3C lo explica igual en su guía sobre la estructura de la página: los encabezados describen secciones, y los niveles describen cómo se anidan esas secciones.
Un solo H1, y por qué
El H1 dice de qué trata toda la página. Uno solo, arriba, que coincida con el tema de la página.
Técnicamente HTML5 permite varios, porque las secciones iban a crear sus propios esquemas. Sin embargo, los navegadores nunca implementaron ese esquema, así que en la práctica un solo H1 sigue siendo la regla.
Por lo tanto, un comprobador de H1 es la auditoría de página más rápida que existe. Tanto la falta de H1 como tres etiquetas H1 apuntan a un problema de plantilla, no de redacción.
Por qué importa saltarse un nivel
Un salto de H2 a H4 le dice a la tecnología de asistencia que una subsección está dentro de algo que nadie abrió nunca.
El arreglo casi siempre es visual. Alguien quería texto más pequeño y usó un nivel inferior, pero la referencia de los elementos de encabezado deja claro que el tamaño pertenece al CSS.
Da al H3 el estilo que quieras. Así el esquema sigue siendo honesto y la página se sigue viendo bien.
Encabezados vacíos
Un encabezado que envuelve una imagen, un icono o nada en absoluto. Un lector de pantalla anuncia "encabezado, en blanco", lo cual es peor que no tener encabezado, y por eso este analizador marca cada uno.
Dos formas de leer una página
El modo dirección descarga una página en vivo desde este servidor, porque tu navegador no puede leer otro sitio en tu nombre.
El modo marcado lee lo que pegas, entero en tu pestaña. Así cubre un sitio de pruebas tras una contraseña, una página aún en el editor o un fragmento de plantilla.
La línea de estado indica qué modo está activo. Además, en el modo marcado nada sale de la pestaña, y el pie lo indica.
Cómo usa la gente un esquema en realidad
Un lector de pantalla puede listar todos los encabezados de una página y saltar directamente a uno. Esa lista es el esquema que dibuja esta herramienta, en el mismo orden.
Los lectores que ven hacen algo parecido con la vista. Recorren la página buscando un encabezado que coincida con lo que los trajo y, luego, leen desde ese punto.
Ambos comportamientos premian lo mismo: encabezados que describen su sección y están en el nivel correcto. En cambio, ninguno premia una palabra clave metida a la fuerza en un H2.
Así que escribe primero el esquema y luego rellénalo. Una página que se lee bien como lista de encabezados suele leerse bien como prosa.
Encabezados y páginas largas
Una página larga vive o muere por su esquema. A partir de unas mil palabras nadie lee de arriba abajo y, por eso, los encabezados se convierten en la navegación.
Además, Google extrae enlaces de sección de una estructura clara en algunos resultados, lo que da a una página larga más de un punto de entrada.
Por lo tanto, una página con quince secciones necesita quince encabezados honestos, no cinco encabezados y diez líneas en negrita.
Cómo leer el árbol que dibuja esta herramienta
El árbol sangra cada encabezado bajo el anterior, así que un salto de H2 a H4 aparece como un hueco que se ve, en lugar de un aviso que hay que leer.
El rojo en negrita marca el segundo H1, si la página lo tiene. Ese es el fallo que conviene arreglar primero.
Los encabezados vacíos aparecen como un guion. De hecho, un encabezado con solo un icono dentro no le dice nada a un lector de pantalla.
Además, el recuento de arriba dice cuántos de cada nivel usa la página. Nueve encabezados H3 bajo un H2 suelen indicar que la sección pedía dividirse.
Los encabezados no son un truco de posicionamiento
Meter palabras clave en un H2 dejó de funcionar hace mucho. Una estructura de encabezados clara ayuda a un rastreador a entender una página larga y, sobre todo, ayuda mucho más a un lector, que es la mejor razón.
En esta página
- La herramienta
- Para qué sirve un esquema de encabezados
- El analizador de encabezados, paso a paso
- Lo que distingue a este analizador de encabezados
- Reglas para una estructura de encabezados limpia
- Seis errores de encabezados en sitios reales
- Preguntas frecuentes sobre encabezados
- Herramientas para el resto de la página
Sigue leyendo
El analizador de encabezados, paso a paso
Tres pasos, y el esquema aparece como una lista que puedes leer de arriba abajo.
- 1
Elige un modo
Una dirección en vivo o un marcado que pegas. El modo marcado no envía nada a ninguna parte, por eso encaja con una página aún sin publicar.
- 2
Ejecútalo
El esquema se rellena, sangrado por nivel, con el nombre de la etiqueta en cada fila. Además, las filas ámbar son niveles saltados y las rojas son encabezados vacíos.
- 3
Lee los hallazgos
Bajo el esquema aparecen los fallos en palabras claras: sin H1, varias etiquetas H1, niveles saltados, encabezados vacíos y todo lo que sea inusualmente largo.
- 4
Arregla los niveles, no los tamaños
Casi todos los niveles saltados son una decisión de tamaño de fuente. Por lo tanto, cambia el CSS y deja el encabezado en el nivel que su posición merece.
Lo que distingue a este analizador de encabezados
La mayoría imprime una lista plana de encabezados. En cambio, aquí las diferencias son la sangría, los fallos y el segundo modo.
Un esquema sangrado
Cada fila está en su propio nivel, así que un salto de H2 a H4 se ve en lugar de tener que contarlo.
Modo marcado
Pega un fragmento de tu editor. No se descarga nada ni se envía nada, lo que importa para el trabajo sin publicar.
Fallos nombrados con palabras
Saltado, vacío, ausente. Cada hallazgo dice qué hacer en lugar de puntuar la página sobre cien.
Bloques de script ignorados
Los encabezados dentro de script, style, template o comentarios no son reales, así que ninguno entra en el recuento.
Sin analizador DOM, a propósito
Este sitio bloquea el análisis DOM de marcado no fiable, así que el escaneo encuentra las etiquetas por su forma. Por eso la página de un desconocido nunca puede entrar en este documento.
Un esquema copiable
Una pulsación te da toda la estructura como texto sangrado, lista para un ticket, una revisión o un documento.
Reglas para una estructura de encabezados limpia
Los encabezados son baratos de hacer bien y molestos de arreglar después. Estas ocho reglas cubren casi todos los casos.
- Un H1, cerca de arriba. Nombra la página. Si dos cosas de una página merecen un H1, probablemente tienes dos páginas.
- Nunca saltes un nivel al bajar. H2 sigue a H1, y H3 sigue a H2. Volver a subir está bien, ya que un nuevo H2 simplemente abre la siguiente sección.
- El tamaño de letra se decide en el CSS. Decide el nivel según su lugar en la estructura y después ajusta el aspecto con CSS. Un encabezado elegido por su tamaño de fuente rompe la estructura para todos los que no pueden verla.
- Escribe encabezados que funcionen solos. Alguien que ojee la lista de tus encabezados debería entender la página. Un simple "Resumen" no aporta ninguna pista.
- Mantenlos cortos. Menos de unas diez palabras. La gente ojea los encabezados en lugar de leerlos, así que un encabezado del largo de una frase anula su propósito.
- No envuelvas una imagen en un encabezado. Un lector de pantalla anuncia un encabezado vacío. Pon el texto en el encabezado y el logotipo a su lado.
- Revisa la plantilla, no una página. Un fallo de encabezado en una plantilla se repite en todas las páginas construidas con ella, así que una comprobación cubre cientos.
- Revisa de nuevo tras un rediseño. Los temas nuevos cambian los niveles de encabezado para ajustarlos a su escala tipográfica, y ahí suele aparecer un hueco en el esquema.
Seis errores de encabezados en sitios reales
Ni el title ni las meta aparecen en la página visible. Los seis se ven en un esquema.
El logotipo como H1
Habitual en temas antiguos. Entonces cada página dice tratar del nombre de la empresa, y ninguna dice lo que realmente cubre.
Un H4 elegido por su tamaño
El diseñador quería texto más pequeño. Ahora el esquema tiene un hueco, y la tecnología de asistencia anuncia una subsección sin padre.
Varias etiquetas H1 de widgets
Una barra lateral, un pie y un hero añaden uno cada uno. La página acaba diciendo tratar de tres temas.
Encabezados usados para destacar
Una línea en negrita en mitad de un párrafo marcada como H3. Aparece en el esquema como una sección que no existe.
Encabezados vacíos alrededor de iconos
Una forma decorativa dentro de etiquetas de encabezado se anuncia como un encabezado en blanco, lo que es ruido para quien escucha.
Ningún H1 en una landing page
Los maquetadores visuales lo pierden más que cualquier otra cosa, y la página pierde el único encabezado que nombra su tema.
Preguntas frecuentes sobre encabezados
¿Con cuántos H1 se queda bien una página?
Una. En teoría HTML5 permite más, aunque ningún navegador implementó nunca el esquema del que dependía esa idea, así que un comprobador de H1 sigue tratando una segunda como hallazgo.
¿Saltarse un nivel de encabezado perjudica al SEO?
Por sí mismo, apenas nada. Sin embargo, perjudica claramente la accesibilidad, ya que los usuarios de lectores de pantalla navegan por encabezados, y eso basta para justificar el arreglo.
¿Puedo comprobar una página que aún no está publicada?
Sí. Cambia al modo marcado y pega el HTML. En ese modo nada sale de tu pestaña, así que el trabajo sin publicar se queda en tu equipo.
¿Por qué el recuento no coincide con mi editor?
Este analizador de encabezados ignora los encabezados dentro de bloques script, style, template y comentarios. De hecho, no son encabezados reales, por mucho que lo parezcan.
¿Tiene peso la jerarquía de los encabezados?
Muchísimo. El esquema se lee de arriba abajo, así que un encabezado de sección que aparece después del contenido que presenta confunde tanto al lector como al rastreador.
¿Y un H1 en la cabecera del sitio?
Cuenta y, en la mayoría de los temas, es el logotipo. Por eso todas las páginas tienen el mismo H1, que es el hallazgo más común que muestra esta herramienta.
¿Deben los encabezados contener palabras clave?
De forma natural, sí. A propósito, no. Al fin y al cabo, un encabezado que describe su sección contendrá las palabras que la gente busca sin ninguna ayuda.
¿Y los encabezados dentro de un nav o un footer?
Cuentan, porque están en el documento. Además, conviene saber si hay un H2 repetido en un pie de página, ya que aparece en todas las páginas.
¿Cuánto debe medir un encabezado?
Menos de unas diez palabras. El analizador anota todo lo que pase de setenta caracteres, que es más o menos donde un encabezado deja de poder ojearse.
¿Sigue las redirecciones?
Hasta cinco, y cada salto vuelve a pasar todas las comprobaciones antes de la siguiente solicitud. Por lo tanto, el esquema que obtienes es el de la página donde termina la cadena.
¿Cuentan los encabezados de una barra lateral?
Sí, porque están en el documento. Un H2 de barra lateral que se repite en todas las páginas merece atención y, además, el esquema muestra exactamente dónde cae.
¿Puedo exportar el esquema?
Pulsa el botón de copiar y obtienes toda la estructura como texto sangrado, con el nivel en cada línea. Así se pega limpiamente en un ticket o un documento de revisión.
¿Se guarda la dirección que compruebo?
No. Atiende una solicitud y se va y, además, este servidor no guarda ninguna copia de la página.
Herramientas para el resto de la página
El esquema es una capa de la revisión on-page. Estas tres cubren las demás.
Analizador de metaetiquetas
El bloque head de la misma dirección, con lo que falta señalado.
Abrir herramienta →Comprobador de legibilidad
Cinco fórmulas sobre la redacción bajo esos encabezados.
Abrir herramienta →Eliminador de etiquetas HTML
Saca el texto plano de una página y conserva los saltos.
Abrir herramienta →
¿Listo para ver tu esquema?
Pega una dirección o tu marcado y lee el esquema de arriba abajo. El analizador de encabezados es gratis, no necesita cuenta y no guarda ningún registro de la página.