Etiquetas H1, H2 y H3: jerarquía y ejemplos
LA RESPUESTA, PRIMERO
Los encabezados organizan el contenido para que sea fácil recorrerlo y comprenderlo. Usa un título principal reconocible, H2 para las secciones y H3 para los apartados que dependen de ellas. Elige cada nivel por su función, no por el tamaño visual.
EN ESTE ARTÍCULO
Qué función cumple cada nivel
- H1: presenta el tema principal de la página.
- H2: divide ese tema en secciones.
- H3: desarrolla un apartado dentro de una sección H2.
Una jerarquía comprensible ayuda a navegar por encabezados, también con tecnologías de asistencia. La W3C recomienda organizar los niveles según la estructura de la página. Guía de encabezados de WAI.
Un ejemplo para una página de servicio
Imagina una página de diseño web. Su H1 identifica el servicio; los H2 pueden explicar qué incluye, cómo se trabaja, el presupuesto y las preguntas habituales. Dentro de «Qué incluye», los H3 pueden describir diseño, desarrollo y publicación.
No todas las secciones necesitan H3. Añádelos cuando ayuden a dividir información relacionada, no para introducir otra repetición de la misma palabra clave.
H1 y title tienen funciones distintas
El H1 aparece en el contenido. El elemento title forma parte de los metadatos del documento. Pueden ser similares si describen bien la página, pero no son el mismo elemento.
Google puede utilizar el título y los encabezados visibles, entre otras fuentes, para generar el enlace de título del resultado. Conviene que el tema principal sea claro y coherente. Cómo se generan los enlaces de título.
Qué revisar en WordPress
- Comprueba qué H1 genera la plantilla antes de añadir otro al contenido.
- Utiliza bloques de encabezado para los títulos de sección.
- Elige el nivel según la jerarquía y aplica el tamaño desde el diseño.
- Revisa los encabezados de menús, tarjetas y pie de página.
- Lee solo los títulos: deberían permitir entender el recorrido de la página.
Palabras clave sin forzar la lectura
Nombra el servicio o tema cuando ayude a entender la sección. No hace falta repetir la consulta completa en todos los encabezados ni crear una pregunta artificial para cada variación.
Ejemplo: después de un H1 que identifica el servicio, «Qué incluye» puede resultar más claro que volver a escribir el nombre completo del servicio y la ciudad. El contexto ya está en la página.
Una buena estructura no garantiza posiciones. Forma parte de una página útil, coherente y fácil de usar. Explora cómo conectamos contenido y arquitectura en posicionamiento SEO.
Ejemplo HTML de una jerarquía comprensible
El H1 presenta el tema; los H2 dividen las secciones y los H3 desarrollan una de ellas. El ejemplo siguiente describe una página de servicio, no una receta de posicionamiento.
| Elemento | Función | Error habitual |
|---|---|---|
| H1 | Identificar el tema principal visible. | Añadir otro sin revisar el que ya genera la plantilla. |
| H2 | Introducir una sección del tema. | Elegirlo solo por su tamaño de letra. |
| H3 | Desarrollar un apartado del H2 anterior. | Usarlo como decoración sin relación jerárquica. |
| Title | Describir el documento en sus metadatos. | Confundirlo con el encabezado visible. |
Cómo revisar la estructura en WordPress
Abre la vista de lista o el esquema del editor y recorre solo los encabezados. Comprueba después la página publicada: la plantilla puede añadir títulos que no aparecen dentro del contenido. Si necesitas cambiar el tamaño visual, utiliza los estilos del bloque en lugar de alterar su nivel. El recorrido debería entenderse también cuando una persona navega por la lista de encabezados de su lector de pantalla.
<h1>Diseño web para empresas</h1>
<h2>Qué incluye el proyecto</h2>
<h3>Estructura y contenido</h3>
<h3>Diseño y construcción</h3>
<h2>Cómo trabajamos</h2>
<h2>Preguntas antes de empezar</h2>ANTES DE DARLO POR REVISADO
- ¿Los títulos explican el recorrido sin leer todos los párrafos?
- ¿Cada H3 pertenece a la sección H2 que lo precede?
- ¿La plantilla y el contenido forman una sola jerarquía coherente?
Contenido revisado el 17 de octubre de 2026. Firma: Equipo de Syvat Sistemas.