Protocolo Open Graph

Introdução

protocolo Open Graph permite que qualquer página da Web se torne um objeto rico em um gráfico social. Por exemplo, isso é usado no Facebook para permitir que qualquer página da Web tenha a mesma funcionalidade que qualquer outro objeto no Facebook.

Embora muitas tecnologias e esquemas diferentes existam e possam ser combinados, não existe uma única tecnologia que forneça informações suficientes para representar ricamente qualquer página da Web dentro do gráfico social. O protocolo Open Graph baseia-se nessas tecnologias existentes e oferece aos desenvolvedores uma coisa a implementar. A simplicidade do desenvolvedor é uma meta importante do protocolo Open Graph, que informou muitas das decisões técnicas de design .


Metadados Básicos

Para transformar suas páginas da Web em objetos gráficos, você precisa adicionar metadados básicos à sua página. Baseamos a versão inicial do protocolo em RDFa, o que significa que você colocará <meta>tags adicionais na <head>sua página da web. As quatro propriedades necessárias para cada página são:

  • og:title – O título do seu objeto como deveria aparecer no gráfico, por exemplo, “The Rock”.
  • og:type– O tipo do seu objeto, por exemplo, “video.movie”. Dependendo do tipo que você especificar, outras propriedades também podem ser necessárias.
  • og:image – Um URL de imagem que deve representar seu objeto no gráfico.
  • og:url – O URL canônico do seu objeto que será usado como ID permanente no gráfico, por exemplo, “http://www.imdb.com/title/tt0117500/&#8221;.

Como exemplo, o seguinte é a marcação do protocolo Open Graph para The Rock no IMDB :

<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Metadados Opcionais

As propriedades a seguir são opcionais para qualquer objeto e geralmente são recomendadas:

  • og:audio – Um URL para um arquivo de áudio para acompanhar este objeto.
  • og:description – Uma descrição de uma ou duas frases do seu objeto.
  • og:determiner– A palavra que aparece antes do título deste objeto em uma frase. Um enum de (a, an, the, “”, auto). Se autofor escolhido, o consumidor de seus dados deve escolher entre “a” ou “an”. O padrão é “” (em branco).
  • og:locale– A localidade em que essas tags estão marcadas. Do formato language_TERRITORY. O padrão é en_US.
  • og:locale:alternate– Uma matriz de outras localidades em que esta página está disponível.
  • og:site_name– Se o seu objeto fizer parte de um site maior, o nome que deve ser exibido para o site geral. por exemplo, “IMDb”.
  • og:video – Um URL para um arquivo de vídeo que complementa esse objeto.

Por exemplo (quebra de linha apenas para fins de exibição):

<meta property="og:audio" content="http://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="http://example.com/bond/trailer.swf" />

O esquema RDF (em Turtle ) pode ser encontrado em ogp.me/ns .


Propriedades Estruturadas

Algumas propriedades podem ter metadados extras anexados a elas. Estes são especificados da mesma forma que outros metadados com propertycontent, mas o que propertyserá extra :.

og:imagepropriedade tem algumas propriedades estruturadas opcionais:

  • og:image:url– Idêntico a og:image.
  • og:image:secure_url – Um URL alternativo para usar se a página da Web exigir HTTPS.
  • og:image:type– Um tipo MIME para esta imagem.
  • og:image:width – O número de pixels de largura.
  • og:image:height – O número de pixels de altura.
  • og:image:alt– Uma descrição do que está na imagem (não é uma legenda). Se a página especificar uma imagem og: deve especificar og:image:alt.

Um exemplo de imagem completa:

<meta property="og:image" content="http://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" />

og:videotag tem as tags idênticas og:image. Aqui está um exemplo:

<meta property="og:video" content="http://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" />

og:audiotag tem apenas as 3 primeiras propriedades disponíveis (já que o tamanho não faz sentido para o som):

<meta property="og:audio" content="http://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" />

Matrizes

Se uma tag puder ter vários valores, basta colocar várias versões da mesma <meta>tag na sua página. A primeira tag (de cima para baixo) recebe preferência durante os conflitos.

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

Coloque as propriedades estruturadas depois de declarar sua tag raiz. Sempre que outro elemento raiz é analisado, essa propriedade estruturada é considerada concluída e outra é iniciada.

Por exemplo:

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

significa que há 3 imagens nesta página, a primeira imagem é 300x300, a do meio tem dimensões não especificadas e a última tem 1000px de altura.


Tipos de Objetos

Para que o seu objeto seja representado dentro do gráfico, você precisa especificar seu tipo. Isso é feito usando a og:typepropriedade:

<meta property="og:type" content="website" />

Quando a comunidade concorda com o esquema de um tipo, ele é adicionado à lista de tipos globais. Todos os outros objetos no sistema de tipos são CURIEs da forma

<head prefix="my_namespace: http://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

Os tipos globais são agrupados em verticais. Cada vertical tem seu próprio namespace. Os og:typevalores para um namespace são sempre prefixados com o namespace e, em seguida, com um período. Isso é para reduzir a confusão com tipos de namespaces definidos pelo usuário que sempre possuem dois pontos.

