The open graph protocol

The open graph protocol

Las páginas web se complementan muy bien con las redes sociales, pero es importante trabajar en la vista previa para que tenga una atracción para el visitante. Por ello, en este artículo vamos a hablar sobre el protocolo Open Graph, el cual permite que cualquier página web se convierta en un objeto enriquecido en un gráfico social. Por ejemplo, esto se usa en Facebook para permitir que cualquier página web tenga la misma funcionalidad que cualquier otro objeto en Facebook.

Existen muchas tecnologías y esquemas que pueden combinarse, en realidad no existe una sola tecnología que pueda dar toda la información necesaria para representar de manera rica una página web dentro del gráfico social. 

Por este motivo, el protocolo Open Graph se basa en estas tecnologías existentes y ofrece a los desarrolladores una cosa para implementar. La simplicidad del desarrollador es un objetivo clave del protocolo Open Graph que ha informado muchas de las decisiones de diseño técnico.

Metadata básica.

Para convertir sus páginas web en objetos gráficos, debe agregar metadatos básicos a su página. Hemos basado la versión inicial del protocolo en RDFa, lo que significa que colocará etiquetas <meta> adicionales en el <head> de su página web. Las cuatro propiedades requeridas para cada página son:

  • og: title: el título de su objeto tal como debería aparecer en el gráfico, por ejemplo, "The Rock".
  • og: type: el tipo de su objeto, por ejemplo, "video.movie". Dependiendo del tipo que especifique, es posible que también se requieren otras propiedades.
  • og: image: una URL de imagen que debe representar su objeto dentro del gráfico.
  • og: url: la URL canónica de su objeto que se utilizará como su ID permanente en el gráfico, por ejemplo, "https://www.imdb.com/title/tt0117500/".

Como ejemplo, el siguiente es el marcado del protocolo Open Graph para The Rock en IMDB:

<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>

Metadata opcional.

Las siguientes propiedades son opcionales para cualquier objeto y generalmente se recomiendan:

  • og: audio: una URL a un archivo de audio que acompaña a este objeto.
  • og: description - Una descripción de una o dos frases de su objeto.
  • og: determiner: la palabra que aparece antes del título de este objeto en una oración. Una enumeración de (a, an, the, "", auto). Si se elige auto, el consumidor de sus datos debe elegir entre "a" o "an". El valor predeterminado es "" (en blanco).
  • og: locale: la configuración regional en la que están marcadas estas etiquetas. Con el formato language_TERRITORY. El valor predeterminado es en_US.
  • og: locale: alternate: hay una variedad de otras configuraciones regionales en las que está disponible esta página.
  • og: site_name: si su objeto es parte de un sitio web más grande, el nombre que debe mostrarse para todo el sitio. por ejemplo, "IMDb".
  • og: video: una URL a un archivo de video que complementa este objeto.