Tutorial: Cómo optimizar los encabezados al máximo (H1, H2, H3 y H4)

Marketing Caribe

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
6 Ene 2020
Mensajes
918
La importancia de los encabezados para el posicionamiento (SEO on-page)
Justo por encima de este párrafo tenemos un encabezado, al usar una tipografía de letra mayor habrá llamado tu atención, mucho más que las líneas que estás leyendo ahora. Piensa que un buscador, cuando rastree nuestro blog, tendrá un comportamiento similar al tuyo.

El orden y utilización de los encabezados no sólo sirve para organizar y estructurar nuestras entradas, sino que además ayuda a los buscadores a identificar los elementos importantes de nuestro contenido. Cuando los motores de búsqueda acceden a nuestra entrada, entienden que las palabras que están dentro de un encabezado tienen mucha más importancia que el resto, le dará más peso a los encabezados de primer nivel (H1), luego a los de segundo (H2) y así sucesivamente.



Por todo esto, es muy importante el uso de encabezados en nuestras entradas. Ahora bien ¿qué ocurre cuando utilizamos el editor de entradas de Blogger?

Blogger: Seleccionar tipo de encabezado
Figura 1: Selección del tipo de encabezado, desde la edición de una entrada en Blogger


Cuando utilizamos la herramienta de edición de entradas de Blogger y seleccionamos "Encabezado", por ejemplo, en función de la plantilla que estemos usando se generará una etiqueta HTML de encabezado H2, H3, H4, etc. La mayoría de plantillas no están optimizadas para SEO en Blogger, sin embargo, comprobarás que hacer los cambios oportunos para que sea óptimo para los buscadores es muy sencillo.

Además de los encabezados del contenido de nuestras entradas, el resto de nuestro blog (cabecera, barra lateral, pie de página), también utiliza etiquetas de encabezado HTML definidas en la plantilla.



Lo que vamos a hacer a continuación, es optimizar todas las secciones de nuestra plantilla Blogger donde aparecen las etiquetas de encabezado: H1, H2, H3, etc. Arremángate, pues vamos a toquetear un poco la plantilla. Antes, para abrir boca, fíjate en nuestro objetivo, una plantilla blogger con los encabezados optimizados para SEO:

Plantilla Blogger con encabezados optimizados para SEO
Figura 2: Plantilla con encabezados optimizados para SEO




Ésta es la estructura que tendría una plantilla de dos columnas optimizada para SEO. Entre paréntesis se especifica el nivel de etiqueta de encabezado HTML que se utiliza para cada bloque. Con esta estructura se realza el titular de la entrada (H1) y los subtitulares del contenido (H2 hasta H4). Se le quita relevancia a los encabezados de los gadgets (h4).
Cómo optimizar los encabezados de las entradas para SEO
Cómo optimizar los encabezados de las entradas
Figura 3: Optimizar encabezados de entradas




De todos los encabezados de nuestro blog, los que se encuentran en el contenido de nuestras entradas son los más importantes, tanto para el lector como para el posicionamiento en buscadores.

El título de la entrada es, sin lugar a dudas, el más importante, la estrella. Así que le reservamos la etiqueta de mayor peso: H1. La mala noticia es que la gran mayoría de plantillas utilizan H3, incluso las de por defecto de Blogger; la buena noticia es que es muy fácil cambiar nuestra plantilla para que use H1.

Tal y como se ve en la figura 1, desde el editor de entradas podemos seleccionar: "Encabezado", "Subencabezado" y "Encabezado secundario". Haremos corresponder estos encabezados con las etiquetas H2, H3 Y H4, respectivamente.

A Google le va a encantar éstos cambios, eso sí, cuando redactes una entrada debes ser ordenado y estructurar el contenido utilizando los niveles de encabezado que hemos definido. No es necesario utilizar todos los niveles, pero sí que es una buena costumbre utilizar dos como mínimo.

Estos son los pasos a realizar, para optimizar los encabezados de las entradas:
Recuerda, antes de hacer cualquier modificación, es recomendable realizar una copia de seguridad de tu plantilla. En Blogger > Plantilla > "Crear/Restablecer copia de seguridad".
  1. Nos vamos a la edición del código HTML de la plantilla
    Plantilla > Editar HTML
  2. Buscamos "post-title entry-title" (CTRL+F, "post-title entry-title") y encontraremos algo como ésto:
  3. HTML:
    <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>
    </b:if>
  4. Sustituimos el código anterior por este otro, para darle mayor relevancia a los titulares de las entradas
  5. HTML:
    <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>


  6. Vuelve al paso 2 hasta que no encuentres más secciones "post-title entry-title"

