Open Graph de Facebook

¿Qué es Open Graph?

Open Graph Protocol (OGP), es un conjunto de extensiones XHTML desarrolladas por la red social de Mark Zuckerberg,  Facebook, y propuestas por la W3C, destinadas a posibilitar la introducción de semántica en cualquier tipo de documento. En otras palabras, en cierto momento, esta red social, vio la necesidad de mejorar su plataforma de cara a la creciente necesidad que impera en internet de tener los contenidos adaptados para obtener un posicionamiento mejor en los buscadores, y decidió desarrollar este tipo de código.

Open Graph nos permite establecer, por medio de la inclusión de nuevas etiquetas-meta, en el código,  la información que queremos que se vea en Facebook: título, descripción, imagen y tipo de publicación. Gracias a este tipo de código cada página o entrada (post) que aparezca en nuestra web puede estar optimizada no sólo para posicionar lo mejor posible en los buscadores, sino para presentar un contenido exclusivo y totalmente adaptado a Facebook, al público que sigue Facebook, y al tipo de lenguaje que se espera en Facebook.

Actualmente cuando hablamos de posicionar una web, tenemos que hacer una parada obligada en la optimización que la web va a tener de cara a las redes sociales; la razón es fundamentalmente obvia, si mucha gente considera que la información contenida en un artículo, o página, es relevante para un determinado campo del conocimiento o entretenimiento humano, los buscadores entenderán que la información que contiene éste, es importante para ese campo y por tanto, al realizar una búsqueda relacionada, esta aparecerá antes que otras que quizá no los son tanto.

Por consiguiente el grado en que participemos en las redes sociales, con contenido nuevo, relevante, bien estructurado, bien presentado y un largo etcétera aumentará nuestras posibilidades de que sea seguido por la comunidad, y este hecho será directamente proporcional a la consideración que los buscadores tendrán de nuestra web a la hora de posicionarla en primer o vigésimo-séptimo lugar.

De esta forma, si publico un contenido, que apunta a mi blog, y este obtiene una buena respuesta social que incluya un alto número de retweets, likes o +1′s, éste tendrá una cierta ventaja respecto a otros que pasan desapercibidos por los usuarios, y al ser compartido por la comunidad aumentará el peso que mi web tiene.

¿Cómo introducir OpenGraph en mi web?

Es importante matizar que no solo aparecerán estos datos cuando introduzcamos la URL de nuestro articulo o página en Facebook, sino que cada vez que alguien, en el planeta, copie y pegue nuestra URL en Facebook también se mostrará el mismo contenido, por tanto recomendamos tener un cierto control sobre cómo queremos que se publique nuestro contenido y sobre en quién delegar la responsabilidad del manejo de estos datos.

La inclusión de OpenGraph se puede realizar de distintas maneras dependiendo de que tipo de web tengamos:

1. Para una web construida solo con código HTML, la inclusión de estos meta-datos se realizará de manera manual, de la misma forma que introduciríamos la «meta-description» o el «meta-title» insertando distintas etiquetas en el código entre la etiqueta de apertura y la de cierre. Por ejemplo para introducir el meta-dato que define el título que queremos mostrar para una página de nuestra web, en Facebook, introduciríamos la siguiente etiqueta en el código de la página en cuestión:

   Podéis encontrar más información sobre las etiquetas a insertar de forma manual en la propia página de Facebook.

2. Cuando trabajamos dentro de una plantilla de un CMS cualquiera ya sea WordPress, Joomla, PrestaShop, etc… Debemos comprobar si existe un plug-in adaptado para el CMS que queramos utilizar, que permita incluir este código de manera cómoda, de lo contrario tendremos una ardua batalla con el código PHP de nuestra plantilla que os recomendamos evitar.

   En el caso de WordPress, existen varios plug-ins a través de los cuales podemos optimizar OpenGraph, de una manera cómoda y rápida. Nosotros os recomendamos: WordPress SEO by Yoast. Una vez instalado veréis que aparece un bloque dentro de las pantallas de edición de cada página o entrada titulada con el nombre del plug-in, accediendo a la pestaña de social que encontraremos en el mencionado bloque del plug-in, podremos modificar este tipo de datos.

   Desde este plug-in también podremos gestionar cómo se publica en otras redes sociales que tengamos asociadas a nuestra página, como Twitter o Google +.

¿Qué pasa si no funciona OpenGraph?

Hay varios motivos por los que puede dejar de funcionar OG, os presentamos los fallos más típicos:

1. Alguno de nuestros plug-ins o la plantilla de nuestra web no están actualizados correctamente y entran en conflicto entre sí o con la inclusión de este tipo de código.
2. Una de las razones más comunes por las que no funciona OpenGraph es debido a las cachés de Facebook que deja acumulada información anterior,  que sigue mostrando como si no se hubieran realizado cambios. Para poder subsanar este problema Facebook ha creado Debugger,una herramienta online donde podremos insertar la URL de la página y borrar las cachés para poder insertar la nueva información.
3. Si el problema es que al introducir los meta-datos OpenGraph, el título y la descripción aparecen correctamente al publicar el articulo o página en Facebook, pero la imagen es diferente o no se ve, prueba a especificar el tamaño de imagen con una etiqueta OpenGraph, y no olvides que según Facebook, esta imagen que incluyas debe ser al menos de 200px x 200px.