El protocolo Open Graph

Profundización >

El protocolo Open Graph

Previous pageReturn to chapter overviewNext page
Mostrar/ocultar el texto oculto

El protocolo Open Graph lo introdujo en 2010 Facebook con el fin de añadir datos estructurados a las páginas web para permitir tener un mayor control sobre cómo los contenidos aparecen cuando se comparten.

Cuando se comparte un post en Facebook es posible modificar manualmente la imagen, el título y la descripción. Pero esta personalización funciona solo a nivel de ese post compartido en concreto, porque de hecho el enlace no experimenta cambio alguno. Así, en los posts compartidos por otros Usuarios (copiando y pegando el URL o usando los botones me gusta/compartir) seguirán siendo visibles el título, la descripción y las imágenes de vista previa cargadas automáticamente por Facebook. Mediante el protocolo Open Graph es posible personalizar un URL para gestionar cómo se presentará cuando se comparta.

Por medio del protocolo Open Graph, por tanto, cualquier Página Web se convierte en parte del Social Graph, es decir, se convierte en un objeto capaz de interaccionar con las Redes Sociales.

El protocolo Open Graph ha sido reconocido también por otras plataformas sociales como Twitter, Google+ y Linkedin.

Para más información sobre el Protocolo Open Graph, visitar el Sitio web oficial: ogp.me/.

Pulsar para expandir/reducirImplementar el Open Graph

En la práctica, el protocolo Open Graph se basa en una serie de etiquetas que pueden ser personalizadas para definir qué de la Página web será visible en el momento en que se comparta en Facebook, y cómo lo hará. Esta información se introduce en las etiquetas <head> de la Página y son por tanto invisibles para el Usuario hasta que decide compartir la Página.

Las etiquetas básicas de Open Graph son las siguientes:

og:title – el título que se quiere asignar al contenido.
og:description – la descripción del contenido.
og:type – el tipo de contenido, por ejemplo un artículo o un vídeo.
og:image – el URL de la imagen que se quiere usar para cuando el contenido se comparta.
og:url – el URL canónico (es decir el URL absoluto, sin parámetros, variables o contadores) que se quiere usar como ID asociado a la Página Web.

Además de las etiquetas básicas, hay después una serie de etiquetas opcionales que es posible añadir para concretar algunas propiedades del contenido. Por ejemplo:

og:audio – la dirección de un archivo de sonido asociado al objeto.
og:locale – el idioma del contenido, por ejemplo it_IT para el italiano.
og:site_name – el nombre del sitio web, sin TLD y sin www.
og:audio – la dirección de un archivo de vídeo asociado a la página.

A todas estas etiquetas se añaden muchas otras que pueden usarse según los contenidos que se quiere promocionar.

Para comprobar la correcta implementación de las etiquetas OpenGraph está disponible la herramienta Facebook Debugger.

Esta herramienta permite también enviar nuevamente la información proporcionada por medio de las etiquetas, en caso de que haya sufrido cambios.

Pulsar para expandir/reducirEn WebSite X5

WebSite X5 utiliza el protocolo Open Graph en la creación del código de las Páginas Web. A tal fin es oportuno hacer las siguientes observaciones:

Como valor para la etiqueta og:image se toma el URL de la imagen especificada mediante la opción Imagen para el Sitio web que hay en Ajustes del Sitio web | General.
La imagen definida mediante la opción Imagen para el Sitio web se usa para compartir todas las Páginas del Sitio web a excepción de las Páginas del Blog si se comparten posts en los que se ha incluido una presentación de imágenes: en estos casos se sustituye con la primera imagen de la presentación.
Los valores de las demás etiquetas los define automáticamente el programa.