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


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.


qué-son-y-para-qué-sirven

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.


Etiquetas-en-profundidad

- 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.


Consejos-para-optimizar

 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.


como-optimizar-para-blogger

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 {


como-optimizar-etiquetas-wordpress

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!


39 comentarios

  1. Como siempre, muy buenas explicaciones y mil gracias por los consejos para ayudarnos con nuestros blogs, son un detallazo increíble. (Aunque yo soy de las que me pierdo a mitad del camino cuando los intento llevar a la práctica, pero lo leo todo con ilusión jaja). Por cierto, estás nominada en mi blog, belleza! Un besito muyy grande y feliz fin de semana!!!!!

    ResponderEliminar
    Respuestas
    1. Quería decir sólo "semana", pero me ha entrado el ansia vacacional y me he pensado que era viernes ajaja. Besos guapa!!

      Eliminar
    2. ¡Hola guapa!
      Inténtalo, con una copia de seguridad no tienes nada que perder :) Además tu blog seguro que mejorará en cuanto a SEO.
      ¡Muchas gracias por nominarme cielo, no sabes la ilusión que me hace! Te escrito un email ;)
      Y buena semana y fin de semana y todo jeje yo también estoy con las ansias vacacionales
      ¡Un beso enorme guapa!

      Eliminar
  2. Muy interesante, pero yo nunca me entero bien de estas cosas. Cambiando eso en la plantilla es suficiente? O luego cuando se hacen las entradas hay que hacer algo más?

    ResponderEliminar
    Respuestas
    1. ¡Hola Moli!
      No te preocupes es normal si está empezando en esto del HTML.
      Sí con hacerlo una vez en Blogger es suficiente :)
      Un beso enorme guapa

      Eliminar
  3. Super intersante!!besos

    ResponderEliminar
  4. Hola Nerea!
    Estaba esperando este post como agua de mayo jaja muchas gracias por explicarlo y por poner los ejemplos. Lo has explicado genial.
    Me pondré a practicar y a ponerlo en práctica.
    Un besazo enorme!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Lara!
      Me alegro un montón guapa de que te sirva. Pensé que con ejemplos sería más fácil, y como casi todas tenéis blogs de belleza ... ^^
      Dí que sí practica y más practica, para cualquier duda aquí estamos cielo.
      ¡Un beso enorme guapa!

      Eliminar
  5. yo tengo que aprender un poco de esto!!!
    es que voy muy mal con el seo

    ResponderEliminar
    Respuestas
    1. Pues ponte guapa que es muy necesario, en el blog tienes varios post dedicados al SEO y por internet puedes encontrar miles de cosas más :)
      ¡Un beso cielo!

      Eliminar
  6. Muy interesante :) parece más fácil así explicado el html.
    Besitos!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Irene! Me alegro un montón de que te guste, y sobre todo que te resulte útil.
      ¡Mil besitos!

      Eliminar
  7. Muy buenas tus explicaciones aunque a mi me sigue dando miedo tocar el HTML soy muy patosa. Felcies fiestas!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      A mí me pasaba igual, hasta que decidí crearme un blog de pruebas y trastear allí primero :)
      Prueba con eso, seguro que te sirve. ¡Mil besitos guapa!

      Eliminar
  8. Esto me lo apunto para leerlo tranquila estas vacaciones.
    Lo que aprendo contigo....
    Besotes ^^

    ResponderEliminar
    Respuestas
    1. Claro que si guapa, ya verás como te sirve de ayuda :)
      ¡Muchos besotes!

      Eliminar
  9. Madre mía qué jaleo O.o
    Me lo miro mañana o pasado más tranquila, pero desde ya, muchas gracias por toda la información :D
    Besos y Felices fiestas guapa! <33

    ResponderEliminar
    Respuestas
    1. jajaja sii Sandra, al principio puede parecer mucho lío. Pero ya verás que cuando lo leas no es nada :)
      ¡Un beso enorme guapa y Felices fiestas!

      Eliminar
    2. Vale, lo he ido a mirar y ya lo tenía optimizado (menos lo del móvil)
      besos guapa! <33

      Eliminar
    3. ¡Genial Sandra! :) Pues listo entonces, un beso cielo ¡MUACK!

      Eliminar
  10. ¡Qué buena explicación! Ya lo voy a intentar.

    ¡Saludos! ♥

    ResponderEliminar
    Respuestas
    1. ¡Hola Bianca! Claro que sí, ya verás como mejoras en el SEO :)
      Un beso enorme ¡MUACK!

      Eliminar
  11. Ufff que dificil y eso que lo has explicado muy bien... yo con esto no me meto a ver si voy a estropear algo... jajaja
    Besines guapa

    ResponderEliminar
    Respuestas
    1. ¡Hola Nikky! Tranquila, a mí al principio me pasaba igual. Pero te recomiendo hacerte un Blog de pruebas para ir tocando el tema HTML, algún día te aburrirás de ciertos aspectos de tu blog (como todas) y es una pena que te atrevas a cambiarlos :)
      ¡Un beso enorme guapa!

      Eliminar
  12. Me parece un tema muy interesante, pero esto para mí es demasiado complicado.;-)

    Un beso, guapa

    ResponderEliminar
    Respuestas
    1. ¡Hola Joanna! No te preocupes, hay tiempo para todo. Como le dicho a la demás, un blog de pruebas esa la solución para los temas HTML jeje
      ¡Un beso enorme!

      Eliminar
  13. Anónimo23/12/15

    Pues igual me animo a probarlo. Que alegria ver un blog tan bien explicadito en castellano!!

    Besos

    C

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias cielo! :) Claro que sí, inténtalo. Aquí estamos para lo que necesites.
      ¡Un beso enorme!

      Eliminar
  14. Anónimo23/12/15

    Guauuu! la verdad es que no tenia ni idea de que esto existía...y ahora mismo, que acabo de empezar en este mundillo, todo me suena a chino. Así que me voy a guardar esta entrada en favoritos para usarlo en un futuro!

    Gracias por los consejos

    Me quedo por tu blog ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Lo primero muchos gracias por pasarte y por quedarte por aquí :)
      Al principio es normal que todo esto te suene a chino jeje pero ya verás que con el tiempo lo manejas a la perfección.
      Estamos aquí para lo que necesites. Un beso enorme ¡MUACK!

      Eliminar
  15. Anónimo23/12/15

    Hola Nerea!
    Estaba deseando tener un ratito para leer este post, la verdad es que lo he entendido todo perfectamente, ya que el tema de las etiquetas me toco modificarlo todo en una página web, pero en el blog debería de hacer todo lo que nos explicas. Así que en cuanto tenga un rato, después de las fiestas, intentare ponerlo a prueba!
    Muchas gracias por los posts tan útiles, como siempre!
    Un besazo guapa!

    ResponderEliminar
    Respuestas
    1. ¡Hola Laia!
      Entonces no es la primera vez que manejas las etiquetas de encabezado, seguro que no le tienes nada de miedo :)
      En cuanto termines tus vacas y tengas un ratito lo podrás hacer. Ya verás que es muy fácil. Lo primero ahora es disfrutar de tus días libres.
      ¡Un beso enorme cielo!

      Eliminar
  16. Que cierto es lo de que nunca te acostarás sin saber una cosa nueva jaja con el tema del blog cada día aprendo algo nuevo que no sabía ni que existía.
    Me guardo la entrada para hacerlo en un tiempo, cuando me informe un poco más y eso :D Y me quedo por aquí de seguidora, que he estado echando un vistazo y me parece muy útil todo lo que he visto :)

    Un besito!!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Lo primero bienvenida :) Espero que nos sigamos leyendo por mucho tiempo.
      Y sí, llevas toda la razón, nunca te acostarás sin aprender algo nuevo jeje a mí me pasa mucho.
      En cuanto a las etiquetas de encabezado, si tienes alguna duda a la hora de llevarlo a la práctica aquí nos tienes para lo que necesites.
      ¡Un beso enorme!

      Eliminar
  17. Siempre aprendo cositas nuevas y sinceramente, estaba tan perdida en este tipo de etiquetas... Pero lo escribes de manera tan fácil, que son post muy fáciles de leer y entender.
    Felices fiestas para ti y Mr.Alexxa!!.
    Un besito!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Bimba!
      Nos alegramos un montón de que todos estos temas te sean de tanta utilidad :D
      Para cualquier duda que tengas aquí estamos guapa.
      ¡Un beso enorme de parte de los 2, y unas muy muy muy Felices Fiestas a tí tambien!

      Eliminar
  18. Ufff lo veo super complicado para mi jajaja, aunque muy útil y práctico me guardo el enlace para cuando tenga tiempo verlo con mas calma. Un beso.

    ResponderEliminar
    Respuestas
    1. ¡Hola Natalia!
      Tranquila jaja la primera vez que ves algo así es normal de sentirse un poco abrumada. En cuanto pasen las fiestas y tengas un ratito libre, léelo con calma y verás que es muy fácil.
      Para cualquier duda que tenga aquí estamos cielo :)
      ¡Un beso enorme!

      Eliminar



¡Anímate a comentar! Tu opinión es muy importante para mí.

Por eso, cualquier comentario escrito desde el respeto será bien recibido.
Por tanto, nos gustaría aconsejarte, que si además de tu fantástico comentario deseas añadir la URL de tu sitio WEB,
debes "Comentar como: Nombre/URL" así Google no nos castigará y tu comentario no será tratado como SPAM :)

No aceptamos ningún tipo de SPAM ¡Gracias por vuestra comprensión!

© Alexxa 26. All rights reserved.