Introducción
El protocolo Open Graph permite que cualquier página web se convierta en un objeto en un gráfico social. Por ejemplo, se utiliza en Facebook para permitir que cualquier página web tenga la misma funcionalidad que cualquier otro objeto en Facebook.
Aunque existen muchas tecnologías y esquemas diferentes que podrían combinarse entre sí, no existe una única tecnología que proporcione suficiente información para representar de forma certera cualquier página web dentro del grafo social. El protocolo Open Graph se basa en estas tecnologías existentes y ofrece a los desarrolladores una cosa que implementar. La simplicidad para los desarrolladores es un objetivo clave del protocolo Open Graph que ha informado muchas de las decisiones de diseño técnico.
Metadatos básicos
Para convertir tus páginas web en objetos del grafo, necesitas añadir metadatos básicos a tu página. Hemos basado la versión inicial del protocolo enRDFa, lo que significa que colocarás etiquetas <meta> adicionales en el <head> de tu página web. Las cuatro propiedades requeridas para cada página son:
-
og:title– El título de su objeto tal y como debe aparecer dentro del gráfico, por ejemplo, «La Roca». -
og:type– El tipo de su objeto, por ejemplo, «video.movie». Dependiendo del tipo que especifique, también pueden ser necesarias 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 La Roca enIMDB:
<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>Metadatos opcionales
Las siguientes propiedades son opcionales para cualquier objeto y generalmente se recomiendan:
-
og:audio– Una URL a un archivo de audio que acompañe a este objeto. -
og:description– Una descripción de una a dos frases de su objeto. -
og:determiner– La palabra que aparece antes del título de este objetoen una frase. Un enum de (a, an, the, «», auto). Si se eligeauto, el consumidor de sus datos debe elegir entre «a» o «an».Por defecto es «» (en blanco). -
og:locale– La configuración regional en la que se marcan estas etiquetas.Del formatolanguage_TERRITORY. Por defecto esen_US. -
og:locale:alternate– Una matriz de otras localizaciones 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 debería mostrarse para el sitio en general. p.ej, «IMDb». -
og:video– Una URL a un archivo de vídeo que complemente este objeto.
Por ejemplo (el salto de línea es sólo para mostrarlo):
<meta property="og:audio" content="https://example.com/bond/theme.mp3" /><meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /><meta property="og:determiner" content="the" /><meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" /><meta property="og:site_name" content="IMDb" /><meta property="og:video" content="https://example.com/bond/trailer.swf" />El esquema RDF (en Turtle) se puede encontrar en ogp.me/ns.
Propiedades estructuradas
Algunas propiedades pueden tener metadatos extra adjuntos.Estos se especifican de la misma manera que otros metadatos con property ycontent, pero el property tendrá : extra.
La propiedad og:image tiene algunas propiedades estructuradas opcionales:
-
og:image:url– Idéntico aog:image. -
og:image:secure_url– Una url alternativa para usar si la página web requiereHTTPS. -
og:image:type– Un tipo MIME para esta imagen. -
og:image:width– El número de píxeles de ancho. -
og:image:height– El número de píxeles de alto. -
og:image:alt– Una descripción de lo que hay en la imagen (no un pie de foto). Si la página especifica un og:image debe especificarog:image:alt.
Un ejemplo de imagen completa:
<meta property="og:image" content="https://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" /><meta property="og:image:alt" content="A shiny red apple with a bite taken out" />La etiqueta og:video tiene las mismas etiquetas que og:image. Aquí hay un ejemplo:
<meta property="og:video" content="https://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />La etiqueta og:audio sólo tiene las 3 primeras propiedades disponibles(ya que el tamaño no tiene sentido para el sonido):
<meta property="og:audio" content="https://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />Arrays
Si una etiqueta puede tener varios valores, simplemente pon varias versiones de la misma etiqueta<meta> en tu página. La primera etiqueta (de arriba a abajo) tiene preferencia durante los conflictos.
<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image" content="https://example.com/rock2.jpg" />Ponga las propiedades estructuradas después de declarar su etiqueta raíz. Cada vez que se analiza otro elemento raíz, se considera que esa propiedad estructurada ha terminado y se inicia otra.
Por ejemplo:
<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="https://example.com/rock2.jpg" /><meta property="og:image" content="https://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />Significa que hay 3 imágenes en esta página, la primera imagen es 300x300, la del medio tiene dimensiones no especificadas, y la última es 1000px alta.
Tipos de objetos
Para que tu objeto sea representado dentro del gráfico, necesitas especificar su tipo. Esto se hace utilizando la propiedad og:type:
<meta property="og:type" content="website" />Cuando la comunidad se pone de acuerdo sobre el esquema de un tipo, se añade a la lista de tipos globales. Todos los demás objetos del sistema de tipos sonCURIEs de la forma
<head prefix="my_namespace: https://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />Los tipos globales se agrupan en verticales. Cada vertical tiene su propio espacio de nombres. Los valores de og:type para un espacio de nombres siempre llevan como prefijo el espacio de nombres y luego un punto.Esto es para reducir la confusión con los tipos de espacio de nombres definidos por el usuario que siempre tienen dos puntos en ellos.
Música
- Espacio de nombres URI:
https://ogp.me/ns/music#
og:type valores:
music.song
-
music:duration– integer >=1 – La duración de la canción en segundos. -
music:album– array music.album -El álbum del que proviene esta canción. -
music:album:disc– integer >=1 -El disco del álbum en el que se encuentra esta canción. -
music:album:track– integer >=1 -Qué pista es esta canción. -
music:musician– profile array -El músico que hizo esta canción.
music.album
-
music:song– music.song – La canción de este álbum. -
music:song:disc– integer >=1 – Lo mismo quemusic:album:discpero al revés. -
music:song:track– integer >=1 -Lo mismo quemusic:album:trackpero al revés. -
music:musician– profile -El músico que hizo esta canción. -
music:release_date– datetime – La fecha de publicación del álbum. -
music:song– Idéntico a los de la música.álbum music:song:discmusic:song:track-
music:creator– perfil – El creador de esta lista de reproducción. -
music:creator– perfil – El creador de esta emisora. - Espacio de nombres URI:
https://ogp.me/ns/video# -
video:actor– matriz de perfiles -Actores de la película. -
video:actor:role– cadena – El papel que interpretaron. - – matriz de perfiles -Directores de la película.
-
video:writer– matriz de perfiles -Escritores de la película. -
video:duration– integer >=1 – La duración de la película en segundos. -
video:release_date– datetime – La fecha de estreno de la película. -
video:tag– string array -Palabras de etiqueta asociadas a esta película. -
video:actor– Idéntico al vídeo.movie video:actor:rolevideo:writervideo:durationvideo:release_datevideo:tag-
video:series– video.tv_show -A qué serie pertenece este episodio. -
article:published_time– datetime – Cuando el artículo fue publicado por primera vez. -
article:modified_time– datetime – Cuando el artículo fue modificado por última vez. -
article:expiration_time– datetime – Cuando el artículo está fuera de fecha después. -
article:author– profile array -Escritores del artículo. -
article:section– string – Un nombre de sección de alto nivel. Por ejemplo, Tecnología -
article:tag– array de cadenas -Palabras de etiqueta asociadas a este artículo. -
book:author– array de perfiles – Quién escribió este libro. -
book:isbn– cadena -El ISBN -
book:release_date– datetime – La fecha de publicación del libro. -
book:tag– string array -Palabras de etiqueta asociadas a este libro. -
profile:first_name– cadena – Un nombre normalmente dado a un individuo por un padre o elegido por él mismo. -
profile:last_name– cadena – Un nombre heredado de una familia o matrimonio y por el que el individuo es conocido comúnmente. -
profile:username– cadena – Una cadena corta y única para identificarlos. -
profile:gender– enum(masculino, femenino) – Su género. - Depurador de objetos de Facebook -El parser y depurador oficial de Facebook
- Herramienta de prueba de Google Rich Snippets – Soporte del protocolo Open Graph en verticales y motores de búsqueda específicos.
- Validador y generador de marcas en PHP – Validador de entradas OGP 2011 y generador de marcas en objetos PHP5
- Consumidor PHP -una pequeña librería para acceder a los datos del protocolo Open Graph en PHP
- OpenGraphNode en PHP -un sencillo parser para PHP
- PyOpenGraph -una biblioteca escrita en Python para analizar la información del protocolo Open Graph de los sitios web
- OpenGraph Ruby -Gema Ruby que analiza las páginas web y extrae el marcado del protocolo Open Graph
- OpenGraph para Java -pequeña clase Java utilizada para representar el protocolo Open Graph
- RDF::RDFa::Parser -Perl RDFa parser que entiende el protocolo Open Graph
- WordPress plugin -Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
- Complemento OGP de WordPress alternativo -Un sencillo y ligero plugin de WordPress que añade metadatos de Open Graph a los sitios alimentados por WordPress.
music.playlist
music.radio_station
Vídeo
og:type valores:
video.movie
video.episode
video.tv_show
Un programa de televisión de varios episodios.Los metadatos son idénticos a video.movie.
video.other
Un vídeo que no pertenece a ninguna otra categoría.Los metadatos son idénticos a video.movie.
Sin vertical
Son objetos definidos globalmente que simplemente no encajan en una vertical pero que son ampliamente utilizados y consensuados.
og:type valores:
article – Namespace URI: https://ogp.me/ns/article#
book – URI del espacio de nombres: https://ogp.me/ns/book#
profile – URI del espacio de nombres: https://ogp.me/ns/profile#
website – URI del espacio de nombres: https://ogp.me/ns/website#
No hay propiedades adicionales más allá de las básicas.Cualquier página web no marcada debe ser tratada como og:type sitio web.
Tipos
Los siguientes tipos se utilizan al definir atributos en el protocolo Open Graph.
| Tipo | Descripción | Literales | Boolean | Un booleano representa un valor verdadero o falso | true, falso, 1, 0 |
|---|---|---|
| DateTime | Una DateTime representa un valor temporal compuesto por una fecha (año, mes, día) y un componente de tiempo opcional (horas, minutos) | ISO 8601 |
| Enum | Un tipo que consiste en un conjunto acotado de valores de cadena constantes (miembros de la enumeración). | Un valor de cadena que es miembro de la enumeración |
| Float | Un número de coma flotante con signo de 64 bits | Todos los literales que se ajustan a los siguientes formatos: 1.234 -1.234 1.2e3 -1.2e3 7E-10 |
Integer | Un entero de 32 bits con signo. En muchos idiomas los enteros de más de 32 bits se convierten en flotantes, por lo que limitamos el protocolo Open Graph para facilitar el uso multilingüe. | Todos los literales que se ajustan a los siguientes formatos: 1234 -123 |
| Cadena | Una secuencia de caracteres Unicode | Todos los literales compuestos por caracteres Unicode sin caracteres de escape |
| URL | Una secuencia de caracteres Unicode que identifica un recurso de Internet. | Todas las URL válidas que utilizan los protocolos https:// o https:// |
Discusión y soporte
Puedes discutir el protocolo Open Graph en el grupo de Facebook o en la lista de correo de desarrolladores.Actualmente es consumido por Facebook (ver su documentación), Google (ver su documentación), ymixi.Está siendo publicado por IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes,TIME, Yelp, y muchos otros.
Implementaciones
La comunidad de código abierto ha desarrollado una serie de analizadores y herramientas de publicación. Deja que el grupo de Facebook sepa si has construido algo impresionante también!
0 comentarios