Etiquetas de encabezado H1, H2 y H3 ¿Qué son y para qué sirven?

A raíz del post en el que hablaba sobre los títulos de nuestros post, recibí varias preguntas sobre qué eran y para que servían las etiquetas H de nuestros blogs. Y yo como buena Blogger obediente aquí estoy para ayudaros en todo lo que pueda.



Para empezar, como ya sabemos, debemos escribir por y para personas, siempre. Y por supuesto también sabemos que    el contenido es el rey. Pero lo que quizás nos sabemos es que si un post no está bien estructurado en cuanto a SEO se refiere no llegará muy lejos en los buscadores.
En este post quiero daros todas la claves posibles sobre las etiquetas de encabezado. Por eso lo he estructura de la siguiente manera:

- ¿Qué son y para qué sirven?
- Etiquetas H1, H2 y H3 en profundidad
- Consejos para su optimización
- Como optimizar las etiquetas de encabezado para Blogger
- Como optimizar las etiquetas de encabezado para Wordpress

Como veis será un post un poco largo, por ello quiero recomendaros leerlo con calma porque a mi me costó un poco entender este tema y quiero explicarlo de la mejor forma posible.
De hecho no me voy a enrollar más con la introducción (cosa que sabéis que me encanta hacer) y vamos a empezar ya con el embrollo de la cuestión.




Las etiquetas h1, h2, h3 ... h6 son las llamadas etiquetas de cabecera. Van del 1 al 6 de texto más grande a texto más pequeño. Definen la jerarquía de nuestro contenido y es una forma de ayudar a los buscadores a definir los elementos más importantes de nuestro post.
Es decir, ayudan a captar la atención de los buscadores cuando rastrean nuestro blog.
Son unas etiquetas de suma importancia que ya indican de que tema trata nuestro contenido y además nos son de mucha ayuda con temas como los títulos y el SEO.




- H1: Es la etiqueta más importante de las etiquetas de cabecera. Debe contener el tema sobre el que trata nuestro post con palabras claves. Y siempre lo más a la izquierda que se pueda.
Antes solo se podía poner una etiqueta H1 por post, pero desde la llegada del HTML5 podemos añadir más etiquetas H1 separadas por el código <section> (sirve para separa el post en secciónes) pero ya entraremos en esto en otro momento.

Ejemplo: <h1>Cremas Antiarrugas</h1>

- H2: Esta etiqueta sirve para resaltar los títulos secundarios. Puede haber más de una etiqueta H2 pero siempre con un máximo de 4 o 5 cinco etiquetas por cada h1 que tengamos en nuestro post.
Es una etiqueta muy importante ya que Google la mira con lupa al ser los subtítulos de nuestro post.

Ejemplo: <h2>Nivea, Crema Antiarrugas</h2> <h2>Bioderma, Crema Antiarrugas</h2>

- H3: Son los llamados títulos de Tercera categoría. Muchos piensas que no son 100% necesarios a la hora de optimizar nuestros post pero a Google le encanta que mínimo lleguemos hasta la etiqueta H3 en nuestros post para posicionarlos mejor. Debe existir una cantidad lógica de h3 en nuestros post. Podremos añadir entre 3 y 4 etiquetas H3 por cada etiqueta h2 que tengamos en nuestro post.

Ejemplo: <h3>Ingredientes Nivea crema Antiarrugas</h3> <h3>Ingredientes Bioderma crema Antiarrugas</h3> ; <h3>Opinión Nivea crema Antiarrugas</h3> <h3>Opinión Bioderma crema Antiarrugas</h3>

Y así podríamos continuar hasta la etiqueta H6. Antiguamente no se le deba más importancia a las etiquetas de encabezado que hasta la h3 pero con el paso del tiempo hemos descubierto que a Google le encantan las etiquetas de encabezado, cuantas más mejor.




● No podemos poner etiquetas H3 sin poder antes las etiquetas H2. Igual que no podemos poner las etiquetas H2 sin poner antes las etiquetas H1.
● Es importante llevar el orden de las etiquetas. La etiqueta H2 debe ir dentro de la H1 y así sucesivamente.
● La práctica de poner las etiquetas de encabezado en blanco en nuestro editor de texto para que nuestro lectores no las vean pero los buscadores sí, está penalizado por Google.
● Debemos poner las Keywords en las etiquetas H1.
● Si crees que tienes muchas etiquetas H1 es recomendable hacer un post nuevo con las demás y enlazarlo con el post que contenía las primeras etiquetas H1.




Antes que nada tengo que avisaros que cambiar las etiquetas de encabezado en Blogger es un proceso engorroso que puede conllevar muchos fallos en las plantillas que estén predeterminadas.
Por eso como siempre os recomiendo hacer una copia de seguridad completa de nuestro blog.
Armaros de paciencia porque llegan las curvas.

El problema de optimizar las etiquetas de encabezado en Google es que casi siempre nos modifican la apariencia de nuestros títulos, y podemos acabar con la plantilla hecha un desastre.
Os daré unos consejos para arreglar esta modificaciones de estilo, pero como cada plantilla es de su madre y de su padre y existen muchas combinaciones me es muy difícil poder daros todas las posibles soluciones cuando esto ocurre.
Aún así os animo a intentarlo, pero como siempre haciendo la copia de seguridad primero.
Y sí soy muy pesada lo sé.

- Buscaremos en Plantilla - Editar HTML con CTRL+F las palabras: post-title entry-title

Buscaremos algo así:

<h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
 <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
 <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'> 
 <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/> 
 <data:post.title/>
  </b:if>
 <b:else/>
   <data:post.title/>
 </b:if>
  </b:if>
</h3>

Toda esa sección la sustituiremos por esto:

<b:if cond='data:blog.pageType == "index"'>
  <h2 class='post-title entry-title' itemprop='name'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'> 
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if> 
      <b:else/>
        <data:post.title/>
      </b:if>
     </b:if>
    </h2>
  <b:else/>
    <h1 class='post-title entry-title' itemprop='name'><data:post.title/></h1>
</b:if>

Cuando busquéis los códigos con el comando post-title entry-tiple aseguraros de que en las líneas siguientes pone H3. Porque si pone H1 o H2 estáis de suerte y no tendréis que hacer ninguno de estos pasos.

Normalmente debemos introducir post-title entry-tiple hasta dos veces para cambiarlo también en la versión móvil.

Y para arreglar los errores de edición que pueden surgir:

Busca:

h3.post-title, .comments h4 {

Y sustitúyelo por:

h1.post-title, h2.post-title, .comments h4 {

Busca:

.mobile h3.post-title {

Y sustitúyelo por:

.mobile h3.post-title, .mobile h2.post-title {




El proceso de optimizar las etiquetas de encabezado en Wordpress es mucho más sencillo que en Blogger. Ya que no tenemos que tocar el código fuente de la plantilla. Sin embargo es un proceso que debemos hacer manualmente cada vez que creamos un post.

- La etiqueta H1 es una etiqueta que se añade automáticamente cada vez que creamos un título para nuestro post.

- Las etiquetas H2, H3 y así sucesivamente se añadirán de la siguiente manera:
Seleccionamos las palabras que queremos que sean la etiqueta h2, le damos al botón de "párrafo" y  allí marcaremos la opción "Título 2" y ya tendremos la etiqueta optimizada. Y así con todas las etiquetas más que queramos añadir.

Y hasta aquí el post de hoy, esperamos haber resuelto todas vuestras dudas y que por supuesto os sea un post de mucha utilidad.

Cualquier duda que tengas la podéis dejar en comentarios.

Un beso enorme y nos leemos este viernes. ¡Ah, y Feliz Navidad!