Optimizando las etiquetas h1,h2 y h3 de blogger

Seguimos hablando de SEO y de la plataforma blogger, en anteriores artículos vimos como sacarle jugo a las keyword en la url del blog y a optimizar la etiqueta title del blog, (te recomiendo les des una leída), es el turno de hablar sobre las etiquetas h1, h2, h3, en resumen estas etiquetas delimitan los títulos del blog a diferentes niveles, en blogger la etiqueta h1 es utilizada para colocar el titulo del blog, la etiqueta h2 para la fecha de los artículos y la etiqueta h3 para los títulos de los artículos (por lo menos en la mayoría de las plantillas).


Sabiendo ya como funcionan las etiquetas en blogger, dan poca relevancia a las keywords de los artículos ya que hablando de SEO, la etiqueta h1 engloba las palabras clave o keywords mas relevantes del blog o con mayor peso en el mismo, seguido de la etiqueta h2 que engloba palabras clave menos relevantes que h1 (como una subcategoria) pero mas relevantes que h3 y así sucesivamente hasta el h6.


Tras la explicación anterior, ya nos debimos de haber dado cuenta de que por mas que pensemos en las palabras clave mas relevantes para los títulos de nuestros artículos no sirven de nada ya que son delimitados por la etiqueta h3 y para el SEO pasan hacer de poco relevancia y por tanto si corregimos este pequeño detalle podremos ganar peso ante paginas que nos compiten.


lo primero que debemos hacer es entrar al editor html de nuestra plantilla, expandir la plantilla de artilugios y buscar el siguiente código.-

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

Este trozo de código lo vamos a reemplazar por el siguiente.-

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

Con esto conseguiremos que los títulos de nuestros artículos aparezcan con la etiqueta h1 al mostrar cada articulo por separado, mientras que en la pagina principal del blog aparecerán con la etiqueta h2 y ganaremos mucha relevancia en nuestras keywords, con este cambio el estilo del titulo a cambiado y tendremos que modificar el código Css de la plantilla, busca el selector .post h3, algo parecido al código de abajo.-

.post h3 {
  margin: 10px 0px 20px 0px;
  font-size: 22px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
  display: block;
  text-decoration: none;
  color: #333333;
  font-weight: normal;
}
.post h3 strong, .post h3 a:hover {
  color: #1FA2E1;
}

En donde reemplazaras las etiquetas h3 por h1 para conservar el estilo que tenias en tu blog (o puedes cambiarlo para mejorar la vista de los títulos según tu criterio) y tendrás que crear el código para las etiquetas h2 que puedes pegar después del código anterior, un ejemplo seria el siguiente.-

.post h1 {
  margin: 10px 0px 20px 0px;
  font-size: 22px;
}
.post h1 a, .post h1 a:visited, .post h1 strong {
  display: block;
  text-decoration: none;
  color: #333333;
  font-weight: normal;
}
.post h1 strong, .post h1 a:hover {
  color: #1FA2E1;
}
.post h2 {
  margin: 10px 0px 20px 0px;
  font-size: 22px;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
  display: block;
  text-decoration: none;
  color: #333333;
  font-weight: normal;
}
.post h2 strong, .post h2 a:hover {
  color: #1FA2E1;
}

Con esto terminamos el primer paso, bueno, buscando en varios foros me encontré con la novedad de que la mayoría de las personas que realizan estos cambios lo dejan hasta este punto, pero se les olvida que ya habiendo efectuado dichos cambios, ahora el blog ya cuenta con dos títulos h1 por pagina (el titulo del blog y el titulo del articulo), por que nos preocupamos por esto, es por que en el SEO es importante tener un solo h1 ya que por nombrar a Google le da importancia al primer h1 que encuentra, en este caso el titulo del blog.


Así que manos a la obra, ahora debemos de buscar el siguiente código.-

<h1 class='title' style='background: transparent; border-width: 0px'>
      <b:include name='title'/>
</h1>

y lo reemplazamos por el siguiente.-

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Ahora buscamos el siguiente trozo de codigo, debe de estar unas 10 lineas abajo del anterior.-

<h1 class='title'>
      <b:include name='title'/>
</h1>

Y lo reemplazamos por el siguiente.-

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>

Con estos cambios habremos solucionado el problema, solo queda corregir el codigo Css del selector #header h1 al que solo le agregaremos el selector #header p y quedaría de la siguiente forma.-

#header h1, #header p {
  font-size: 48px;
  color: #333333;
}

Listo, con estos tips ya corregimos el problema de las etiquetas hx en blogger.