Los encabezados HTML son un fenómeno bien conocido para los especialistas en marketing de contenido. Al configurar los encabezados HTML de la manera correcta, le da una estructura y jerarquía a la página web.
Como resultado, el usuario final sabe exactamente qué esperar y dónde (y si) puede encontrar la información que está buscando. Pero, ¿cómo configurar idealmente los encabezados HTML? Te lo cuento todo en este artículo.
¿Qué son los encabezados?
Un encabezado es un título (intermedio) en código HTML. Los encabezados son el título de la página, títulos y subtítulos. Los usas para crear una página. Conocemos encabezados en seis niveles diferentes: H1 a H6.
Los encabezados HTML son una parte indispensable del marketing de contenidos. Bien hechos, estos le dan a la página una estructura lógica y una jerarquía. Valioso para el usuario final, porque de esa manera el lector sabe qué esperar.
Además, los motores de búsqueda entienden mejor de qué trata la página. Pero siempre tenga en cuenta que está escribiendo para el usuario final y no para los motores de búsqueda. Cuando escribes tus páginas para los motores de búsqueda y no para el usuario final, serás penalizado por ello.
Los encabezados son solo una parte. Si quiere corregir los problemas técnicos de su sitio de forma ordenada, conviene empezar por una auditoría que priorice qué arreglar primero.
¿Cuántas etiquetas de encabezado existen en HTML?
HTML tiene seis etiquetas de encabezado, de <h1> a <h6>. El número indica el nivel: <h1> es el más importante (el título de la página) y <h6> el de menor nivel. Se usan en orden, sin saltarse niveles, como el índice de un libro.
| Etiqueta | Para qué se usa | ¿Cuántas por página? |
|---|---|---|
<h1> | Título principal de la página | Una |
<h2> | Secciones principales | Las que hagan falta |
<h3> | Subsecciones dentro de un H2 | Las que hagan falta |
<h4> | Divisiones dentro de un H3 | Solo en textos largos |
<h5> y <h6> | Niveles muy profundos | Rara vez se necesitan |
¿Cuál es la diferencia entre los encabezados H1, H2, H3 y H4?
La diferencia es la jerarquía, no el tamaño de letra. El H1 dice de qué trata toda la página; cada H2 abre un tema dentro de ella; un H3 desarrolla una parte de ese H2, y un H4 divide un H3. El aspecto visual se controla con CSS: un H2 puede verse más pequeño que un párrafo si el diseño lo pide, y seguirá siendo un H2.
¿Y entre un H1 y un H5?
Un H1 es el título de la página; un H5 es un encabezado cinco niveles más abajo, que solo tiene sentido dentro de un H4. En una web normal casi nunca se llega a usar.
Ejemplo de estructura correcta
<h1>Guía de encabezados HTML</h1>
<h2>Qué son los encabezados</h2>
<h2>Tipos de encabezado</h2>
<h3>El encabezado H1</h3>
<h3>Los encabezados H2 a H6</h3>
<h4>Cuándo usar H4</h4>H1, H2 y H3
Un H1 es el primer encabezado que ve el lector. Después de un encabezado H1, trabaja con encabezados H2 y posiblemente con encabezados H3 a H6. En realidad, un encabezado H1 es el más importante y el encabezado H6 es el menos importante.
Puedes compararlo con un libro. Todo libro tiene un título. En una página web, este es el encabezado H1. A continuación, una página web tiene varios capítulos. Estos son los encabezados H2. Debajo de eso, aún podría trabajar con subtítulos. Estos son los encabezados H3 a H6. Voy a explicar cada título con más detalle.
Lea también: Cómo hacer que su sitio web sea más accesible [5 consejos simples]
Etiquetas H1
Un encabezado con una etiqueta H1 es el título de la página. Puedes comparar esto con el título del libro. Un libro solo tiene un título, por lo que lo ideal es que una página web también tenga un solo título.
Para buscadores como Google no parece ser un problema usar múltiples etiquetas H1, pero para el usuario final es más claro usar solo una. Escribí que los encabezados HTML son una parte indispensable del marketing de contenido, pero hay otra razón por la que es posible que desee hacer un buen uso de los encabezados HTML.
Son lugares valiosos para procesar las palabras clave más importantes (relacionadas). En el H1 procesamos la palabra clave más importante. De esta manera, también es valioso para integrar en tu estrategia de SEO.
Etiquetas H2
Si bien es recomendable procesar solo una etiqueta H1 en la página web, es bueno procesar varios encabezados HTML con etiquetas H2. Después de todo, un libro también tiene varios capítulos. Los encabezados H2 son los encabezados de la página web e indican estructura y jerarquía.
Según los encabezados H1 y H2, el usuario final ya debería saber qué información puede obtener de alguna parte. No hay límite para la cantidad de etiquetas H2, pero es mejor usar las etiquetas H2 de manera lógica. Por ejemplo, podría tener sentido usar un nuevo H2 para cada tema.
No utilices etiquetas H2 solo para incluir palabras clave específicas. Además, no uses etiquetas H2 para resaltar cierto texto, como una llamada a la acción. Para una llamada a la acción importante, por ejemplo, es mejor usar un botón en lugar de una etiqueta H2.
Al igual que el encabezado H1, el encabezado H2 también es un lugar adecuado para incluir palabras clave importantes. A menudo se incluyen palabras clave relacionadas en los encabezados H2.
Pero, de nuevo, ten en cuenta que estás escribiendo para el usuario final y no para los motores de búsqueda. Debe ser lógico y valioso para el usuario final.
Etiquetas H3
Los encabezados con etiquetas H3 son nuevamente los subtítulos de los encabezados H2. Con un encabezado H3, puede dividir grandes partes del contenido de los encabezados H2 en subtítulos más pequeños.
Esto hace que sea mucho más claro para el usuario final. Nadie quiere leer largos tramos de texto cuando busca algo específico. Por lo tanto, un encabezado H3 está relacionado con el encabezado H2.
Etiquetas H4 a H6
Las etiquetas H4, las etiquetas H5 y las etiquetas H6 también son etiquetas de encabezado que puede usar. En la práctica, sin embargo, esto rara vez se usa. Generalmente, se trata de limitar el uso de etiquetas de encabezado a etiquetas H3.
En la mayoría de los casos, esto mantiene la página web más clara. ¿Tienes una página larga con mucho texto? Entonces puede ser necesario agregar etiquetas H4, por ejemplo.
¿Cómo comprueba los encabezados HTML de otros sitios web?
¿Te gustaría analizar la estructura de una página web? Entonces descarga la extensión de Google Chrome llamada SEO META en 1 CLIC. Con esta extensión puedes ver de un vistazo cuáles son los H1, H2, H3, etc.
Si su empresa está en México y prefiere que un equipo revise cada mes los encabezados y el resto de su sitio, vea nuestra agencia SEO en México.
Crear encabezados HTML
Ahora sabes por qué deberías usar etiquetas HTML y cómo configurarlas. Pero, ¿cómo se crean encabezados HTML? Eso es un poco más complicado, pero una vez que lo sabes, es muy simple. Creas un encabezado HTML con una pieza de código HTML.
Es importante configurar los encabezados HTML para el usuario final y no para los motores de búsqueda.
También puedes leer: La importancia del Diseño Web UX para tu empresa
Aunque los motores de búsqueda también se benefician de una estructura clara de una página web, es principalmente valiosa para el usuario final. Crear contenido que beneficie al usuario final.
¿Quiere aplicar esto en su empresa?
En BIM Soluciones le ayudamos con una auditoría de SEO técnico. Hable con un asesor y revisamos su caso.
