Etiquetas H en SEO

Los seis niveles

HTML tiene seis niveles de encabezado. El navegador dibuja cada uno un poco más pequeño que el anterior, pero el nivel habla de importancia, no de tamaño.

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Jerarquía: como los capítulos de un libro

Los encabezados se anidan. Un H2 vive dentro de un H1, un H3 dentro de un H2, y así. Este es el esquema clásico:

<h1>Medios de transporte</h1>
  <h2>Vehículos</h2>
    <h3>Manuales</h3>
    <h3>Automáticos</h3>
      <h4>Nissan</h4>

Mantén la lógica: no hables de perros en tu H1 y de gatos en el H2. Habla de perros en el H1 y, por ejemplo, de una raza en el H2.

Un ejemplo real

Así funciona en mi artículo ¿Qué es la metatitle y para qué sirve?: el H1 lleva el tema principal y el H2 abre un subtema.

<h1>¿Qué es la metatitle y para qué sirve?</h1>
<p>...</p>
<h2>¿Cómo modificamos la metatitle de una URL?</h2>
<p>...</p>

El H1 contiene las palabras clave en las que quiero posicionarme. Le dice a Google: «este es el tema principal de mi artículo».

Primero el significado, luego el tamaño

Elige la etiqueta por su significado y cambia el aspecto con CSS. Nunca uses un <h4> porque te gusta su tamaño.

<h4 style="font-size:2rem">Guía del café</h4>
<h1 style="font-size:1rem">Todo lo que necesitas</h1>

<h1 class="big">Guía del café</h1>
<h2 class="small">Todo lo que necesitas</h2>

Encabezados dentro de las secciones

Los encabezados trabajan junto a contenedores semánticos como <main>, <article> y <section>: cada sección lleva su propio encabezado.

<main>
  <h1>Guía del café</h1>
  <p>Introducción...</p>
  <section>
    <h2>Orígenes</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Preparación</h2>
    <p>...</p>
  </section>
</main>

Accesibilidad: lo que oye un lector de pantalla

Quienes usan lector de pantalla suelen saltar de encabezado en encabezado para recorrer la página. Unos buenos encabezados son su tabla de contenidos. La Iniciativa de Accesibilidad Web del W3C recomienda encabezados que reflejen la estructura de la página.

<h1>Guía del café</h1>
<h2>Orígenes</h2>
<h2>Preparación</h2>
<h3>Espresso</h3>

Errores comunes

Tres errores que veo todo el tiempo, cada uno con su solución.

1. Saltarse niveles

<h1>Guía del café</h1>
<h4>Ingredientes</h4>
<h2>Pasos</h2>

<h1>Guía del café</h1>
<h2>Ingredientes</h2>
<h2>Pasos</h2>

2. Falsos encabezados hechos con estilos

<p style="font-size:2rem;font-weight:bold">Guía del café</p>

<h1>Guía del café</h1>

3. Encabezados para lo que no es un título

<h2>Menu</h2>
<h2>Login</h2>
<h2></h2>

<nav aria-label="Menu">
  <a href="/">Home</a>
</nav>
<h2>Ingredientes</h2>

Pruébalo tú mismo

Edita el código, carga un ejemplo y mira cómo cambian el esquema y el chequeo.

¿Para qué sirven las etiquetas H en SEO?

Las etiquetas H nos permiten priorizar ciertas palabras clave sobre otras para el Googlebot y le dan más contexto sobre la página. Cuanto mejor entienda Google nuestro contenido, de más formas lo mostrará: aparecemos para consultas relacionadas con la palabra clave principal y con las de los H2 y H3. Para elegirlas bien, apóyate en un keyword research.

El H1 no es la metatitle

Son dos cosas distintas. La metatitle es lo que aparece en los resultados de búsqueda; el H1 es el titular dentro de la página. Deben estar relacionados, pero no tienen que ser idénticos. La primera la explico en qué es la metatitle.

<head>
  <title>Etiquetas H en SEO: ejemplos y buenas prácticas</title>
</head>
<body>
  <h1>Etiquetas H en SEO</h1>
</body>

Recuerda: el H1 debe llevar el tema principal de la página. Google ha dicho que usar más de un H1 no es un problema, pero un H1 claro es la mejor práctica y mantiene la estructura fácil de leer, como sugiere la Guía de inicio de SEO de Google.

Dónde colocar las palabras clave

En SEO solemos colocar las palabras clave de interés en el H1, H2 y H3, porque cuanto más lejos del H1 está una etiqueta, menos peso tiene. Escríbelas primero para las personas.

<h1>SEO SEO servicios SEO barato</h1>
<h2>mejor SEO agencia SEO barato SEO</h2>
<h2>SEO SEO SEO precios</h2>

<h1>Qué es el SEO</h1>
<h2>Cómo funciona el SEO</h2>
<h2>SEO para Google vs. SEO para YouTube</h2>
<h3>Por cuál empezar</h3>

Cada subtítulo debería responder una pregunta que tu lector se haga. Así también consigues consultas extra.

Un ejemplo SEO completo

Este es el esquema completo de un artículo que apunta a «cómo preparar café»:

<h1>Cómo preparar café en casa</h1>
  <h2>Qué necesitas</h2>
    <h3>Granos de café</h3>
    <h3>Equipo</h3>
  <h2>Paso a paso</h2>
  <h2>Errores comunes</h2>
  <h2>Preguntas frecuentes</h2>

Lista rápida

• Un H1 claro con el tema principal.
• H2 para las secciones principales, H3 solo dentro de un H2.
• Sin saltar niveles y sin encabezados vacíos.
• Palabras clave naturales, nunca rellenadas.
• No uses encabezados solo para agrandar el texto.
• No ocultes encabezados con trucos de CSS.

¿Con ganas de ver más?