META description en Blogger ¿SI o NO?

Esta entrada no pretende dar una respuesta sino mostrar las consecuencias de las distintas alternativas y permitir que cada uno decida qué hacer ya que en la web se ven soluciones que en realidad no son soluciones y que si bien no provocan errores, sólo funcionarán dentro de determinados contextos lo que provoca que aparezcan comentarios de "no me funciona" sin que haya una explicación razonable.

El tema tiene muchas aristas pero, lo más obvio y la forma más sencilla de verlo es eso que se muestra cuando intentamos compartir un enlace de un blog en Facebook. Lo que normalmente veremos es que se detecta una o más imágenes, el título y dirección del enlace y un resumen de ese artículo. Esto es así en muchos casos pero, no siempre. Si el enlace es de un blog alojado en Blogger, lo que se ve es ... cualquier cosa.

No digo "cualquier cosa" en términos despectivos sino que lo que se verá depende de la forma en que se diseñó la plantilla, de la manera en que se escriben las entradas y del azar.

Hay dos formas básicas de enviar ese tipo de información: usando las etiquetas META description y/o META og:description; la primera, es una etiqueta básica de cualquier página web, se la considera tan importante que se dice que es "obligatoria"; las mismas Herramientas para Desarrolladores de Google abundan en información sobre eso. El problema surge cuando se trata de páginas dinámicas como un blog con decenas o cientos de entradas que, por lógica, deberían tener una etiqueta META description distinta para cada una de ellas.

En Blogger, hacer esto ES IMPOSIBLE porque el sistema no nos provee de un "resumen" de cada entrada. Entonces LA SACAMOS y ¿qué pasará?

Me voy a corregir; en realidad, Blogger si tiene dos datos con esa información pero, no nos sirven y ese es justamente uno de los errores que se ve en muchas publicaciones al respecto.

Blogger nos da dos datos que contienen la dirección URL de la imagen en miniatura extraída de cada entrada (si es que hay una) y un resumen de unos 100 caracteres con las primeras palabras de esa entrada; ambos datos sólo son accesibles dentro del widget Blog, es decir, en el body de nuestra página. Son fáciles de probar; las veremos si, inmediatamente luego de <b:includable id='post' var='post'> o en alguna otra parte de ese includable ponemos esto:

<img expr:src='data:post.thumbnailUrl'/>

<data:post.snippet/>

La existencia de esos datos, que pueden ser útiles para otras cosas, es la que induce al primer error, creer que podríamos usarlos dentro de una etiqueta META. Esto es un error porque si bien no habrá errores visibles si los usamos de este modo:

<b:includable id='post' var='post'>

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

    <meta expr:content='data:post.snippet' name='description'/>

    <meta expr:content='data:post.snippet' property='og:description'/>

    <meta expr:content='data:post.thumbnailUrl' property='og:image'/>

  </b:if>

  .......

en realidad, todas estas etiquetas serán ignoradas y es fácil de probar, bastaría poner textos e imágenes de prueba para ver que nada cambiará ya que esas etiquetas, agregadas al body de la página, serán ignoradas:

<b:includable id='post' var='post'>

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

    <meta expr:content='ESTA ES UNA PRUEBA DE RESUMEN' name='description'/>

    <meta expr:content='ESTA ES UNA PRUEBA DE RESUMEN' property='og:description'/>

    <meta expr:content='URL_alguna_imagen' property='og:image'/>

  </b:if>

  .......

Me olvido de las etiquetas META, no coloco ninguna y hago otra prueba ... el resultado será variable, dependerá de la entrada:

¿Qué es lo que busca Facebook para mostrar como resumen?

Si usamos la herramienta URL Linter, nos lo dice con claridad: toma como resumen el contenido de las etiquetas META colocadas en el head y, si no las encuentra, toma el contenido de la primera etiqueta P que encuentre siempre y cuando el texto sea lo suficientemente largo (unos 120 caracteres de longitud) así que, poner esto, tampoco funcionará:

<p><data:post.snippet/></p>

<p><data:post.body/></p>

y tampoco esto:

<p>

  <data:post.snippet/>

  <data:post.body/>

</p>

No es un problema de ubicación de códigos es que, simplemente, el dato que devuelve data:post.snippet es demasiado corto.

Bueno, dicen algunos, entonces, como en Blogger la etiqueta META description de las entradas es bastante inútil, no las usemos y listo.

A los efectos del resultado en los buscadores, desconozco si eso es razonable o no ya que para los buscadores no es mandatoria sino una sugerencia y lo que ellos interpretan de nuestros sitios es bastante misterioso y cambiante. Lo que sí es totalmente cierto es que si se la elimina para que de ese modo, al compartir un enlace en Facebook se vea un resumen de nuestra entrada, estaremos cometiendo un error porque no siempre será así.

La clave de todo es que lo que se toma para resumir algo es el contenido de la primera etiqueta P y eso, no siempre es parte de una entrada ya que el editor de Blogger escribe códigos distintos cuando formateamos algo, depende del navegador o del tipo de editor que utilizamos.

Ahhh dicen otros, por eso es que las plantillas colocan nuestra entrada en una etiqueta P:

<p><data:post.body/></p>

Tampoco es cierto ya que si dentro de una etiqueta P hay una etiqueta DIV, el resultado es nulo, el navegador no generará esto:

<p>

  <div> ....... </div>

</p>

sino esto:

<p></p>

<div> ....... </div>

<p></p>

También es fácil de probar; escribo:

<p style="background-color:red">

  <div> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</div>

</p>

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

y no veré nada de color rojo.

Es por eso que el resultado es aleatorio; aparecerá "vaya uno a saber qué"; por lo general, algún comentario, el primero cuyo texto sea lo suficientemente largo; o bien algo de la sidebar o cualquier otra cosa salvo que en la entrada coloque una etiqueta P ya que SIEMPRE, será su contenido el que va a a ser resumido.

Como dije, todo esto puede ser probado utilizando la herramienta URL Linter, que es la que nos permite ver los datos reales que son leídos de cada URL ya que, si lo intentamos probar con los botones de compartir o directamente en Facebok, no veremos los cambios porque las direcciones URL son cacheadas y esa herramienta, no sólo nos informa sino que además borra la caché de Facebook.

Si no queremos usarla lo que hay que hacer es agregarle un parámetro a la URL:

http://miblog.blogspot.com/.../miejemplo.html?v=1

cambiando ese numerito por otro, cada vez que queremos ver el resultado de un cambio.

Moraleja: no existe una solución genérica para esto, dependerá del contexto de cada sitio y de cada entrada; mientras Blogger no nos de la posibilidad de conocer ese dato de manera global para que pueda ser utilizado en cualquier parte de la plantilla incluyendo el head, no hay mucho más que hacer salvo que a alguien se le ocurra algo que realmente funcione.