O protocolo Open Graph


Introdução

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 há uma única tecnologia que forneça informações suficientes para representar ricamente qualquer página da Web no gráfico social. O protocolo Open Graph baseia-se nessas tecnologias existentes e oferece aos desenvolvedores uma coisa a implementar. A simplicidade do desenvolvedor é um objetivo fundamental 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 no RDFa, o que significa que você colocará tags adicionais na 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 sua ID permanente no gráfico, por exemplo, "http://www.imdb.com/title/tt0117500/".
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/nz.

Propriedades Estruturadas

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

A og:image propriedade 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" />
A og:video tag 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" />
A og:videotag tem as tags idênticas og:image. Aqui está um exemplo:
A 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 (Arrays)


Se uma tag puder ter vários valores, basta colocar várias versões da mesma  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.

Tipo de Objeto 

 Para que seu objeto seja representado no gráfico, você precisa especificar seu tipo. Isso é feito usando a og:type propriedade:
<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:type valores 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
URI do namespace: http://ogp.me/ns/music#
og:type valores:

music.song

music:duration- integer  = 1 - duração 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 está esta música.
music:album:track - integer  = 1 - Qual faixa é essa música.
music:musician - profile 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:disc no reverso.
music:song:track- integer   = 1 - O mesmo que music:album:track no 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 que estão no 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
URI do namespace: http://ogp.me/ns/video#
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 - A 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.

No Vertical
Estes são objetos definidos globalmente que simplesmente não se encaixam em uma vertical, mas 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#

book:author- array de perfil - Quem escreveu este livro.
book:isbn- string - O ISBN
book:release_date- datetime - A data em que o livro foi lançado.
book:tag- array de strings - Marque as palavras associadas a este livro.

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:type website.

Tipos
Os tipos a seguir são usados ​​ao definir atributos no protocolo Open Graph.
TipoDescriçãoLiterais
boleanoUm booleano representa um valor verdadeiro ou falsoverdadeiro, falso, 1, 0
Data horaUm DateTime representa um valor temporal composto por uma data (ano, mês, dia) e um componente de tempo opcional (horas, minutos)ISO 8601
EnumUm tipo que consiste em um conjunto limitado de valores de cadeia constante (membros de enumeração).Um valor de seqüência de caracteres que é um membro da enumeração
FlutuadorUm número de ponto flutuante assinado de 64 bitsTodos os literais que estão em conformidade com os seguintes formatos: 

1.234 
-1.234 
1.2e3 
-1.2e3 
7E-10
InteiroUm 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
CordaUma seqüência de caracteres UnicodeTodos os literais compostos de caracteres Unicode sem caracteres de escape
URLUma 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 pelo IMDb, Microsoft, NHL, Posterous, tomates podres, TIME, Yelp e muitos outros.

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 pelo 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!
O protocolo Open Graph foi originalmente criado no Facebook e é inspirado no Dublin Core , no link-rel canonical , no Microformats e no RDFa . A especificação descrita nesta página está disponível no Contrato Open Web Foundation, Versão 0.9 . Este site é de código aberto . .



Teste uma página específica para tags de gráfico aberto Aqui



Fontes Pesquisadas: https://sitechecker.pro/pt/open-graph/ e https://ogp.me/