Cómo utilizar correctamente las etiquetas de encabezado HTML

Cada sitio web es su propio monstruo único, con desarrolladores y diseñadores que ponen sus propias voces de firma en el código. Pero un elemento que todos los sitios web tienen en común son las etiquetas de encabezado HTML. Estos encabezados no solo dividen su contenido en secciones más legibles, sino que crean el esquema semántico de su sitio para que los motores de búsqueda y el software de accesibilidad puedan decir exactamente qué contenido compone el sitio. Ocasionalmente existe cierta confusión en cuanto al uso y la función adecuados de las etiquetas de encabezado HTML, por lo que queremos revisar los 6 niveles y discutir cómo y cuándo usarlos correctamente.

Suscríbete a nuestro canal de Youtube

¿Por qué utilizar etiquetas de encabezado HTML?

Como dijimos anteriormente, estas etiquetas crean el esqueleto de su sitio. Sin ellos, el título y el propósito de su sitio no solo son menos que claros, sino que el contenido se ve a los usuarios y a los bots como si fuera una pared gigante de texto, incluso si lo divide usando párrafos.

Además, los lectores de pantalla y el software de accesibilidad los utilizan para navegar por su contenido (a veces literalmente). Entonces, si no incluye etiquetas de encabezado HTML, su sitio se vuelve inaccesible para muchas personas porque simplemente no pueden moverse por la página y el contenido.

Además, los motores de búsqueda y otros rastreadores web que llegan a su sitio también navegan a través de sus encabezados. Recientemente, Google ha estado considerando la semántica del código en sus clasificaciones, lo que significa que la intención de búsqueda tiene un gran peso. Sus etiquetas de encabezado HTML son una parte importante de esto, ya que le dicen a Google y a los visitantes en qué lugar de la página encontrar información específica, organizada por importancia jerárquica.

Y cada etiqueta dentro de su página ayuda a todo esto a su manera.

La jerarquía de etiquetas es importante

La jerarquía de etiquetas de encabezado HTML es importante. El orden en el que utilice estas etiquetas puede hacer o deshacer el SEO de su sitio. Si bien puede diseñarlos usando CSS y hacer que una etiqueta H6 sea más grande, más audaz y más brillante que una H2, aún debe intentar mantenerlos en orden para no confundir a los rastreadores (y lectores).

Piense en las etiquetas en orden ascendente como si fueran los encabezados del esquema de su publicación. Solo debe (en general), poner un número más alto debajo de su predecesor inmediato. Puede anidarlos a la profundidad que desee, pero asegúrese de poner el siguiente en secuencia cada vez.

He aquí un ejemplo:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Puede haber casos específicos en los que tenga un solo H6 por encima de un H4, pero en su mayor parte, Google y otros motores de búsqueda determinan la prioridad del tema y miden la efectividad del contenido para la intención de búsqueda mediante el uso de encabezados para navegar por su contenido.

Etiquetas H1

La etiqueta H1 puede ser la más simple de las etiquetas de encabezado HTML, aunque también es una de las más incomprendidas. En la mayoría de los casos, verá el encabezado H1 como el título de una página o publicación en particular. Es lo que los motores de búsqueda mostrarán (probablemente) en los resultados. Es probable que su navegador también muestre esto en su barra de título, aunque muchos complementos de SEO y aplicaciones similares le permiten cambiarlo por esos. Por eso, si bien es importante tener la frase clave de destino en la etiqueta H1, no es 100% necesario. Escriba sus titulares y títulos de forma semántica para cubrir la intención de búsqueda de los visitantes en lugar de rellenar las etiquetas de encabezado HTML con palabras clave.

La imagen de arriba muestra una etiqueta H1 utilizada como título de entrada para un artículo en el blog Elegant Themes. También es la única etiqueta H1 en la página. Esto indica que es el tema del contenido de la página.

Durante años, la práctica estándar fue tener una (y solo una) etiqueta H1 por página. En su mayor parte, este sigue siendo un buen consejo. Google y otros motores de búsqueda rastrean su página y buscan la etiqueta H1. Luego lo usan para determinar el tema, el título y la estructura.

