Marcado de datos con Opengraph para Facebook
A todos nos ha pasado alguna vez que al crear un FacebookAds, o simplemente al compartir una noticia de nuestro blog, una página web o cualquier otra URL en la red Facebook, vemos con desesperación que la imagen que el bot de FB selecciona nada tiene que ver con lo que hemos publicado o lo que desearíamos que se viese; aunqeu la solución más fácil es subir nuestra propia foto al mismo tiempo que se comparte el contenido, FB también ofrece un lenguaje de marcado específico para poder hacerlo de forma automática: el Opengraph (tamibén algunas herramientas y una API).
Gracias a esto, podremos "forzar" a Facebook a que muestre lo que nos conviene con estas metatags, algo absolutamente crucial en el caso en el que lo que vayamos a compartir sea un anuncio de FB, del que necesitaremos un resultado óptimo. Estas metatags habrán de colocarse en el <head> de nuestro website:
<meta property="og:title" content="Título de la página o del anuncio" />
<meta property="og:description" content="Descripción; si es para publicidad que sean aprox 40 caracteres" />
<meta property="og:image" content="http://www.dominio.es/imagen-de-600x314px-formato-1x1'91.jpg" />
<meta property="og:url" content="http://www.dominio.es" />
<meta property="fb:app_id" content="Pon aquí tu ID, que verás al compartir" />
Y con esto, obtendremos un anuncio perfecto, con todos los datos controlados por nosotros mismos en vez de por el bot de FB, que a veces no anda muy fino ;)
Para comprobar que todo esté correcto, no dudes en usar su propia herramienta de comprobación, que te mostrará no sólo lo que hasta ahora FB tiene en su caché (boton rodeado en rojo en la imagen), sino que podrás refrescarla para ver exactamente lo que estás haciendo y enviando (botón verde en la imagen).
Por cierto, las imágenes para compartir en anuncios deberían ir en formato 1 a 1,91, es decir, si miden de ancho 600 pixeles, de alto que midan 314 pixeles; con eso quedarán perfectas, sin recortes inesperados
Claro que si estás usando un CMS estándar como Joomla o Wordpress, hay plugines ya disponibles para estas tareas, que sustiturán los datos que veías en el código de aquí arriba por el contenido concreto de cada una de las entradas de tu web o blog, cuando quieras compartirlas.
Y si lo que estás usando es un CMS tipo ExpressionEngine, solo tendrás que colocar las tags adecuadas en vez de los datos y el sistema se encargará de renderizarlas correctamente cada vez que esa página sea visitada y compartida por un usuario o por tí mismo ;)
Atribución: la imagen es original de Facebook. Para escribir este post obtuve (muy buena) información en oloblogger.com, vagabundia.com, jonsegador.com y, por supuesto, en la web oficial del proyecto Opengraph donde podrás acudir tú también para ampliar info sobre el particular ;)