Música

og:type valores:

music.song

  • music:duration– integer > = 1 – O comprimento da música em segundos.
  • music:album– music.album array – O álbum desta música é de.
  • music:album:disc– integer > = 1 – Em qual disco do álbum esta música está.
  • music:album:track– integer > = 1 – Qual faixa é essa música.
  • music:musician– perfil array – O músico que fez essa música.

music.album

  • music:song– music.song – A música deste álbum.
  • music:song:disc– integer > = 1 – O mesmo que music:album:discno reverso.
  • music:song:track– integer > = 1 – O mesmo que music:album:trackno reverso.
  • music:musician– profile – O músico que fez essa música.
  • music:release_date– datetime – A data em que o álbum foi lançado.

music.playlist

  • music:song– Idêntico aos do music.album
  • music:song:disc
  • music:song:track
  • music:creator– perfil – O criador desta playlist.

music.radio_station

  • music:creator– profile – O criador desta estação.

Vídeo

og:type valores:

video.movie

  • video:actor– matriz de perfil – Atores no filme.
  • video:actor:role– string – O papel que eles desempenharam.
  • video:director– matriz de perfil – Diretores do filme.
  • video:writer– matriz de perfil – Escritores do filme.
  • video:duration– integer > = 1 – duração do filme em segundos.
  • video:release_date– datetime – A data em que o filme foi lançado.
  • video:tag– array de strings – Marque as palavras associadas a este filme.

video.episode

  • video:actor– Idêntico ao video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series– video.tv_show – A qual série este episódio pertence.

video.tv_show

Um programa de TV de vários episódios. Os metadados são idênticos ao video.movie .

video.other

Um vídeo que não pertence a nenhuma outra categoria. Os metadados são idênticos ao video.movie .

Sem vertical

Estes são objetos definidos globalmente que simplesmente não se encaixam em uma vertical, mas ainda são amplamente utilizados e acordados.

og:type valores:

article – URI do namespace: http://ogp.me/ns/article#

  • article:published_time– datetime – Quando o artigo foi publicado pela primeira vez.
  • article:modified_time– datetime – Quando o artigo foi alterado pela última vez.
  • article:expiration_time– datetime – Quando o artigo está desatualizado depois.
  • article:author– matriz de perfil – Escritores do artigo.
  • article:section– string – um nome de seção de alto nível. Por exemplo, tecnologia
  • article:tag– array de strings – Marque as palavras associadas a este artigo.

book – URI do namespace: http://ogp.me/ns/book#

profile – URI do namespace: http://ogp.me/ns/profile#

  • profile:first_name– string – Um nome normalmente dado a um indivíduo por um dos pais ou por ele escolhido.
  • profile:last_name– string – Um nome herdado de uma família ou casamento e pelo qual o indivíduo é comumente conhecido.
  • profile:username– string – Uma string única curta para identificá-los.
  • profile:gender– enum (masculino, feminino) – seu gênero.

website – URI do namespace: http://ogp.me/ns/website#

Nenhuma propriedade adicional além das básicas. Qualquer página da Web não marcada deve ser tratada como og:typewebsite.


Tipos

Os seguintes tipos são usados ​​ao definir atributos no protocolo Open Graph.

Tipo Descrição Literais
boleano Um booleano representa um valor verdadeiro ou falso verdadeiro, falso, 1, 0
Data hora Um DateTime representa um valor temporal composto de uma data (ano, mês, dia) e um componente de tempo opcional (horas, minutos) ISO 8601
Enum Um tipo que consiste em um conjunto limitado de valores de cadeia constante (membros de enumeração). Um valor de string que é um membro da enumeração
Flutuador Um número de ponto flutuante assinado de 64 bits Todos os literais que estão em conformidade com os seguintes formatos:

1.234
-1.234
1.2e3
-1.2e3
7E-10

Inteiro Um inteiro assinado de 32 bits. Em muitas linguagens, números inteiros acima de 32 bits se tornam flutuantes, então limitamos o protocolo Open Graph para facilitar o uso em vários idiomas. Todos os literais que estão em conformidade com os seguintes formatos:

1234
-123

Corda Uma seqüência de caracteres Unicode Todos os literais compostos de caracteres Unicode sem caracteres de escape
URL Uma seqüência de caracteres Unicode que identificam um recurso da Internet. Todos os URLs válidos que utilizam os protocolos http: // ou https: //

Discussão e apoio

Você pode discutir o Open Graph Protocol no grupo do Facebook ou na lista de discussão do desenvolvedor . Atualmente está sendo consumido pelo Facebook ( consulte a documentação deles ), Google ( consulte a documentação ) e mixi . Ele está sendo publicado pela IMDb, Microsoft, NHL, Posterous, tomates podres, TIME, Yelp e muitos outros.


Implementações

A comunidade de código aberto desenvolveu vários analisadores e ferramentas de publicação. Deixe o grupo do Facebook saber se você também criou algo incrível!

Fonte: http://ogp.me/