Sin embargo, Google ha dicho explícitamente que tener múltiples etiquetas de encabezado HTML H1 en su sitio no incurre en ninguna penalización de SEO. Eso no significa volverse loco al usarlos en todas partes de su sitio, pero lo que sí significa es que puede usar más de uno por página cuando surja la necesidad.

Cuándo utilizar varios títulos H1

El único propósito de un H1 es indicar una sección completa sobre un solo tema. Eso significa que si tiene una sola página que tiene más de un tema, querrá usar un H1 para cada tema nuevo en esa página. Si lo hace, le diría a Google que su página no se trata solo del tema en el título. Pero también podría haber una sección sobre un tema completamente diferente (aunque relacionado) más abajo.

En los sitios web de una sola página, esto también es importante porque es posible que tenga una sección Acerca de, Precios, Contacto y Portafolio en esa página. Entonces, ¿cómo le hace saber a Google que el contenido de cada sección es su propia unidad autónoma?

Etiquetas H1, así es como. Trata cada sección como si fuera su propia mini página web, utilizando la jerarquía que discutimos anteriormente en cada una. De esa manera, Google ve los encabezados mientras navega por la página, y luego puede determinar de cuál de esas secciones extraer fragmentos destacados (y así sucesivamente) para responder las preguntas de los buscadores.

También puede optar por usar una etiqueta H1 cada vez que use una etiqueta de sección en su sitio, pero sugerimos hacerlo solo cuando sea una sección de importancia paralela al título de la página, en lugar de una subordinada.

Etiquetas H2

Las etiquetas H2, ahora, probablemente serán las etiquetas de encabezado HTML más utilizadas en sus páginas. Y por una buena razón. La mayoría de las publicaciones y páginas en Internet constan de un solo tema con solo unos pocos subtítulos. Recomendamos que cada pieza de contenido que cree contenga al menos una etiqueta H2. Yoast y otros complementos de SEO sugieren un título aproximadamente cada 300 palabras. Dependiendo de su contenido, para eso están las etiquetas H2.

Separan subtemas (o pasos) para facilitar la lectura. Por ejemplo, la mayoría de nuestras publicaciones constan principalmente de títulos H2 (con H3 cuando corresponda). Esto se debe a que nuestros artículos tratan un solo tema, en el que intentamos resolver un solo problema. Tendremos el título como Cómo usar OBS Studio para transmitir en vivo como H1, pero los subtítulos como "Cómo comenzar con OBS Studio" estarán en H2.

La etiqueta H2 representa los pasos individuales que pertenecen directamente al tema H1. En esa publicación en particular usamos la siguiente estructura:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Las etiquetas de encabezado H2 en esta publicación repasan las ideas principales, como comenzar y descargarlo, configurar el software real y luego ajustar la apariencia de su pantalla para los espectadores. Si bien también hay pasos involucrados debajo de los de H3, los títulos H2 indican la imagen a gran escala del artículo. Son una vista de alto nivel que los rastreadores y lectores podrán examinar para ver si el artículo contiene la información que están buscando.

En general, tendrá varias etiquetas H2 por artículo, aunque es posible que no tenga subtítulos debajo de ellas. Si su página o publicación está sobre un solo tema que no está dividido en secciones con subsecciones como el ejemplo anterior, sería mejor tener múltiples etiquetas H2 que H2 -> H3 -> H4 anidadas porque estas indican a los rastreadores que ' bucear más profundamente en un suptopic que expandir el tema principal de la publicación.

Etiquetas H3

Las etiquetas H3, por otro lado, son donde sus artículos realmente pueden profundizar en los detalles de su tema. Nunca debe usar estas etiquetas H3 directamente debajo de un H1. Los robots de Google y los motores de búsqueda los ven absolutamente como subtítulos. Mientras que H2 se acepta como un encabezado principal para las secciones dentro de un solo artículo (con el H1 declarando el tema principal como título, recuerde).

Si observa detenidamente la imagen de arriba, verá que el estilo y el tamaño reales entre nuestras etiquetas H2 y H3 no son muy diferentes. La razón es que no queremos que asuma al escanear que cualquier punto que hagamos en un H3 es menos importante que un H2. Porque no lo es.

