Utiliza heading tags en tu blog

Las heading tags ordenan las publicaciones desde lo más importante hasta lo de menor relevancia, casi todos los buscadores de Internet las toman en cuenta para poder mostrar los mejores resultados en base a las búsquedas que hagan las personas, estas etiquetas indican como debe estructurarse el contenido y que títulos, subtítulos y encabezados son más importantes que otros. En el caso de Blogger tenemos el título, el encabezado principal, el subencabezado y el encabezado secundario.

Por defecto las plantillas de Blogger vienen con las heading tags desordenadas ya que le dan relevancia a cosas que no las deberían tener como los widget y las fechas de publicación de las entradas, esto desde el punto de vista SEO impide que el blog tenga un buen posicionamiento en los motores de búsqueda debido a que es una mala optimización ya que los buscadores muestran los mejores resultados en base a las palabras claves que contienen los títulos, descripciones y encabezados más no por los widget, gadgets y fechas en las cuales se publicó la entrada.

Los encabezados son de mucha importancia para poder tener un buen posicionamiento en los buscadores, más allá de que el contenido sea el rey si el blog no cuenta con un buen SEO trabajado las publicaciones que posea no podrán ser encontrado por las personas, por lo cual se debe optimizar el sitio correctamente y dar un buen orden al texto de las entradas. Blogger no es como WordPress que todo se pueda solucionar en base a diversos plugin que arreglan los encabezados, sin embargo particularmente me gusta hacer todas las modificaciones en el código fuente de la plantilla ya sea que esté trabajando en Blogger o WordPress porque al usar plugins para todo no se aprende nada y de paso desmejora el procesamiento de la página haciendo que su carga sea cada vez más lenta.

Afortunadamente el orden de las heading tags se puede corregir fácilmente ya que no representa un gran problema poder hacerlo, una vez aclarado esto procederé a explicar cómo implementar la mejora: (En este blog la función copiar y pegar esta desactivada por lo cual dejare un cuadro de texto por cada paso a realizar y para poder optar a copiar su contenido debes pulsar Ctrl+C, también recuerda que ante de hacer cualquier modificación en la plantilla tienes que hacer una copia de seguridad por si te equivocas en algo).

Optimiza el título principal del blog

El título principal del blog es importante cuando se está en la página principal pero es menos relevante cuando las personas se encuentran en una publicación del mismo, por lo cual se debe optimizar para que las heading tags estén ordenadas correctamente en base al lugar donde se encuentre el lector.

El título principal del Blogger puede verse en diferentes presentaciones, puede estar: “Detrás del título y la descripción”, “En lugar del título y la descripción” o se puede ver desde la forma: “Colocar la descripción después de la imagen”. Para todas las vistas del nombre del blog existe una optimización diferente, así que presta mucha atención y optimiza el título en base a cual de todas estas tengas:

Detrás del título y la descripción

Si tienes seleccionada esta vista del título debes proceder de la siguiente forma para optimizar el nombre del blog:

1. Debes ir a “Tema” y dar clic en el botón “Editar HTML”.
2. Una vez allí has presiona las teclas “Ctrl+F” y busca div class=’titlewrapper’
3. Te aparecerá esta línea de código dos veces:

<h1 class=’title’ style=’background: transparent; border-width: 0px’>

<b:include name=’title’/>

</h1>

En ambas ocasiones en las cuales te salga debes sustituir esa línea de HTML por esta otra:

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

Si tienes seleccionado: En lugar del título y la descripción o Colocar la descripción después de la imagen

Si tienes seleccionada esta otra vista del título debes proceder de la siguiente manera para poder optimizar el nombre del blog:

1.- Debes ir a “Tema” y dar clic en el botón “Editar HTML”.
2.- Una vez allí has presiona las teclas “Ctrl+F” y busca <!–Show the image only–>
3.- Te aparecerá esto una sola vez:

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

La línea de código HTML que ves en color rojo debes eliminarla y colocar esta otra:

<b:if cond=’data:blog.pageType == “index”‘><h1>
</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 + “_headerimg”‘ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
</a>

Sin imagen en el título del blog

En caso tal de que el título de tu blog no tenga ninguna imagen y sea 100% texto debes seguir los siguientes paso:

1. Debes ir a “Tema” y dar clic en el botón “Editar HTML”.
2. Una vez allí has presiona las teclas “Ctrl+F” y busca <!–No header image –>
3. Te aparecerá esto una sola vez:

<!–No header image –>

<div id=’header-inner’>

<div class=’titlewrapper’>

<h1 class=’title’>

<b:include name=’title’/>

</h1>

</div>

<b:include name=’description’/>

</div>

Ese código HTML debes sustituirlo por este otro:

<!–No header image –>
<div id=’header-inner’>
<div class=’titlewrapper’>
<b:if cond=’data:blog.pageType == “index”‘>
<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>

Si aplicas la optimización señalada anteriormente dependiendo del tipo de vista que tenga el título principal de tu blog, cuando los lectores se encuentre en la página principal el nombre del sitio llevara la etiqueta H1 y los títulos de las publicaciones tendrán la H2, cuando el lector este en una publicación el título de la entrada llevara la H1 y el nombre del blog tendrá la H2.

Dependiendo de la vista que se haya selecciona los títulos se verán bien o no sin tener que tocar el CSS pero en algunos casos estos se salen de proporción y desmejora la calidad visual, si este es tu caso una vez que aplicas la optimización deberás cambiar los estilos de cascada:

1. Busca: “.Header h1 {“ en los estilos y sustituye esa línea por esta otra “.Header h1, .Header h2 {“
2. Busca: “.Header h1 a {“ en los estilos CSS y sustituye esa línea de código por esta otra “.Header h1 a, .Header h2 a {“
3. Una vez que cambies las líneas de estilo mencionadas anteriormente la visualización se verá bien.

El título de la publicación, los encabezados y subencabezados son lo más importante por lo cual debe llevar las heading tags de mayor peso

Lo más importante de cualquier publicación es el título que esta tenga ya que a través de él se puede encontrar la entrada en los buscadores, en pocas palabras allí se encuentran las palabras claves por la cual una persona llega a una entrada del blog y por ese motivo se debe asignar la etiqueta con mayor peso, dicha etiqueta es la “H1”, seguidamente se tienen los encabezados que deben tener la etiqueta “H2” y los subencabezados que deben contener la etiqueta “H3”.

1. Primero se debe iniciar sesión en la cuenta de Blogger y seleccionar el blog que se optimizara.
2. Luego se debe ir a “Tema” y posteriormente tienes que hacer una copia de seguridad por si te equivocas en el proceso.
3. Una vez que hayas hecho la copia de seguridad debes hacer clic en “Editar HTML”.
4. Una vez que estés en el código fuente de la plantilla debes pulsar las teclas “Ctrl+F” y escribir: post-title entry-title

Una vez que escribes la línea señalada anteriormente te saldrá este código dos veces:

<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:elseif cond=’data:post.url and data:blog.url != data:post.url’/>

<a expr:href=’data:post.url’><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

En ambas ocasiones que te aparezcan deberás reemplazarlo por este otro que esta optimizado:

<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 se hace este cambio no se verán bien los encabezados porque los estilos están configurados para el HTML anterior, pero no te preocupes solo debes cambiar dos líneas de lenguaje CSS para que todo vuelva a la normalidad:

1. Busca: h3.post-title, .comments h4 { y sustituye esa línea de estilo por esta otra: h1.post-title, h2.post-title, .comments h4 {
2. Busca: .mobile h3.post-title { y sustituye esa línea de estilo por esta otra: .mobile h3.post-title, .mobile h2.post-title {

Una vez que realices los pasos señalados anteriormente ya tendrás optimizado el Título principal de cada entrada”, los “Encabezados” y los “Subencabezados” de las publicaciones con las etiquetas correspondientes, pero aun no te vayas que todavía falta.

Optimiza los widgets y gadgets de tu blog correctamente

Las plantillas de Blogger por defecto definen los encabezados y cajas de los widgets y gadgets que se encuentran en el header, sidebar derecho, sidebar izquierdo o footer del blog con la etiqueta H2, desde el punto de vista del posicionamiento web esto afecta el raking en los resultados y por tal motivo se debe cambiar la etiqueta que define esto.

1. Debes ir a “Tema” y dar clic en el botón “Editar HTML”.
2. Una vez allí has presiona las teclas “Ctrl+F” y busca <h2><data:title/></h2>
3. Debes sustituir esa línea por esta otra: <h5><data:title/></h5>, tantas veces como aparezca.
4. Luego debes buscar <h2 class=’title’><data:title/></h2> y sustituirla por <h5 class=’title’><data:title/></h5>, tantas veces como aparezca igualmente.

Una vez que realices los cambios habrás bajado la relevancia de los widgets que no influyen en el posicionamiento del blog y les habrás asignado una etiqueta de menor importancia pero que da un orden correcto al contenido del sitio, sin embargo no se verán correctamente los títulos debido al código CSS, así que deberás de igual forma cambiar ciertos estilos:

1. Debes ir a “Tema” y dar clic en el botón “Editar HTML”.
2. Una vez allí has presiona las teclas “Ctrl+F” y busca div.widget &gt; h2, sustituyes ese estilo por este otro div.widget &gt; h5,
3. Busca: div.widget h2.title y sustituye ese estilo por este otro: div.widget h5.title

Baja la relevancia de las fechas de publicación de las entradas

Las fechas de publicación de una entrada no son muy relevantes en el posicionamiento de un blog debido a que las personas buscan información que pueda haber sido publicada en cualquier fecha y por tal motivo estas no son importantes para los motores de búsqueda, por lo cual debes bajar la relevancia de estas que por defecto vienen con la etiqueta H2 e igualmente afectan el raking del blog en Google y otros buscadores.

1. En “Tema” da clic en el botón “Editar HTML”.
2. Una vez allí has presiona las teclas “Ctrl+F” y busca <h2 class=’date-header’><span><data:post.dateHeader/></span></h2> esta aparece dos veces y en ambas ocasiones debes sustituir esa línea de estilo por esta otra: <h6 class=’date-header’><span><data:post.dateHeader/></span></h6>
3. Igualmente debes buscar el estilo CSS y modificarlo para que no se vea mal, busca h2.date-header y sustituye esa línea de código CSS por esta otra por h6.date-header

No es necesario optimizar los encabezados secundarios

Los encabezados secundarios no hace falta optimizarlos debido a que ya tiene asignada por defecto la etiqueta H4 y por tal motivo se debe dejar así, una vez que hayas realizado todas las optimizaciones de heading tags en tu blog el sitio quedara de la siguiente forma: