Uno de los problemas que quizás me han consultado más en estos años ha sido el de la irregularidad del contenido que aparece al compartir un enlace de un sitio web en Facebook.
En unas ocasiones el asunto era que las imágenes candidatas (seleccionables) estaban poco o nada relacionadas con la entrada, viéndose un banner, un avatar de un comentarista o cualquier otro gráfico que aparecía en la dirección de destino y que no era en ningún caso alguno de los que nosotros habíamos incluido en el post para ilustrar su contenido.
En otras el problema simplemente era que la miniatura salía muy pequeña, cuando las publicaciones de otros sitios mostraban imágenes más grandes sin problemas, ocupando todo el ancho de la columna central de los muros.
La verdad es que casi siempre respondía que no sabía el motivo de que ocurriera eso, pues tras muchas pruebas y pusiera lo que pusiera en la plantilla, la decisión de Facebook de colocarnos una imagen u otra parecía un poco azarosa y si a eso le añadimos que en ocasiones el título o el resumen de texto también era "raro", descubrir el patrón que haría que todo fuera bien no estaba a mi alcance.
Pero el motivo de esta supuesta aleatoriedad es que hay al menos dos factores que conjugados son los que determinan esto y si actuamos adecuadamente en uno y en otro no, los resultados no serán normalmente los que buscamos. Por tanto la solución está en hacer ambas cosas bien. Son las siguientes:
1. Marcado de datos con Opengraph
Por una parte está lo esencial, elmarcado de datos. Con esas marcas es como indicamos a los robots de los buscadores y redes sociales qué elementos de nuestro contenido representan datos interesantes para ellos y también la manera en que los etiquetamos según su tipo. Facebook usa su propio protocolo para esto y es el llamado Opengraph, que incluye además de este marcado semántico algunas utilidades para publicadores y una API para desarrolladores.
De esta manera, para indicar a Facebook qué título, imagen y resumen de texto debe mostrar en su red al compartir un enlace nuestro, lo primero que tenemos que incluir son unas meta como estas después de la apertura del <head> y antes de la etiqueta skin:
<!-- METAS FACEBOOK -->
<meta content='Compartir tus posts en Facebook con la imagen correcta' property='og:title'/>
<meta content='http://1.bp.blogspot.com//s640/miniaturasfacebook.jpg' property='og:image'/>
<meta content='Cómo conseguir que al compartir un enlace de tu web o blog, Facebook muestre los datos sobre título, imagen y resumen de texto que tú desees' property='og:description'/>
Como veis las meta incluyen una propiedad autodescriptiva (en inglés) con el prefijo og: (OpenGraph) y sólo se trata de poner el contenido y la marga og:title, og:image uog:description, según el contenido del que se trate.
Pero claro, esto no es cuestión de estar escribiéndolo manualmente para cada entrada personalizando título, imagen y resumen, así que por ejemplo en Blogger, lo podemos hacer mejor echando mano de las variablesdata. Sería así:
<!-- FACEBOOK -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
El título del post existe siempre, pero la imagen obviamente sólo saldrá si el post contiene alguna. Igual pasa con la descripción si no tenemos grabada ninguna para la entrada, sólo que en ese caso Facebook tomará como resumen aquel texto que su algoritmo le dicte.
¿Y dónde se graba esa descripciónpara controlarla nosotros? Pues es indivicual para cada post y al igual que las etiquetas las encontramos en Blogger en el editor de entradas, la descripción está en un menú a la derecha titulado Configuración de la entrada ¿Os suena haber visto una opción llamada Descripción de búsqueda? Pues esa es la que hay que rellenar. Y no sólo para Facebook sino que también es más que recomendable grabarla de cara a lo que muestran los buscadores sobre nuestros enlaces.
2. Tamaño de las imágenes originales
Este es el otro factor de los dos que os comentaba al principio y que hacen que por mucho que marquemos adecuadamente, a veces las cosas no salgan como queremos.
Al igual que ocurre desde hace unos dos meses con las imágenes en Google Plus, Facebook sólo muestra como elegibles aquellas imágenes que a criterio de su algoritmo tienen un tamaño adecuado. Además esto no ocurre de siempre, sino que ha ido evolucionando a lo largo del tiempo y por eso lo que hace tiempo os funcionaba bien, ahora quizás ha dejado de hacerlo.
Por tanto, si lo del marcado lo tenéis bien, no os calentéis la cabeza. La única solución 100% efectiva es usar imágenes en vuestras publicaciones de al menos 600x315 píxeles para que Facebook la escoja como primera opción. Esta debe ser la pauta para al menos la primera imagen de cada post.
La captura anexa tomada del propio apartado de ayuda de Facebook ilustra y explica esto. Recomiendan que sean de 1200x650, pero esto para la mayoría de casos parece un excesivo e innecesario peso.
Y como para Google+ dijimos que el mínimo era 506px, ya es fácil deducir que para cubrir este tema en esas dos redes lo óptimo sería superar los 600px. Y ojo que Facebook es un poco caprichoso y requiere también una proporción mínima de 1,91:1 para no recortárnoslas. Se trata de imágenes apaisadas y teniendo en cuenta que el mínimo es de 600, de ahí se deduce la altura mínima de 315px.
En un principio, si el tamaño es menor pero suficiente (no sabría decir cual es el mínimo) Facebook nos mostrará igualmente la imagen marcada pero lo hará con un recorte cuadrado presentado a la izquierda del resumen de texto.
Demora en la actualización de datos
Otra cosa que no es relevante pero que también nos marea a veces un poco es que Facebook tiene algún tipo de demora en la actualización de estos datos y aunque lo hayamos hecho todo bien, podría mostrarnos temporalmente los datos marcados mal. Esto no lo he podido comprobar pero en algunos sitios he leído que hasta tres días y que incluso se actualizarán tras ese tiempo los datos de los posts ya publicados en Facebook con anterioridad. Esto último ya me suena un poco raro, pero es cuestión de comprobarlo.
Variante. Mostrar una imagen fija en portada
A algunos le puede interesar mostrar siempre una imagen fija con el logo del sitio o alguna imagen similar y para ello no hay más que incluir en lameta og:image directamente la dirección de esa imagen. Pero si lo que queremos es mostrar una cosa cuando se comparte la dirección de la página principal, páginas estáticas y de navegación, y otra en las entradas, entonces ya tenemos que echar mano de condiciones. Para Blogger sería así:
<!-- FACEBOOK -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL_IMAGE_PORTADA' property='og:image'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
Comprobar que todo lo hicimos bien
Comenté antes que a veces hay una demora entre que nosotros marcamos y Facebook reacciona, por lo que ¿cómo podemos saber si los cambios introducidos en nuestra plantilla están correctos?
Pues para ello usaremos esta herramienta que es un sencillo depurador en el que introducimos una dirección y se nos indica con pelos y señales todas las marcas OpenGraph que Facebook leer en ella: Developers Object Debugger
Más información en Facebook:Sharing best practices (Ver apartado 4. Optimize your image sizes to generate great previews).
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
No hay comentarios.:
Publicar un comentario