Cada sitio web es su propio monstruo único, y los desarrolladores y diseñadores ponen sus propias voces en el código. Pero uno de los elementos comunes de cualquier sitio web son las etiquetas de encabezado HTML. Estos encabezados no solo dividen su contenido en secciones más legibles, sino que también crean un esquema semántico para su sitio para que los motores de búsqueda y el software de accesibilidad puedan identificar exactamente qué contenido constituye su sitio. A veces hay cierta confusión sobre el uso y la función correctos de las etiquetas de encabezado HTML, por lo que queremos pasar por los 6 niveles y discutir cómo y cuándo usarlos correctamente.
Suscríbete a nuestro canal de YouTube
¿Por qué usar etiquetas de encabezado HTML?
Como dijimos anteriormente, estas etiquetas forman la columna vertebral de su sitio web. Sin ellos, no solo el título y el propósito de su sitio no son claros, sino que su contenido parece una gran pared de texto para los usuarios y los bots, incluso si lo divide en párrafos.
Más, lectores de pantalla y software de accesibilidad utilícelos para navegar a través del contenido (a veces literalmente). Por lo tanto, si no incluye etiquetas de encabezado HTML, su sitio será inaccesible para muchas personas porque simplemente no pueden navegar por la página y el contenido.
Además, los motores de búsqueda y otros rastreadores web que terminan en su sitio también navegan por sus titulares. Recientemente, Google está 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 sus visitantes en qué parte de la página pueden encontrar cierta información, ordenada jerárquicamente.
Cada etiqueta en su sitio web ayuda con 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 usa estas etiquetas puede hacer o deshacer el SEO de su sitio web. Si bien puede diseñarlos con CSS y hacer que la etiqueta H6 sea más grande, audaz y brillante que H2, debe intentar mantenerlos ordenados para no confundir a los rastreadores (y lectores).
Piensa en tus etiquetas en orden ascendente como si fueran los encabezados de tu publicación. Solo debe (generalmente) poner el número más alto debajo del predecesor inmediato. Puede anidarlos tan profundamente como desee, pero asegúrese de colocar solo el siguiente cada vez.
Aquí hay 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 especiales en los que tenga un solo H6 sobre H4, pero en la mayoría de los casos, Google y otros motores de búsqueda priorizan su tema y miden la eficacia de su contenido para la búsqueda, utilizando encabezados para navegar por su contenido.
Etiquetas H1
La etiqueta H1 puede ser la más simple de las etiquetas de encabezado HTML y 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 específica. Esto es lo que los motores de búsqueda (probablemente) mostrarán en los resultados. Es probable que su navegador también muestre esto en la barra de título, aunque muchos complementos de SEO y aplicaciones similares le permiten cambiar esto. Por esta razón, si bien es importante que la palabra clave objetivo esté en la etiqueta H1, no es 100% necesario. Escriba sus titulares y títulos semánticamente para ocultar su intención de búsqueda, en lugar de llenar sus palabras clave con etiquetas de título HTML.
La imagen de arriba muestra la etiqueta H1 utilizada como título de una publicación en una publicación de blog de Elegant Themes. También es la única etiqueta H1 en la página. Es decir, es el tema del contenido de la página.
Durante años, ha sido una práctica estándar tener una (y solo una) etiqueta H1 en una página. En su mayor parte, este sigue siendo un buen consejo. Google y otros motores de búsqueda indexan su página y buscan la etiqueta H1. Luego lo usan para definir el tema, el título y la estructura.
Sin embargo, Google ha dejado en claro que tener muchas etiquetas de encabezado HTML H1 en su sitio no incurre en ninguna penalización por SEO. Esto no significa que pueda volverse loco usándolos en todas partes de su sitio, pero sí significa que puede usar más de una página en una página cuando lo necesite.
Cuándo usar múltiples encabezados H1
El único propósito de H1 es proporcionar una sección completa sobre un tema. Esto significa que si tiene una página que tiene más de un tema, le gustaría usar H1 para cada tema nuevo en esa página. Esto informará a Google que su página no está sólo sobre el tema en el título. Pero también puede haber una sección sobre un tema completamente diferente (aunque relacionado) a continuación.
Para sitios de una sola página, esto también es importante ya que esa página puede tener una sección de Información, Precios, Contacto y Portafolio. Entonces, ¿cómo notifica a Google que el contenido de cada sección es una unidad independiente separada?
Etiquetas H1, así como así. Trata cada sección como su propio mini-sitio web, utilizando la jerarquía que discutimos anteriormente en cada uno. Así es como Google ve los titulares a medida que navega por la página y luego puede determinar de cuál de esas secciones descargar los fragmentos destacados (y así sucesivamente) para responder a las consultas del motor de búsqueda.
También puede usar la etiqueta H1 cada vez que use Sección en su sitio, pero le sugerimos que solo haga esto si es una sección paralela al título de la página y no una secundaria.
Etiquetas H2
Actualmente, las etiquetas H2 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 consisten en un solo tema con varios subtítulos. Recomendamos que cualquier contenido que cree incluya al menos una etiqueta H2. Yoast y otros complementos de SEO sugieren un título cada 300 palabras más o menos. Dependiendo del contenido, para eso están las etiquetas H2.
Separan subtemas (o pasos) para que sea más fácil de leer. Por ejemplo, la mayoría de nuestras publicaciones consisten principalmente en encabezados H2 (H3 si corresponde). Esto se debe a que nuestros artículos cubren un tema y tratamos de resolver un problema. Tendremos el título «Cómo usar OBS Studio para transmisión en vivo como H1, pero los subtítulos» Cómo comenzar con OBS Studio «estarán en H2.
La etiqueta H2 representa los pasos que se relacionan directamente con el tema H1. En esta 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 cubren las ideas principales, como iniciarlo y descargarlo, configurar el software real y luego personalizar la apariencia de su pantalla para sus espectadores. Si bien también hay pasos debajo de los de H3, los encabezados de H2 indican una imagen a gran escala del artículo. Esta es una vista de alto nivel que los rastreadores y los lectores podrán examinar para ver si un artículo contiene la información que buscan.
En general, tendrá varias etiquetas H2 por artículo, aunque es posible que no tenga subtítulos anidados debajo de ellas. Si su página o publicación trata sobre un solo tema que no está dividido en subsecciones como en el ejemplo anterior, sería mejor tener varias etiquetas H2 que H2 -> H3 -> H4 anidadas, ya que le dicen a los robots que se sumerjan más en el fondo. en el soporte que el desarrollo del 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 H1. Los robots de Google y los motores de búsqueda los ven absolutamente como subtítulos. Mientras que H2 se acepta como titular de una sección dentro de un artículo (con H1 declarando el tema principal como título, recuerde).
Si observa detenidamente la imagen de arriba, puede ver que el estilo y el tamaño reales entre nuestras etiquetas H2 y H3 no son tan diferentes. La razón es que no queremos que suponga a partir de su escaneo que cualquier punto que hagamos en H3 es menos importante que H2. Porque no lo es.
Es más pequeño indicar que este es un punto secundario de H2 y no un enlace directo al tema general, que es el aspecto estructuralmente más importante del SEO de su artículo. Para los lectores humanos, no para los robots, la diferenciación visual solo ayuda a desplazarse por la página y desglosar la información para que sea más fácil de analizar.
Etiquetas H4, H5, H6
Los juntamos por una razón. En general, será difícil encontrar sitios que hagan un uso completo del rango de etiquetas de encabezado HTML de H1 a H6. Con mucho, la estructura más popular es H1 a H3. Como rara vez ve el contorno de su 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 la etiqueta H3. Los usará para entrar en los detalles de los pasos y ejemplos, pero siempre están anidados debajo de los encabezados principales. Los diseñadores suelen diseñarlos con CSS inferior a H3. Por lo general, ven un uso limitado en la creación de contenido ordinario. El tema parece ser muy profundo si las ideas deben desglosarse para necesitar una etiqueta de encabezado H4.
H5 y H6
Puede usar los encabezados H5 y H6 de varias maneras diferentes.
primera forma
(Solo por ejemplo, dividimos esta sección en particular en diferentes partes con un encabezado, y ahora estamos en H4 porque ese es el 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 otras, delineando temas de importancia decreciente a lo largo de la página. Rara vez podrá encontrar un documento con la gama completa de encabezados hasta H6.
segunda forma
Algunas personas usan las etiquetas H5 y H6 como encabezados de formato «especial». Para estas dos etiquetas de encabezado HTML, aplicarán un código CSS especial que es completamente diferente 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.
Esto no es técnicamente una mejor práctica ya que los encabezados son jerárquicos. Sin embargo, si su sitio está bien organizado 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 obtendrá ningún éxito de SEO.
Solo recuerda que incluso si los usas para un formato especial, no estás saliendo de la jerarquía. Manténgalos ordenados. Entonces, si está usando H6 para diseñar un subtítulo, asegúrese de que el siguiente que use sea H1 o H2 para mostrar que ha vuelto a la estructura estándar.
Qué no hacer con las etiquetas de encabezado HTML
No cree una estructura de página única con toda la jerarquía de encabezados hacia abajo. Es mejor tener H1 para el título y todos los H2 que 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 sus encabezados al azar. Úselos solo en secuencia. De lo contrario, los rastreadores no tendrán idea de cómo navegar por su sitio, 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, se puede suponer que el robot de índice sabrá que ha dejado una subsección cuando encuentre el siguiente H1 o H2. En el fragmento anterior, los robots y bots tendrían dificultades para analizar la estructura de la información.
Envolviendo con etiquetas de encabezado HTML
¿Y ver? Volvemos a H2 para resumir todo. Las etiquetas de título son una parte importante de cualquier sitio web. El uso adecuado de ellos puede aumentar su clasificación en los motores de búsqueda, así como la experiencia de usuario de su sitio web, ya que los visitantes podrán encontrar la información que buscan más fácilmente en su contenido. Recuerde no poner sus palabras clave en demasiados titulares. Si bien es una buena idea incluir las palabras clave o frases que está discutiendo para asegurarse de que sus ideas sean claras, Googlebots y otros son bastante inteligentes y pueden saber cuándo ha cambiado de tema o si está en el mismo tema. En general, el uso de etiquetas de encabezado HTML es extremadamente importante, pero si solo recuerda algunas cosas, sus sitios brillarán en poco tiempo.
¿Está utilizando las etiquetas de encabezado HTML correctamente?
Artículo destacado con una imagen de VectorV / shutterstock.com
