Hoy vamos a hablar del SEO, que no es la parte más vistosa de un blog, pero que es una de las partes más importantes para que nuestro blog llegue a más gente.

Dentro de eso, me voy a centrar en los cambios que podemos hacer en la plantilla para que nuestro blog sea mejor indexado por los buscadores.

Si queréis ver cómo es indexado vuestro blog podéis hacerlo desde aquí.

Hay dos formas de que un buscador indexe nuestro contenido. Una es la forma clásica, mediante clases, llamada microformats. Otra ha venido recientemente con HTML5, y es el microdata. Actualmente los principales buscadores usan ambas, pero se irá dando importancia a esta última.

Por ahora vamos a centrarnos en la primera, que es la más fácil de aplicar, y que blogger implementa por defecto. El problema es que es muy probable que hayamos borrado ciertas clases, por lo que vamos a recuperarlas y entender por qué están ahí.

Microformats

Nota: A partir de ahora presupongo que en «Plantilla » Edición de HTML» tenéis marcada la casilla «Expandir plantillas de artilugios».

Los microformats son una serie de clases mediante las que indicamos al buscador de qué tipo es nuestro contenido.

Donde podemos empezar a hacer algo es en <div class='blog-posts hfeed'>.
Esa clase hfeed indica al buscador que eso es un feed, para el caso, un blog, (leer más). Básicamente esa clase indica que lo que hay en ese div es el contenido del blog. Por lo tanto, si no está hfeed, el resto de clases que tengamos dentro no valdrá para nada.

Dentro de una clase hfeed podemos poner otros elementos con otras clases:

  • Links con rel="tag". Opcional. Son keywords para indicar la categoría del feed. No nos centraremos en ello aquí.
  • Entrada (hentry). Seguro que esta ya os suena . Dentro tenemos:
    • entry-title. Requerido. El título de la entrada.
    • entry-content. Opcional (pero muy importante).El contenido de la entrada.
    • entry-summary. Opcional. Un resumen de la entrada.
    • updated. Fecha de actualización. Es necesario, pero blogger no nos deja acceder nativamente, y cualquier solución usando javascript no se indexa. Lo recomendado es usar published y updated a la vez.
    • published. La fecha de publicación. Es opcional, pero importante ya que no tenemos la de actualización.
    • author. El autor. Hay que usar también una clase llamada vcard.
    • Link de la entrada con rel="bookmark". Opcional.
    • Etiquetas usando rel="tag".

Para optimizar al máximo nuetro blog, tenemos que hacer lo siguiente (dentro de <b:includable id='post' var='post'>)

hentry

Si tenemos en nuestra plantilla <div class='post'> es necesario cambiarlo por <div class='post hentry'>

entry-content

Si tenemos <div class='post-body'> tenemos que cambiarlo por <div class='post-body entry-content'>. Al igual, <div class='post-title'> por <div class='post-title entry-title'> (aunque mejor si usáramos en vez de div h1, h2...)

class=’updated’

Esto es importante: Los buscadores, si no detectan en cada entrada una abreviatura con la clase updated, marcan la entrada como no válida, y nuestro trabajo será en vano. Por lo tanto, busca abbr class='published' y cambia la clase por class='updated published'.

El autor de la entrada

Ahora buscad <data:post.author/>. Verificad que está en una etiqueta con clase fn y que esa etiqueta está en otra con la clase vcard. Esto le está diciendo al buscador cómo se llama el autor del post. Si hay una etiqueta <a>, verificad que tenga la clase url. Os debería de quedar algo así:


<span class='author vcard'>
<b:if cond='data:post.authorProfileUrl'>
<a expr:href='data:post.authorProfileUrl' class='url fn' title='author profile'>
<data:post.author/>
</a>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

rel=’tag’

Busca <data:label.name>. Ahí es donde se encuentran las etiquetas del post. Aseguraos de que la etiqueta que lo contenga tenga el atributo rel="tag".

rel=’bookmark’

Busca algo parecido a <a expr:href='data:post.url'> y añádele rel='bookmark' si no lo tiene. Esto indica al buscador cuál es el link de la entrada.

Se imaginativo

Si usáis por ejemplo el truco de la entrada anterior, añadid al párrafo class='entry-summary'.

Comprueba el resultado:

Ve a http://www.google.com/webmasters/tools/richsnippets, introduce la dirección de tu blog, y comprueba los resultados.

Si hay algún error en los resultados, coméntalo aquí y te intentaré ayudar a solucionarlo.

Para que tengáis un ejemplo, aquí están los resultados de mi blog para la entrada anterior:

Resultados del blog para http://emiliocobos.net/2012/04/mostrar-la-descripcion-de-las-entradas.html
Nota: Tened en cuenta que los buscadores tardan aprox. 2 semanas en indexar el blog, así que no seáis impacientes