Formato nuevo
La etiqueta HTML H1: estilo, jerarquía y SEO
H1 es el heading visible principal de la página: fija el tema para la gente y ayuda a la búsqueda a entender el documento. No es un interruptor mágico de ranking — es parte de una estructura clara con el title tag, subtítulos y el cuerpo del texto.
Abajo: cómo estilizar el H1, en qué se diferencia del Title, cómo montar una jerarquía H2–H6, errores típicos de CMS y un chequeo rápido. El trabajo on-page más amplio vive en el artículo de optimización de página; aquí el foco son los headings.
Por qué necesitas el H1
El H1 responde «¿qué es esta página?» above the fold. Los usuarios ven el tema al instante; el bot recibe una señal estructural fuerte junto a Title, lead y el copy principal.
Un H1 perfecto solo no salva contenido fino o robado. Funciona como cadena: un intent → heading claro → texto que cumple la promesa.
Un buen H1:
- uno por página de contenido principal
- se lee como heading, no como hoja de keywords
- alineado con Title y URL en sentido
- visible sin cazar por bloques de plantilla
H1 y Title: la diferencia
Title vive en `<head>` y suele convertirse en el titular del snippet. H1 está en `<body>` — la gente lo ve en la página. Coincidir redacción uno a uno no es obligatorio y a menudo resta CTR: resultados y página necesitan acentos distintos.
Ejemplo: Title — «Entrega de agua en Madrid — pedido desde 1 garrafa»; H1 en la página — «Entrega de agua potable por Madrid». Sentido compartido, no clones.
En la práctica:
- Title más corto y escrito para el clic
- H1 más natural para leer en la página
- no metas cinco colas comerciales en ambos
- marca en Title donde ayude; en H1 si forma parte de la oferta
Cómo añadir y estilizar el H1
En HTML es `<h1>…</h1>`. En un CMS el campo «título del post» a menudo ya sale como H1 — revisa el tema: a veces el título del post es H2 mientras el H1 es el logo o texto utilitario oculto.
Estiliza vía CSS, no con tamaño de fuente en un `<div>` al azar ni con `<b>` en lugar de jerarquía. Para accesibilidad, el orden de headings importa — no solo «texto grande».
Estilo:
- corto y al punto (a menudo unos 70–90 caracteres, sin tope duro)
- sin MAYÚSCULAS ni «!!!!!»
- sin enlaces anidados «por si acaso» dentro del H1
- no ocultes el H1 con `display:none` por SEO — inútil y arriesgado
Keywords en el H1 sin stuffing
Di el tema principal como lo diría una persona: servicio, categoría de producto, pregunta del artículo. La redacción secundaria va a H2–H3 y al cuerpo.
El stuffing («comprar barato mayorista precio madrid») duele a la confianza y a menudo al snippet. Un H1 claro gana a tres keywords separadas por comas.
Checklist de redacción:
- refleja el intent de la página
- no clona el Title verbatim
- sin ciudad × servicio × «barato» × «24/7» en una línea sin necesidad
- alineado con el primer párrafo
Jerarquía H1–H6
Piensa en tabla de contenidos: H1 es el tema del documento, H2 bloques grandes, H3 subsecciones bajo H2. Saltar niveles «porque el tamaño de tipo se ve bonito» duele al escaneo y a la accesibilidad.
H4–H6 son más raros en sitios de marketing; si los usas, mantén la lógica de anidamiento. En una ficha de producto a menudo: H1 = nombre, H2 = descripción / specs / reviews.
Anti-patrones:
- cinco H1s en la plantilla
- un H2 más alto en sentido que un H1 «perdido»
- todos los subtítulos un estilo sin tags de heading
- el mismo H1 en paginación «página 2» sin aclarar
Cómo comprobar el H1 en el sitio
Comprobaciones puntuales: Ver código fuente o inspector — busca `h1`. En masa: un crawler (Screaming Frog y pares) — columna H1, duplicados, vacíos. En paneles de webmaster, revisa URLs problemáticas tras un cambio de plantilla.
Tras cambiar el tema del CMS, rechequea home, ficha, categoría y un post del blog — las plantillas a menudo difieren.
Qué anotar en la auditoría:
- páginas sin H1
- páginas con dos o más H1s
- H1s duplicados entre URLs
- H1 = Title palabra por palabra en todo el sitio (señal de spam de plantilla)
FAQ
¿Cuántos H1 debe tener una página?
Apunta a un H1 con sentido en el contenido principal. Varios H1s en la plantilla (logo, widgets) mejor quitarlos — confunden a la gente y al markup.
¿Title y H1 deben coincidir palabra por palabra?
No. Sentido compartido, redacción distinta es mejor: Title para el snippet, H1 para la pantalla on-page.
¿Hace falta una keyword en el H1?
Un sentido claro de la query o del servicio ayuda — no exact-match a cualquier coste. La legibilidad gana a la densidad.
¿Se puede estilizar un div como heading sin H1?
Visualmente sí; para SEO y accesibilidad es peor. Un heading debe ser un heading HTML real por sentido.
¿Siempre hacen falta H2–H6?
En un landing corto, H1 más párrafos puede bastar. En copy largo y catálogos, una jerarquía H2–H3 ayuda mucho al escaneo.
¿El H1 rankea más duro que el Title?
Ambos ayudan a entender el tema. Para clics desde resultados, pesan más Title y el snippet; para entender la página on-site — H1 y estructura.
¿Cómo compruebas el H1?
Ver código fuente, una extensión o un crawler: busca `<h1>`. En DevTools es fácil ver si el heading está oculto o duplicado.
¿El H1 puede ser una imagen?
Mala idea: texto en imagen es peor para búsqueda y accesibilidad. Si el logo va en el header, no sustituyas el H1 de contenido con él.
¿Logo como H1 en cada URL — y titles clonados en todo el sitio?
Fijamos un H1 con sentido por plantilla y una jerarquía H2–H3 sensata — legible, no atiborrada.
Hablar del proyecto