Normalmente las autores de plantillas utilizan la clase CSS "entry-title", que es la reservada precisamente para el titular de la entrada. Otro tipo de "autores" no utilizan el estándar, por lo que tras aplicar los cambios anteriores podrías ver un poco raro el titular de la entrada (si usas la plantilla simple de Blogger, estarás en este caso).

Si tras los cambios no ves el título de la entrada correctamente, sigue estos pasos:
  1. Buscah3.post-title, .comments h4 {
    y sustutúyelo porh1.post-title, h2.post-title, .comments h4 {
  2. Busca.mobile h3.post-title {
    y sustitúyelo por.mobile h3.post-title, .mobile h2.post-title {
Optimizar los encabezados de la barra lateral (sidebar) y pié de página (footer)

Cómo optimizar los encabezados del sidebar y footer
Figura 4: Optimizar encabezados de sidebar y footer

La mayoría de plantillas blogger utilizan la etiqueta H2 para definir el encabezado de los gadgets/widgets del sidebar y el footer.

Puesto que estos titulares no suelen ser importantes para el posicionamiento de las entradas, los sustituiremos por la etiqueta H4, esto hará ganar mucho más peso a los encabezados del contenido, por lo que nuestras entradas estarán mejor optimizadas para el SEO.

Cómo optimizar los encabezados de la barra lateral (sidebar)
Figura 5: Ejemplo de encabezados en un sidebar

  1. Nos vamos a la edición del código HTML de la plantilla
    Plantilla > Editar HTML
  2. Busca todas las apariciones de:<h2><data:title/></h2>
    y sustitúyelo por:<h4><data:title/></h4>
  3. Busca todas las apariciones de (puede que tu plantilla no tenga apariciones de este código, es normal):
    <h2 class='title'><data:title/></h2>
    y sustitúyelo por:
    <h4 class='title'><data:title/></h4>
Si tras el cambio anterior, no se visualiza correctamente los estilos, busca en el código "h2 {" y sustitúyelo por "h4 {", ahora se te verá como antes.

Cada vez que crees un nuevo gadget, desde el modo diseño de Blogger, se añadirá por defecto una etiqueta <h2>, por lo que recuerda volver a hacer este proceso si quieres mantenerlo optimizarlo.
Optimizar los encabezados de la cabecera (header)

Cómo optimizar los encabezados de la cabecera de Blogger
Figura 6: Optimizar encabezados del header

Este paso es opcional, puesto que hay plantillas que no muestran el título y descripción del blog en la cabecera. Si accedes a "Blogger > Diseño" y editas el gadget de la cabecera, te aparecerá algo como ésto:

Configurar cabecera desde el modo diseño de Blogger
Figura 7: Configurar cabecera desde el modo diseño de Blogger

Tienes marcado "En lugar del título y la descripción"
Si tienes seleccionada la opción "En lugar del título y la descripción" (como aparece en la imagen) o "Colocar la descripción después de la imagen", sigue estos pasos:

  1. Edita la plantilla en modo HTML
    Plantilla > Editar HTML
  2. Busca este fragmento en el código (puedes buscar la primera línea "<!--Show the image only-->"
  3. HTML:
    <!--Show the image only-->
    <div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </a>
    <!--Show the description-->
    <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
    <b:include name='description'/>
    </b:if>
    </div>

  4. y sustitúye solo lo que está resaltado por esto otro:<b:if cond='data:blog.pageType == &quot;index&quot;'>&lt;h1&gt;</b:if>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </a>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>&lt;/h1&gt;</b:if>
De esta forma si se está en la página principal, por ejemplo, el logotipo tiene H1 y el título de las entradas H2. Cuando estemos en una entrada, el logotipo no tendrá ningún tipo de encabezado y el título de la entrada H1. Justo lo que buscábamos.
No tienes imagen de cabecera
Si no tienes imagen de cabecera sigue estos pasos:
  1. Edita la plantilla en modo HTML
    Plantilla > Editar HTML
  2. Busca este fragmento en el código (puedes buscar la primera línea "<!--No header image -->"
  3. HTML:
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>


  4. y sustitúyelo por este otro<!--No header image -->

  5. HTML:
    <div id='header-inner'>
    <div class='titlewrapper'>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <h1 class='title'><b:include name='title'/></h1>
    <b:else/>
    <h2 class='title'><b:include name='title'/></h2>
    </b:if>
    </div>
    <b:include name='description'/>
    </div>
Tienes seleccionada la opción "Detrás del título y descripción"
Si tienes seleccionada la opción "Detrás del título y la descripción" sigue estos pasos:
  1. Edita la plantilla en modo HTML
    Plantilla > Editar HTML
  2. Busca este fragmento en el código (puedes buscar la primera línea "div class='titlewrapper'"
    <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1>
    </div>
    y sustituye el código resaltado por este otro<b:if cond='data:blog.pageType == "index"'>
    <h1 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h1>
    <b:else/>
    <h2 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h2>
    </b:if>

Con este nuevo código, el título del blog tendrá la etiqueta H2 al mostrar una entrada o página y etiqueta H1 si se está en la página principal o en una categoría (índice).
Si observas que los estilos no se visualizan como antes, deberás modificar también los estilos CSS para que se muestre correctamente la etiqueta H2 en la cabecera .
  1. Localiza la línea ".Header h1 {" en el código y la sustituyes por ".Header h1, .Header h2 {"
  2. Localiza la línea ".Header h1 a {" en el código CSS y sustitúyela por ".Header h1 a, .Header h2 a {"
  3. Ahora deberías visualizar el título del blog correctamente
Eliminar encabezados de las fechas en Blogger
La mayoría de las plantillas de Blogger tienen la costumbre de utilizar la etiqueta de nivel H2 para mostrar las fechas, desde un punto de vista del posicionamiento y SEO ésto no es muy bueno, ya que estaremos dando el mismo peso a la fecha de una entrada que a un subtitular, por ejemplo.

Pensaba crear una entrada específica para resolver este problema que me han comentado muchos, pero creo que es mucho más práctico y claro incluirlo en este artículo, donde está todo lo que tenemos que hacer en blogger para optimizar los encabezados o etiquetas H1, H2, H3 ,H4.

Bueno... ¿manos a la obra?

Localiza en tu plantilla TODAS las apariciones de:
HTML:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
y sustitúyelo por esto otro:
<b:if cond='data:post.dateHeader'>
<h4 class='date-header'><span><data:post.dateHeader/></span></h4>
</b:if>

¡Listo! Hemos bajado el nivel de los encabezados de las fechas a H4, el mismo que tienen los encabezados de lo gadgets. Es, sin duda, la mejor opción para optimizar el posicionamiento de nuestras entradas. ¿Sabes lo mejor?... a partir de ahora no tendrás que hacer nada más, hasta que vuelvas a cambiar de plantilla.

Conclusiones
Hemos aprendido a optimizar los encabezados en Blogger para SEO, haciendo pequeñas modificaciones en la plantilla.

Lo bueno de todo esto, es que una vez hechos los cambios, sólo tendremos que preocuparnos por añadir contenido de calidad. Nuestra plantilla hará el resto, puesto que los encabezados los tenemos optimizados para el posicionamiento en buscadores.

En el próximo artículo, te mostraré todas las posibilidades de optimización del título del blog (title). Daremos otro paso más para tener una plantilla perfectamente optimizada para SEO en Blogger.
 
Última edición:

silver44

Beta
Diseñador
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
28 Jul 2016
Mensajes
138
gracias por la información. muy buena
 

alexxeg

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
24 Dic 2017
Mensajes
298
muy bueno el tuto, gracias por compartir a favoritos :D
 

Heisber

VIP
Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
10 Abr 2017
Mensajes
335
Tremendo aporte, como quién dice.

Este conocimiento previo sobre los títulos y subtítulos de los artículos es muy interesante para el SEO y el posicionamiento deuna página, mi pregunta es ¿Aplica ese mismo factor principal en Blogger como en WordPres? Claro, creo que la respuesta es un rotundo SI, perome gustaría su confirmación.


Me funcionará muchísimo, gracias.✅🚀

AGREGADO A FAVORITOS. 🆒
 

Ricardo Smeja

Alfa
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
¡Usuario con pocos negocios!
Desde
21 May 2020
Mensajes
26
Guardar para estudiar.. Gracias amigo!
 

Arriba