Desarrollado originalmente por Facebook en 2010, Open Graph es un protocolo que determina y amplía los tipos de metainformación que se puede incluir tras crear una página web y que se ha convertido en el estándar más habitual entre las Redes Sociales más extendidas a la hora de interpretar el contenido relevante de un site y favorecer que se comparta. De este modo, las etiquetas META facilitan información sobre el título, descripción, palabras clave vídeos e imágenes. En este artículo realizaremos una breve introducción a Open Graph y más adelante, profundizaremos en su uso más práctico.
Para que seamos conscientes del potencial de Open Graph, partiremos de este ejemplo práctico: al darle a Me gusta en Facebook o cuando utilizamos Pinterest o Twitter para compartir o favoritear un enlace, las Redes Sociales utilizan las etiquetas META de Open Graph para reflejar la siguiente información:
- El título de lo que queremos compartir.
- La imagen principal o sus destacadas.
- El tipo de recurso: artículo, vídeo, imagen…
- El enlace donde encontraremos la información.
Aunque esto son metadatos básicos, podemos especificar otros que, aunque menos relevantes, indican otro tipo de información como, por ejemplo: el nombre de nuestra página web, el enlace de un vídeo, el idioma o la descripción del contenido compartido.
Así que utilizar correctamente las etiquetas Open Graph facilita que los usuarios de las Redes Sociales encuentren más atractivo el contenido de nuestra páginas web, ya que utilizando facilitaremos a las Redes a reconocer el recurso que queremos compartir, pero en el fondo, son simplemente etiquetas META que ayudan a que el contenido se comparta mejor. ¡Así de sencillo!
Indicando las etiquetas Open Graph
Como en cualquier otra etiqueta META, en las Open Graph deberemos tan solo indicar el atributo property y con content introducir el valor.
Si queremos, por ejemplo, poner el título de nuestra página web, deberemos hacerlo de este modo:
<meta property="og:title" content="Artículo, Etiquetas Open Graph" />
Debemos utilizar el atributo og: a continuación de property, por lo que podemos definir las etiquetas de este modo: og:title, og:image, etc.
Cómo utilizar Open Graph para Facebook
Aunque Open Graph se ha extendido en todas las Redes Sociales, a la hora de utilizarlo para Facebook debemos de añadir alguna información adicional, exclusiva de Facebook y fuera del protocolo estándar de Open Graph.
Veamos el siguiente ejemplo:
<meta property="og:type" content="website" /> <meta property="og:title" content="Tags Open Graph" /> <meta property="og:description" content="Uso de las etiquetas Open Graph en la Web." /> <meta property="og:image" content="https://www.arsys.es/empresa/file/themes/enfold/docs/logo-arsys.jpg" /> <meta property="og:image:width" content="684" /> <meta property="og:image:height" content="328" /> <meta property="og:url" content="https://www.arsys.es" /> <meta property="og:site_name" content="Arsys" /> <meta property="fb:app_id" content="número ID" />
En la última línea vemos que hemos puesto un dato diferente al resto. Se trata de fb:app_id. Esto es el identificador de Facebook del sitio web.
Hay que prestar atención a las propiedades del tamaño de la imagen, pues si queremos que se incluya no deberían de faltar y tienen que estar especificadas:
<meta property="og:image:width" content="684" /> <meta property="og:image:height" content="328" />
En próximos artículos seguiremos profundizando en el uso práctico de Open Graph. ¡Permanece atento a nuestro blog!