Los encabezados y la estructura de una página

Módulo 3: La base técnica de una página · Tiempo de lectura: 11 minutos

Objetivo de aprendizaje: Al terminar esta lección, podrá estructurar una página con un encabezado principal claro y subtítulos lógicos, explicar qué hacen Google y los lectores de pantalla con los encabezados, y escribir buenos textos alternativos y nombres de archivo para sus imágenes.

Conceptos clave: encabezado (<h1> a <h6>), encabezado principal, subtítulo, saltarse un nivel, HTML semántico, lector de pantalla, texto con formato que no es un encabezado, texto alternativo (alt), alt="" vacío para elementos decorativos, nombre de archivo, texto dentro de imágenes

Los encabezados son el índice de su página

A nadie le gusta leer un texto largo sin subtítulos. En internet esto se nota aún más: los visitantes primero recorren la página con la vista y solo leen cuando ven que ahí está la respuesta. Los encabezados ayudan a ello. Pero un encabezado es algo más que letras grandes y en negrita. En HTML son elementos propios con un nivel:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

El <h1> es el encabezado principal: ¿de qué trata esta página? Los <h2> son los capítulos, los <h3> los apartados dentro de ellos, y así sucesivamente hasta <h6>. La sangría del ejemplo anterior es solo para mostrarlo; en el HTML real no tiene importancia. (El ejemplo es de la web neerlandesa de una floristería: «Ramos de novia a medida», con «Así trabajamos», «La primera toma de contacto», «El ramo de prueba», «Ejemplos» y «Preguntas frecuentes».)

Hay dos grupos que realmente leen esa estructura:

1. Las personas que usan un lector de pantalla. Un visitante ciego o con baja visión suele pedir primero al lector de pantalla que enumere todos los encabezados y luego salta a la parte que busca. Sin encabezados reales, la página es un único bloque de texto continuo.
2. Los buscadores. Google utiliza los encabezados para entender de qué tratan las distintas partes de una página.

Lo que dice Google sobre los encabezados

Circulan muchos mitos sobre los encabezados. Esto es lo que dice el propio Google:

• En la guía de introducción al SEO de Google se indica que el orden de los encabezados no importa para la Búsqueda de Google y que no existe un número mágico de encabezados que deba tener una página. Eso sí, los encabezados en un orden lógico son muy útiles para los lectores de pantalla.
• John Mueller, de Google, dijo en un vídeo (2019) que los sistemas de Google no tienen ningún problema con varios encabezados <h1> en una misma página. Google intenta trabajar con el HTML tal como está: un solo <h1>, varios, o solo texto con formato sin encabezados reales.
• En la documentación sobre los enlaces de título (lección 3.1), Google sí menciona una situación que puede salir mal: la falta de un título principal claro. Si arriba del todo hay varios encabezados grandes y llamativos y no está claro cuál es el título principal, a Google le puede costar elegir un buen enlace de título. Google recomienda distinguir claramente el encabezado principal, por ejemplo como el primer <h1> visible.

La conclusión de este curso: un único <h1> claro por página es una buena costumbre, no porque Google le vaya a penalizar si no lo hace, sino porque así la página deja claro a todo el mundo de qué trata. Lectores, lectores de pantalla y Google no pueden pasarlo por alto. Por eso, la comprobación del ejercicio A3.2 da verde con exactamente un <h1> no vacío, naranja con más de uno y rojo si no hay ninguno.

Errores frecuentes

Construir una página que responda

Un buen orden para casi cualquier página:

1. Encabezado principal (<h1>) que diga qué encontrará aquí el visitante. A menudo se parece al título de la lección 3.1, pero no tiene por qué ser idéntico. El título aparece en los resultados de búsqueda; el encabezado principal, en la propia página.
2. Una breve introducción que dé de inmediato la respuesta más importante.
3. Subtítulos (<h2>) para cada subtema, redactados como algo que busca el lector: «¿Cuánto cuesta un ramo de novia?» dice más que «Precios».
4. Cuando haga falta, <h3> debajo de un <h2>, nunca sueltos.

