Hace pocos días, un cliente me llamó para explicarme que tenía un problema con su web a la hora de compartir sus artículos en Facebook. Si el artículo compartido tenía una imagen destacada, todo iba bien pero cuando el artículo no tenía ninguna imagen, Facebook utilizaba otra «aleatoria» de la página que no tenía nada que ver con el texto compartido. Mi cliente quería compartir siempre la misma imagen (el logotipo de la página) cuando no hubiera imagen disponible para el artículo.
Open Graph tags
Facebook utiliza una araña web (crawler) que hace scraping del HTML de nuestra página compartida. Automáticamente, busca en el HTML un título, una descripción, una imagen, todo lo que necesita para generar un artículo listo para compartir en la red social. Para poder controlar lo que Facebook selecciona en nuestro HTML, debes utilizar los Open Graph tags.
El protocolo Open Graph no es propio de Facebook. Es un protocolo que pretende ser un estándar para controlar lo que se comparte en redes sociales. Estos tags permiten especificar a la araña de Facebook qué título, qué descripción, qué imagen debe utilizar para compartir esta url. A continuación, os describo los tags básicos que Facebook recomienda utilizar para todos los contenidos compartidos:
- og:url: La url que se va a compartir realmente. Se recomiendo eliminar parámetros que no tengan nada que ver con la propia url o sean prescindibles.
- og:title: El título no debe contener la marca o el dominio de la página. Debe ser el título del artículo sencillamente.
- og:description: Una descripción del artículo. Según recomendación de Facebook, debería contener al menos dos frases.
- og:site_name: El nombre del sitio web.
- og:image: La url de la imagen a compartir con el artículo.
- fb:app_id: El Facebook App ID que identifique al sitio web en Facebook. Si quieres acceder a Facebook Insights y ver estadísticas de tu artículo en Facebook, puedes crear una aplicación para tu sitio web y después poner el App ID en este tag.
Además de los tags anteriores, existen otros que no son obligatorios pero pueden ser de utilidad:
- og:type: El tipo de objeto que se comparte. En el caso de un artículo de un blog suele ser el tipo: “article”. En la página del protocolo Open Graph podéis ver todos los tipos disponibles (music, video, article, book, website, …). Facebook también tiene un artículo explicando los distintos tipos de objetos que se pueden compartir en este enlace.
- og:locale: Si el artículo tiene traducciones a otros idiomas, puede ser interesante indicar el locale de esta url (es_ES, en_US, …). Además con og:locale:alternate podremos especificar las traducciones disponibles.
- article:author: La dirección de la página de Facebook del autor del artículo.
Como podrás ver en la página del protocolo de Open Graph o en este listado de propiedades de Facebook, existen muchos tags, pero creo que los principales son los que acabo de nombrar.
El tag og:image
Era de esperar que añadiendo la url de la imagen por defecto junto con el tag “og:image”, al compartir la url del artículo, la imagen que se mostrara fuera la que yo había enviado, pero en algunos casos, parece que no funciona.
Lo más curioso es que utilicé el Open Graph Object Debugger que Facebook pone a disposición de cualquiera para poder comprobar qué estaba fallando en mi página y todo parece correcto. De hecho, según el debugger, el ejemplo que muestra al final indica que el artículo se debería de compartir con la imagen que yo he puesto en el tag og:image.
Después de mucho curiosear por google y foros, me he encontrado con esta incidencia en el soporte de Facebook. Según el equipo de soporte de Facebook, el bug está resuelto desde Agosto de 2014. La causa parece estar en la codificación de la url de la imagen, pero muchas personas han seguido reportando el mismo error y a día de hoy sigue sin haber respuesta por parte del soporte.
Al no tener más información y no disponer de más tiempo para poder probar más cosas, me sigo quedando con la duda de por qué realmente la imagen no se comparte en algunos casos aunque el propio Debugger de Facebook insista en que no hay ningún error. He podido leer en Stack Overflow elucubraciones de todo tipo, desde que el servidor tardaba demasiado en responder a la petición del crawler hasta que la imagen debía ser de un tamaño concreto sino no se mostraría.
En mi caso, el tamaño no es un problema ya que está puesto según las recomendaciones de Facebook y el servidor no está bajo mi control por lo tanto poco puedo hacer. Si alguien sabe como solucionar este problema, por favor deja un comentario y explícame cómo hacer para solucionar esto.
