Optimizar títulos y otros detalles de Blogger

En uno de los artículos de chicablogger nos cuentan algunas técnicas que nos ayudarán a optimizar nuestro blog para que se posicione mejor en los buscadores. SEO para usuarios de Blogger.com es una guia para ello y muchas de esas sugerencias son sencillas de implementar.

Es cierto que muchos blogs no tienen fines comerciales y por lo tanto, no se preocupan de estos detalles pero, también es cierto que aún así, no nos hará daño tratar de mejorar u ordenar algunas cosas.

Obviamente, lo primero es generar un sitemap correcto usando las Herramientas para desarrolladores de Google y no dejar de lado otros buscadores como Yahoo o Bing.

1. La etiqueta TITLE que vemos en el HEAD de nuestra plantilla es fundamental y en Blogger es sencillo optimizarla, ya sea con un simple cambio o con cambios más complejos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

En el mismo sentido, el uso de la etiqueta Canonical sigue siendo recomendada por todos los buscadores al igual que el uso adecuado de las etiquetas META.

Hasta ahí lo que tal vez ya sabíamos pero el artículo habla de algunas cosas más.

2. Las etiquetas META description y META keywords son un problema. La primera es una descripción del sitio y la segunda, una serie de palabras que ayudan a que los buscadores identifiquen el contenido y lo indexen mejor. En ambos casos, Google recomienda que se diferencien las descripciones de cada página ya que utilizar descripciones idénticas para todas las páginas de un sitio es inútil:

"Si es posible, cree descripciones exactas de la página concreta. Utilice descripciones del sitio en la página principal o en otras páginas generales y descripciones concretas de página en todas las demás. Si no tiene tiempo de crear una descripción para cada página, priorice el contenido: cree por lo menos una descripción de las URL más importantes como, por ejemplo, la página principal y las páginas más visitadas."

¿Qué significa esto? Que cada página debería tener una etiqueta META diferente y eso, en Blogger, es prácticamente imposible. Por eso es que si usamos un sitemap y miramos el apartado Diagnóstico | Estadísticas de rastreo, nos encontraremos con advertencias como: Metadescripciones duplicadas y Etiquetas de título duplicadas para tantas páginas como hayan sido indexadas.

No es que esto signifique un "error" que impida que el sitio sea indexado, significa que podría estar mejor y para esto, la sugerencia es que sólo se añadan esas etiquetas META en la página de inicio y que no se incluyan en el resto. Para ello, deberíamos usamos códigos condicionales:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <meta name='description" content='el texto con la descripción del sitio ... ' />
  <meta name='keywords' content='palabra1, palabra2, palabra3, ..., palabraN' />
</b:if>

Pero, ¡eso significa que en las páginas individuales no habrá etiquetas! ¿qué pasa entonces? Lo que dice Google es que, de no existir, lo que se utiliza es parte del texto del contenido de la página y se muestra ese texto como descripción.

3. Un punto clave de las plantillas es el uso de las etiquetas de títulos. La existencia de H1 H2 H3 H4 H5 y H6 como etiquetas HTML diferentes no es un problema de tamaños de letras sino de jerarquías. Los buscadores leen y buscan esa jerarquía y dicen: Si el administrador colocó H1 a un título es porque ese título es IMPORTANTE y si usó H3 es menos importante y acá no importa el tamaño de la fuente que es sólo un efecto visual, es el tipo de etiqueta a usar la que manda.

Así que H1 debería ser la etiqueta a utilizar en los títulos de las entradas de las páginas individuales; es decir, en el home del sitio, el título relevante es el nombre del blog pero en las páginas individuales, el título relevante es el del post en si mismo. Por eso, deberíamos condicionarlo ya que, por defecto, el título de las entradas es H2 o H3.

Lo normal es que el título se muestre así:

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

Y deberíamos condicionarlo de este modo:

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

Por supuesto, estos cambios deberán hacerse con prudencia, mirando bien qué códigos tenemos ahora porque pueden variar con las distintas plantillas. Lo importante es entender que lo que hacemos es poner una condición y duplicar el código actual, uno con H1 y el otro con H2 o H3. También deberemos agregar las propiedades de estilo adecuadas pero no hace falta duplicarlas. Buscamos todas las referencias que suelen estar en a .post h3 y le agregamos la nueva etiqueta:

.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 { ....... }

4. Un detalle que me comentaba SpamLoco y que también es importante es que en las plantillas de Blogger, la fecha de las entradas utiliza H2 lo cual les da una relevancia que no deberían tener:

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

En este caso, podemos cambiar esa etiqueta por otra cualquiera, un título menor como H4 o un párrafo P o un bloque DIV o SPAN:

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

Y también buscamos las propiedades CSS y cambiamos las referencia:

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

por la nueva:

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

Por último, también es Alejandro el que sugiere usar las llamadas etiquetas semánticas para resaltar los texto que contienen las entradas cuando estos textos son relevantes: <strong> <strong> y <em> <em> son las más comunes pero hay otras como <code> </code>, <kbd> </kbd>, <dfn> </dfn>, <acronym> </acronym> y <address> </address> (más información).