Optimizar SEO en blogger templates

Este post recopila los puntos que los blogs o webs alojadas en Blogger http://www.blogger.com deberían tener en cuenta como SEO para que los buscadores posicionen en mejores condiciones y repercuta en un aumento de visitas.


■ Ante todo, no hay que perder de vista tener implementados los sitemaps correspondientes a los principales buscadores:

- Enviar Sitemap Bing Webmasters Tools
- Sitemap e indexar con Herramientas para Webmasters
- Sitemap en Yahoo de tu web


Según Wikipedia la definición de SEO es:

El posicionamiento en buscadores o posicionamiento web es el resultado de la recuperación de información en la base de datos de los grandes motores de búsqueda de Internet por el uso de algoritmos de búsqueda en el software.

La tarea de ajustar la información de las páginas que se pretenden hacer aparecer en primeras posiciones de los resultados es conocida como SEO, sigla en inglés de Search Engine Optimization, o sea, 'Optimización para motores de búsqueda'. Consiste en aplicar diversas técnicas tendientes a lograr que los buscadores de Internet sitúen determinada página web en una posición y categoría alta (primeras posiciones) dentro de su página de resultados para determinados términos y frases clave de búsqueda. También es entendido como las técnicas de desarrollo web que tengan como objetivo mejorar la posición de un determinado sitio web por sus páginas en la lista de resultados de los motores de búsqueda que en inglés se identifican como SERPs y forma parte de la jerga de los webmasters hispanohablantes.

La aplicación de técnicas SEO es intensa en sitios web que ofertan productos o servicios con mucha competencia, buscando el posicionar determinadas páginas sobre las de sus competidoras en la lista de resultados (SERPs).

Estrictamente hablando, se posicionan URLs de páginas. Los sitios logran buen posicionamiento como una consecuencia.

Las técnicas SEO pueden ser desmedidas y afectar los resultados naturales de los grandes buscadores por lo que si incumplen las cláusulas y condiciones de uso de los mismos pueden ser consideradas, en algunos casos, como una forma de SPAM, el spamdexing.

Las claves son:


1. Modificar la fórmula en que se muestran a los buscadores los títulos del blog.

En Blogger se muestran como BLOG TITLE: POST TITLE, es decir primero el título del blog y después el título del post.

El siguiente código es el responsable del orden anterior,

<title><data:blog.pageTitle/></title>

Según los responsables de la guía SEO debería reemplazarse por:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<title><data:blog.pageName/> | <data:blog.title/></title>

<b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<title><data:blog.pageName/> : nombre-blog</title>

<b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

• En Cambiar optimizar títulos del blog o web se puede ver más ampliada y detallada esta explicación.




2. META keywords y META description:

META description:
Su objetivo es informar brevemente del contenido de la web. Si aparece en el listado de resultados de los buscadores, puede ser el texto que se muestre como descripción del sitio y una forma de mostrar información.

META keywords:
Por el abuso de ellas hay buscadores que las ignoran, pero otros le otorgan un poco de peso (Inktomi). Por otro lado, es una fórmula para reunir palabras clave que pueden servir para una posterior referencia.



Se indica añadir meta keywords y meta description sólo para la página de inicio, (y no en las individuales porque el sistema no lo permite), con condicionales. Es una fórmula para que cuando usas Sitemap e indexas con Herramientas para Webmasters y entras en Diagnósticos/Errores de rastreo, Google no indique Metadescripciones duplicadas y/o Etiquetas de título duplicadas para las páginas que hayan indexado los buscadores.

Se busca:

<b:skin><![CDATA[/*

ANTES se añade el código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta name="description" content="DESCRIBE-TU-BLOG" />

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5" />

</b:if>

Según esta fórmula en las páginas individuales no habrá etiquetas, por ello Google mostrará una parte del texto que contenga esa página como descripción.

• Más información y específica sobre la META en este enlace y otro que forma la META de manera automática.



3. Encabezados

Las plantillas que conforman nuestros blogs están formados, entre otras etiquetas de HTML, por H1 H2 H3 H4 H5 y H6 . Según este orden los robots advierten que la etiqueta H1 será más importante que la H6, porque suponen que la H1 al ir antes será de mayor importancia que la H3.

El objetivo será usar la etiqueta de encabezado (heading) H1 para los títulos de los posts, (con condicionales), en vez de H2 o H3 como se muestra en las plantillas originales de blogger.

Cambios a realizar:

- Buscar algo similar a

<b:if cond='data:post.title'>

<h1 class='post-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>

Reemplazarlo mediante condicionantes por:

<b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h1 class='post-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/>

<h3 class='post-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>

</b:if>

* ¡Cuidado! Debido a los distintos tipos de plantillas que soporta Blogger hay que tener claro que etiqueta "H" se está condicionando y duplicando.


- Después es necesario cambiar los "post title" añadiendo los distintos códigos ANTES de

]]></b:skin>

Si tenemos una plantilla mínima el código es similar a:

(lo importante son los encabezados)

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}



.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}



.post h3 strong, .post h3 a:hover {

color:$textcolor;

}

Y se reemplaza por:

.post h1, .post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}



.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:bold;

}



.post h1 a, .post h1 a:visited, .post h1 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:bold;

}



.post h1 a:hover, .post h1 strong, .post h3 a:hover, .post h3 strong {


color:$textcolor;

}

o lo que es lo mismo:

.post h3, .post h1 {

.....

}



.post h1 a, .post h1 a:visited, .post h1 strong {

.....

}


.post h1 a:hover, .post h1 strong, .post h3 a:hover, .post h3 strong {
.....

}



Es decir, se trata de buscar las etiquetas .post h3 y agragarle la etiqueta nueva (en forma general) .post h1 quedando de la forma:

.post h1, .post h3 { ....... }

.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited { ....... }

.post h1 a:hover, .post h3 a:hover { ....... }

Buff, ¡¡cuántas formas he usado para decir lo mismo!! (O.o)

4. Modificar la etiqueta de fecha de los posts

En Blogger la fecha del post contiene una etiqueta H2. Según lo explicado en el punto tercero, se le otorga una relevancia no conveniente si se busca que los títulos de los posts sean importantes; aquello en que se fije un buscador.


Por tanto es posible que se encuentre algo similar a:

<h2 class='date-header'><data:post.dateHeader/></h2>

Se sustituye por una etiqueta H de menor jerarquía, o un párrafo P, o un bloque DIV, u otro bloque SPAN :

<h4 class='date-header'><data:post.dateHeader/></h4>

Asimismo se sustituye el CSS que le correponda:

h2.date-header { ....... }

Por:

h4.date-header { ....... }

■ Gracias al Cielo entendí las indicaciones anteriormente expuestas, (¡¡¡yujuuuuuuu!!!), leyendo tres fuentes distintas de información. ¿¿¿Funciona??? Sí, pero hay que tener paciencia con la "variable tiempo".

Magz Network (fuente original)
Me lían o aclaran (-^o^-) ¡Lo que me ha costado entenderlo!: Claudia & J. Miur ¡Merci!