Con el auge del marketing digital es cada vez mayor la necesidad de compartir nuestras webs o productos, grandes o pequeños,  a través de todas las plataformas posibles. Sin embargo esto no resulta a veces como esperábamos. A veces compartimos una web en Facebook solo para descubrir que la imagen que aparece …

Definitivamente no era la imagen que queríamos compartir

¿Qué pasó?¿Por qué Facebook comparte esa foto en el link?

Deducirlo no fue complicado. Facebook hace un scrape del link buscando todos los <img> tags que pueda encontrar y te permite elegir entre los que haya. Y lo importante es que solo busca los <img> tags, no las imágenes que puedan haber sido vinculadas como background-image desde su CSS. Esto debería ser obvio, ya que jamás deberían colocar en un background-image un contenido.

En ese momento lo primero que me planteé fue un hack sencillo y obvio, ya que muchos de nuestros posts no contienen imágenes (intentamos cambiar eso para quienes usan RSS readers) lo que puedo hacer es incluir una imagen default en todas las webs y esconderla… En cuanto dije esto en voz alta me di cuenta de la pésima idea que era. No voy a hacer que mis usuarios tengan que descargar data extra por que si, no tiene ningún sentido. Así que opté por la segunda solución:

 

Oh sorpresa, no encontré nada al buscarlo en español… así que vamos a resolverlo.

¿Que es Facebook Open Graph?

Facebook introdujo Open Graph en el 2010 para permitir una mejor integración entre las páginas web y Facebook, al permitir a las webs interactuar con Facebook como si se tratasen de objetos graph enriquecidos, los cuales tienen la misma funcionalidad que los objetos facebook.

En simplificado esto significa que es posible tener algo de control sobre la información que nuestra web comparte con Facebook al ser compartida, likeada, etc.

Para que esto sea posible, es necesario agregar ciertas etiquetas <meta> a nuestra web.

¿Cómo lo hago?

En muchos posts o foros veremos que sugieren agregar a nuestra etiqueta <html> distintas propiedades:

<!-- un modo -->
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:og="http://ogp.me/ns#"
 xmlns:fb="https://www.facebook.com/2008/fbml">
<!-- Otro modo sugerido -->
<html xmlns:og="http://ogp.me/ns/fb#" xmlns:fb="http://ogp.me/ns/fb#">
<!-- en incluso otro -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

Cuando los probé, todos funcionaban, pero me parecían sospechosos, anticuados… recordando que Facebook ha actualizado su Open Graph API a la versión 2.0, decidí quitarlos y ver si funcionaba, total, HTML5 ya está aquí! Oh sorpresa…funcionó. Así que al parecer no es necesario. Recorrí la documentación sin encontrar tampoco nada al respecto de propiedades en la etiqueta <html>. Así que asumiré que son propiedades deprecadas.

Los meta tags actualizados (28.05.2015)

En general todos los Open Graph Tags funcionan de la misma forma

<meta property="og:{tagName}" content="{tagValue}"/>

Title property, og:title

Como se deduce del nombre, determina el nombre de la web que se muestra en el post de Facebook. Si Facebook no encuentra este property, utilizará el tag <title>

<meta property="og:title" content="¿Cómo controlo Facebook Open Graph?"/>

Url property, og:url

Este property nos permite determinar una url canónica para nuestra web.

<meta property="og:url" content="https://www.decodigoyalgomas.com"/>

Image property, og:image

Este tag define qué imagen aparece en el post de Facebook al ser compartido el link de la web.

La imagen ideal para resaltar en Facebook es de 1200px por 627px (ratio 1.91/1). De esta manera resaltamos el post frente a los que contienen imágenes pequeñas, solo recuerda no pasar del límite de 5MB.

<meta property="og:image" content="http://athelasperu.com/decodigo/wp-content/themes/codigo/assets/fb_image.png" />

Type property, og:type

Define que tipo de objeto estamos compartiendo, la documentación de Facebook nos lista todas las opciones. website es el default si es que no lo incluimos.

<meta property="og:type" content="blog" />

Description property, og:description

Muy similar al <meta name=”description”> tag, Controla el texto que aparece en el cuadro descriptivo de un post de Facebook.

<meta property="og:description" content="Blog sobre Python, JavaScript, Flask, HTML, CSS, WordPress, desarrollo web y programación, mantenido por los fundadores de Athelas Perú" />

Locale property, og:locale

El idioma del link compartido, el default es en_US. se puede usar og:locale:alternate para definir varios idiomas si nuestra web soporta internacionalización.

<meta property="og:locale" content="es_PE" />

Site name property, og:site_name

Permite que Facebook asocie un nombre con tu página web, es distinto que el og:title.

<meta property="og:site_name" content="De código y algo más" />

Facebook App ID property, fb:app_id

Conecta tu web con Facebook Domain Insights, de esta manera podrás analizar el tráfico que Facebook lleva  a tu web.

<meta property="fb:app_id" content="id_de_tu_fb_app" />

Otros Properties

Escapa de los alcances de este artículo el explicar todos los properties que Facebook Open Graph nos ofrece, pero esta es la lista por si les interesa buscarlos y leer su documentación.

  • og:video
  • og:determiner
  • og:updated_time
  • og:see_also
  • og:rich_attachment
  • og:ttl
  • og:restrictions:age
  • og:restrictions:country
  • og:restrictions:content
  • fb:admins
  • fb:profile_id
  • og:audio
  • ContactData
  • GeoPoint
  • Quantity

 

Open Graph Object Debugger

Esta herramienta de Facebook nos permite testear nuestros links, ver como aparecerán nuestros posts de Facebook, pero más importante aún, los cambios no se registran hasta haber forzado a Facebook a recolectar nuevamente nuestra data presionando Fetch new scrape information.

 

Plugins de WordPress

Como desarrolladores web en WordPress recomendamos WordPress SEO by Yoast como el mejor plugin gratuito para gestionar los tags de Open Graph desde el CMS, sin embargo existe un Plugin oficial de Facebook para realizar esta tarea.