El protocolo Open Graph se utiliza para facilitar la transmisión de datos entre sitios web y Redes Sociales. Consiste en tags implementadas directamente en el código de la página para indicar características para compartir el contenido.
Estas tags deben insertarse dentro de la tag <head> de tu sitio web. La siguiente imagen muestra lo que algunas tags determinan al compartir tu sitio en las redes sociales:
Open Graph Title
La Open Graph Title es considerada una de las tags más importantes por Facebook, Google+ y LinkedIn en el contenido compartido.
<meta property="og:title" content="The Rock" />
El propósito de esta tag es determinar los títulos de los posts. Con esto, es posible configurar la página para alcanzar públicos de modo diferente, de acuerdo con el medio en el que está siendo visualizada (og:title para el título en las redes sociales y un meta title como título de la página, que también es utilizado por las herramientas de búsqueda).
Open Graph Description
Es la tag que determina cuál será el contenido en las redes sociales que estará relacionado a tu página. Es muy utilizada por LinkedIn, Facebook y Google+.
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
Cuando la meta og:description esté ausente, las Redes Sociales definirán la descripción del sitio de las siguientes formas:
- Según meta description;
- De forma automática, escaneando el contenido de la página.
Open Graph Image
Esta tag es importante para definir la imagen que representa a la página en las redes
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
No hay restricciones sobre la cantidad de og:image presentes en el sitio web, la primera tag presente en el <head> de la página será elegida como predeterminada.
No colocar este campo permite que le dejes a la red social elegir la imagen adecuada de la página:
- Dimensiones mínimas para una imagen: 200 x 200 píxeles,
- Si es posible, elige una imagen de más de 1000 x 1000 píxeles.
Open Graph URL
Sirve como identificador del post. De esta forma, es posible establecer la relación entre los "Me Gusta" y los contenidos compartidos.
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />