Encabezados de una pagina web: cómo crearlos y ejemplos
Los encabezados no solo organizan el contenido de una página web, sino que también juegan un papel clave en la experiencia del usuario y el SEO. En esta guía, te explicaré qué son los encabezados HTML, cómo usarlos correctamente, errores que (por favor) te pido evitar y herramientas para optimizarlos.
Qué es un encabezado HTML
Los encabezados son etiquetas HTML (de ahí el nombre de encabezados HTML) que nos permiten estructurar el contenido de una página web jerárquicamente. Se definen con las etiquetas <h1> a <h6>, donde <h1> representa el título principal y <h6> el de menor importancia (y que muchas veces no se usa).
Aplicar una buena estructura de encabezados nos permite:
- Mejora la legibilidad: facilitan la lectura y comprensión del contenido.
- Optimiza el SEO: ayuda a Google a entender la temática y relevancia de cada sección.
- Aumenta la accesibilidad: herramientas como los lectores de pantalla utilizan los encabezados para navegar por el contenido.
Jerarquía de encabezados en HTML
Cuando hablamos sobre los headers, es común escuchar el término "jerarquía de encabezados", lo cual no es más que la estructura lógica con la que organizamos nuestro contenido:
-
<h1>→ Título principal de la página o Header (debe ser único). -
<h2>→ Secciones principales dentro del contenido. -
<h3>→ Subapartados dentro de una sección<h2>. -
<h4>→ Subniveles dentro de un<h3>y así sucesivamente hasta<h6>.
Y así hasta el nivel <h6> aunque siendo realistas, rara vez llegamos al nivel 5 y 6.
Ejemplos de encabezados
Para comprender mejor este concepto de encabezado en una pagina web, vamos a ver un ejemplo claro sobre cómo podríamos estructura un artículo en el que explicamos una receta de fideuá.
<h1>Receta de fideuá</h1>
<h2>Ingredientes</h2>
<h3>Alternativas para alérgicos</h3>
<h2>Paso a paso</h2>
<h3>Paso 1</h3>
<h3>Paso 2</h3>
<h2>Otras recetas similares</h2>
<h3>Receta de paella</h3>
<h4>Receta de paella de marisco</h4>
<h4>Receta de paella de pollo</h4>
<h3>Receta de arroz caldero</h3>En este ejemplo, <h1> define el título principal ("Receta de fideuá"), mientras que <h2> organiza secciones clave como "Ingredientes" o "Paso a paso". Por su parte, los <h3> dividen estas secciones en subtítulos más específicos, como "Paso 1" y "Paso 2", y los <h4> detallan aún más, por ejemplo, tipos de paella dentro de "Receta de paella".
Qué es y para que sirve el header en HTML
El elemento <header> en HTML es una etiqueta semántica que se utiliza para definir la sección de encabezado de una página o de un bloque de contenido. Generalmente, dentro de un <header> se incluyen elementos como el logo, menú de navegación, títulos principales y llamados a la acción.
Comúnmente, se tiende a confundir el <header> y el <h1>, aunque no son lo mismo. El <header> es un contenedor que agrupa elementos como el logo, el menú de navegación y el <h1>. Puede contener varios elementos y se puede usar más de una vez en una página (por ejemplo, en diferentes secciones).
Lo vemos más claro con el ejemplo de abajo:
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Servicios</a>
</li>
</ul>
</nav>
</header>
Para que sirve la etiqueta header en HTML
- Estructura y organización: ayuda a separar el encabezado del resto del contenido.
- Mejora la accesibilidad: facilita la navegación a usuarios y motores de búsqueda.
- SEO y usabilidad: permite destacar elementos clave como títulos y enlaces relevantes.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Cómo poner un encabezado en HTML
Muy bien, hasta aquí la teoría está perfecta pero la pregunta que sigue es ¿cómo pongo yo un encabezado en mi página web?
Y aquí la clave está en saber si estás usando WordPress o no. Si no usas Wordpress, puedes ponerlo haciendo uso del etiquetado HTML. Para ello, aquí abajo te muestro todos los ejemplos, correspondientes a los 6 tags.
<h1>Título principal de la página</h1>
<h2>Sección importante</h2>
<h3>Subsección dentro de la sección</h3>
<h4>Detalle dentro de la subsección</h4>
<h5>Información menos relevante</h5>
<h6>Texto de menor importancia</h6>En el caso de usar un CMS como Wordpress ya tienes la opción de crear los encabezados sin tocar una sola línea de código. Para ello, en un bloque de Gutenberg haz clic en el botón de más o simplemente escribe la barra del 7. Tras ello, selecciona el bloque llamado "Encabezado", tal y como ves abajo:
Por defecto se creará un encabezado H2 pero puedes modificarlo si haces clic en él y cambias el nivel que aparece por defecto
Cómo poner un titulo en HTML
En HTML, el título principal de una página se define con la etiqueta <title> dentro del <head>. Es decir, este título es el que aparece en la pestaña del navegador y en los resultados de búsqueda de Google y no tiene nada que ver con la etiqueta HTML H1.
De nuevo, no hace falta ponerte a programar nada ya que existen plugins en Wordpress, como Rankmath, que te permiten colocar dicha metaetiqueta.
Errores comunes al utilizar encabezados
Como ya te he comentado, usar mal los encabezados HTML afecta tanto a la experiencia del usuario como al SEO de una página. Para evitar que esto ocurra, aquí te dejo los errores más comunes para que los evites y optimices correctamente tu contenido.
- Usar más de un
<h1>en la misma página: cada página debe tener un único<h1>que represente el tema principal. Usar varios puede confundir a los motores de búsqueda. - Saltar niveles de encabezado: pasar de un
<h2>a un<h4>sin un<h3>intermedio rompe la jerarquía lógica y dificulta la lectura. - Usar encabezados solo para cambiar el tamaño del texto: los encabezados deben estructurar el contenido, no ser utilizados solo por estética. Para cambiar el tamaño, usa CSS en su lugar.
- No incluir palabras clave en los encabezados: los motores de búsqueda analizan los encabezados para entender el contenido. Usarlos sin optimización es una oportunidad perdida.
- Hacer encabezados demasiado largos o poco descriptivos: un
<h2>como «Introducción al tema que vamos a ver hoy» es poco claro. Mejor: «Introducción a las mejores prácticas de SEO». - No utilizar encabezados en absoluto: un bloque de texto sin encabezados es difícil de leer y afecta tanto la experiencia del usuario como el SEO.
Mejores prácticas para el uso de encabezados
Ya para terminar, vamos a ver un par de consejos finales para asegurar que ya sabes cómo hacer un encabezado correcto en tu web:
- Mantén una jerarquía lógica: usa
<h2>para secciones principales,<h3>para subtemas dentro de ellas y así sucesivamente hasta<h6>. - Piensa en encabezados como llamadas a la acción: no te limites a poner títulos aburridos como «Beneficios del SEO». En su lugar, intenta que sean más atractivos y útiles.
- Aprovecha los encabezados para responder preguntas directas: estructura tus encabezados con preguntas que la gente realmente hace en Google. Para ello, te puedes apoyar en el módulo de People Also Asked.
- Usa
<h2>estratégicos para destacar keywords secundarias: si tu palabra clave principal es «recetas de pasta», tus<h2>pueden incluir variantes como «Cómo hacer pasta casera en 15 minutos» o «Recetas de pasta italiana fáciles y rápidas». - Incluye palabras clave de forma natural. los encabezados son importantes para el SEO, pero deben usarse sin caer en el «keyword stuffing» o sobreoptimización.
- Añade números en los encabezados para mejorar la retención: piensa que los usuarios escanean los textos en busca de datos concretos, y los números captan la atención.
- No uses encabezados solo para estilizar el texto. usa encabezados para estructurar el contenido, no solo para cambiar el tamaño o el peso del texto.
Como ves, en algunos casos vengo a decir lo que ya criticaba en la sección de errores pero es que es clave integrar estos conceptos en nuestra manera de trabajar.
Herramientas para analizar y optimizar encabezados
Herramientas para auditar que la estructura de encabezados es correcta hay para aburrir, así que lo que voy a hacer aquí es comentarte las 2 que más me gustan.
De entrada, Screaming Frog es clave, ya que este crawler nos permite ver en modo columna todos los encabezados de nuestra, tanto de manera directa (para h1 y h2) como para el resto a través de un custom extraction.
Por otro lado, en lo que a extensiones seo para Google Chrome se refiere, SEO Meta in 1 Click me parece lo mejor y más cómodo, pues nos lo muestra a vista de clic.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!