The open graph protocol

En ocasiones cuando queremos compartir la información de nuestro sitio a través de redes sociales como Facebook, Twitter, google +, etc.  Nos topamos con un problema que la imagen destacada o la descripción que muestra Facebook no corresponde con la información del artículo que se deseamos compartir. Para evitar este tipo de inconvenientes y hacer que se comparta de forma correcta la información de nuestro sitio esta el Protocolo Open Graph

¿Qué es el Open Graph Protocol?

El protocolo Open Graph permite a cualquier página web convertir su contenido en un objeto Social Graph, para que pueda tener la misma funcionalidad que cualquier otro objeto en Facebook, google +, etc.

En la actualidad existen muchas tecnologías y esquemas diferentes pero no hay una única tecnología que proporcione suficiente información para representar cualquier página web como un objeto Social Graph. El protocolo Open Graph se basa en estas tecnologías existentes y ofrece a los desarrolladores una sola forma para ponerlo en práctica.

¿Qué necesitamos?

Para activar los objetos graficos en nuestro sitio web lo único que tenemos que hacer es agregar metadatos básicos utilizando la etiqueta <meta> dentro del <head> de nuestra página. Las cuatro propiedades requeridas para cada página son:

og:title –  El título del objeto como queremos que aparezca
og:type – El tipo de objeto, dependiendo del tipo de objeto se pueden agragar algunas propiedades extra
og:image – URL de la imagen que representa al objeto
og:url – La URL canonica que será usada como ID permanente para el objeto

Aquí un ejemplo de su implementación

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Codedrinks&lt;/title&gt;
    &lt;meta property="og:title" content="Codedrinks Blog" /&gt;
    &lt;meta property="og:type" content="website" /&gt;
    &lt;meta property="og:url" content="http://www.codedrinks.com /" /&gt;
    &lt;meta property="og:image" content="http://codedrinks.com/images/imagen.jpg" /&gt;
    ...
  &lt;/head&gt;
  ...
&lt;/html&gt;

Puedes consultar los siguientes enlaces para conocer más acerca de este protocolo

Sitio oficial: Open Graph Protocol
Facebook Object Debugger
Google Rich Snippets Testing Tool
PHP Validator and Markup Generator
WordPress plugin

Deja un comentario