Es solo de menor tamaño para indicar que es un punto subordinado al H2, en lugar de un vínculo directo con el tema general, que es más importante desde un punto de vista estructural con respecto al SEO de su artículo. Para los lectores humanos, en lugar de los robots, la distinción visual simplemente ayuda a moverlos hacia abajo en la página y desglosar la información para analizarla más fácilmente.

Etiquetas H4, H5, H6

Los hemos agrupado por una razón. En general, será difícil encontrar sitios que hagan un uso completo de la gama H1 a H6 de etiquetas de encabezado HTML. Con mucho, la estructura más popular es H1 a H3. Al igual que rara vez ve un esquema de contenido más allá del segundo nivel anidado.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

En su mayor parte, la etiqueta H4 tendrá el mismo propósito que H3. Los usará para entrar en detalles para los pasos y ejemplos, pero siempre anidados debajo de sus encabezados principales. Los diseñadores generalmente los diseñan con CSS más pequeño que H3. Tienden a ver un uso limitado en la creación de contenido ordinario. Un tema tiende a ser muy profundo si las ideas deben desglosarse de modo que se necesite una etiqueta de encabezado H4.

H5 y H6

Puede utilizar los títulos H5 y H6 de dos formas diferentes.

El primer camino

(Solo por ejemplo, hemos dividido esta sección en particular en varias partes a través del encabezado, y ahora estamos en H4 porque es un subtema del artículo principal).

Estos encabezados se utilizan a menudo en tablas de contenido y listas similares, aunque su función principal es técnicamente la misma que los demás, delineando temas de importancia descendente a lo largo de la página. Será bastante raro encontrar un documento con una gama completa de títulos hasta H6.

El segundo camino

Algunas personas usan etiquetas H5 y H6 como encabezados de formato "especiales". Aplicarán CSS especial a estas dos etiquetas de encabezado HTML que son completamente diferentes de H1 a H4. Luego, puede usarlos para llamar la atención sobre temas e ideas que de otro modo podrían pasarse por alto.

Esta no es la mejor práctica técnicamente, ya que los encabezados son jerárquicos. Sin embargo, si su sitio está bien estructurado en general y usa H5 y H6 con moderación como estilos especiales en ciertas páginas o publicaciones individuales, es casi seguro que no recibirá ningún impacto de SEO.

Solo recuerde que incluso cuando los usa para un formato especial, no se sale de la jerarquía. Mantenlos en orden. Entonces, si usa H6 para diseñar un subtítulo, asegúrese de que el siguiente que use sea un H1 o H2 para mostrar que ha regresado a la estructura estándar.

Qué no hacer con las etiquetas de encabezado HTML

No estructure una sola página con toda la jerarquía de encabezados hacia abajo. Está mejor con un H1 para un título y todos los H2, en lugar de anidar cada encabezado sucesivo.

Sí:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

No:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Además, no desea utilizar los títulos al azar. Úselos solo en orden. De lo contrario, los rastreadores no sabrán cómo navegar por su página, ni tampoco el software de accesibilidad.

No:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

En general, puede asumir que un rastreador sabrá que ha salido de una subsección cuando encuentre el siguiente H1 o H2. En el fragmento de código anterior, los rastreadores y bots tendrían dificultades para analizar la estructura de la información.

Finalización con etiquetas de encabezado HTML

¿Y ver? Volvemos a un rumbo H2 para terminar. Las etiquetas de encabezado son un elemento importante de todos los sitios web que existen. Usarlos correctamente puede aumentar su clasificación en los motores de búsqueda, así como la UX de su sitio, ya que los visitantes podrán encontrar más fácilmente la información que buscan en su contenido. Recuerde asegurarse de no incluir palabras clave en muchos de sus encabezados. Aunque es una buena idea incluir las palabras clave o frases que estás discutiendo para asegurarte de que tus ideas sean claras, Googlebots y otros son bastante inteligentes y pueden saber cuándo has intercambiado temas o estás en el mismo tema. En general, el uso de etiquetas de encabezado HTML es increíblemente importante, pero si solo tiene en cuenta algunas cosas, sus sitios brillarán en poco tiempo.

¿Ha estado utilizando correctamente las etiquetas de encabezado HTML?

Imagen destacada del artículo por VectorV / shutterstock.com