La lección 7.3 profundiza en la redacción en sí. Aquí nos centramos en el esqueleto.

Imágenes: texto alternativo y nombre de archivo

Un buscador no «ve» una foto como usted. Google utiliza visión artificial, pero extrae mucha información del texto que la rodea. La fuente más importante la menciona el propio Google: el texto alternativo (alt).

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

El texto alternativo (en este ejemplo neerlandés: «Ramo de novia con peonías blancas y eucalipto») tiene dos funciones:

• Accesibilidad: un lector de pantalla lo lee en voz alta a quien no puede ver la imagen. Si la imagen no carga, el navegador lo muestra en lugar de la foto.
• Comprensión: Google utiliza el texto alternativo, junto con la visión artificial, para entender qué aparece en la imagen. Esto ayuda sobre todo en Google Imágenes.

Así se escribe un buen texto alternativo:

• Describa lo que se ve y por qué está en esta página, en una frase corta.
• Use palabras clave solo si encajan de forma natural. Google advierte que los textos alternativos llenos de palabras clave ofrecen una mala experiencia y pueden considerarse spam.
• Una imagen que solo es decorativa (una línea, un patrón de fondo) lleva un alt vacío: alt="". Así, el lector de pantalla la omite. Que falte el atributo alt es otra cosa: en ese caso, a veces el lector de pantalla lee en voz alta el nombre del archivo.
• Si la imagen contiene texto importante (un horario, un precio, un folleto), ponga ese texto también en la página como texto normal. El texto dentro de una imagen es difícil de leer para un lector de pantalla y para un buscador.

El nombre de archivo también ayuda un poco. Google recomienda nombres cortos y descriptivos, y cita image1.jpg o pic.gif como ejemplos de lo que es mejor no hacer. bruidsboeket-pioenrozen-wit.jpg dice más que IMG_4032.jpg.

La velocidad y las dimensiones de las imágenes se tratan en la lección 4.3.

En la práctica: encabezados en los creadores de sitios web

• En el AI Builder de WebOké, el primer encabezado de una página se convierte automáticamente en el <h1> y todos los siguientes en <h2>. Así, cada página tiene exactamente un encabezado principal. En cada foto puede añadir una descripción, que se convierte en el texto alternativo. La comprobación SEO avisa cuando hay fotos sin descripción.
• En WordPress, en el editor de bloques elige el nivel (H1 a H6) en el bloque Encabezado. El tema suele convertir ya el propio título de la página en el <h1>; en el texto, use entonces H2 e inferiores. El texto alternativo se rellena en la imagen, en la biblioteca de medios o en el bloque.

Otros creadores de sitios web funcionan de forma parecida. Si tiene dudas, mire el código fuente (Ctrl+U) o busque <h1 con Ctrl+F.

Resumen

• Los encabezados (<h1> a <h6>) son el índice de su página, para lectores, lectores de pantalla y buscadores.
• Google no tiene problemas con varios <h1> ni con otro orden, pero sí recomienda un título principal claro. Un único <h1> claro es una buena costumbre.
• Elija el nivel según la estructura, no según el tamaño de letra; preferiblemente, no se salte niveles.
• Un buen texto alternativo describe brevemente lo que se ve; los elementos decorativos llevan alt=""; nada de acumular palabras clave.
• El texto importante debe estar en la página, no solo dentro de una imagen.

Cuestionario

Ejercicio

Ejercicio A3.2: Un solo encabezado principal y una estructura lógica. Introduzca la dirección de una página de su propio sitio. El programa descarga la página, cuenta los encabezados <h1> y muestra la estructura de encabezados como un índice. Verá si hay exactamente un encabezado principal no vacío, si se saltan niveles y cuántas imágenes no tienen atributo alt. Indique antes cuántos <h1> cree que hay. ¿No tiene sitio propio? Utilice www.rijksoverheid.nl.

Para seguir leyendo

• Google Search Central, guía de introducción al SEO (encabezados, texto alternativo): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, prácticas recomendadas para imágenes: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (encabezados accesibles): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, textos alternativos: https://www.w3.org/WAI/tutorials/images/