10
O protocolo Open Graph Introdução O protocolo Open Graph permite que qualquer página web para se tornar um objeto rico em um gráfico social. Por exemplo, isto é usado no Facebook para permitir que qualquer página web para ter a mesma funcionalidade que qualquer outro objeto no Facebook. Enquanto existem muitas tecnologias e esquemas diferentes e podem ser combinados em conjunto, não é uma única tecnologia que proporciona informação suficiente para representar ricamente qualquer página da web no gráfico social. O protocolo Open Graph constrói sobre essas tecnologias existentes e dá aos desenvolvedores uma coisa para implementar. Simplicidade Developer é um objetivo-chave do Aberto protocolo Gráfico que tenha informado muitas as decisões técnicas do projecto . Metadata Básico Para virar as páginas da web em objetos gráficos, você precisa adicionar metadados básicos para a sua página. Nós base a versão inicial do protocolo em RDFa o que significa que você vai colocar adicionais <meta> marcas no <head>da sua página web. As quatro propriedades requeridas para cada página são: og: Título - O título de seu objeto como ele deve aparecer dentro do 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ários.

O protocolo open graph

Embed Size (px)

Citation preview

Page 1: O protocolo open graph

O protocolo Open Graph

Introdução O protocolo Open Graph permite que qualquer página web para se tornar um objeto

rico em um gráfico social. Por exemplo, isto é usado no Facebook para permitir que

qualquer página web para ter a mesma funcionalidade que qualquer outro objeto no

Facebook.

Enquanto existem muitas tecnologias e esquemas diferentes e podem ser combinados

em conjunto, não é uma única tecnologia que proporciona informação suficiente para

representar ricamente qualquer página da web no gráfico social. O protocolo Open

Graph constrói sobre essas tecnologias existentes e dá aos desenvolvedores uma coisa

para implementar. Simplicidade Developer é um objetivo-chave do Aberto protocolo

Gráfico que tenha informado muitas as decisões técnicas do projecto .

Metadata Básico Para virar as páginas da web em objetos gráficos, você precisa adicionar metadados

básicos para a sua página. Nós base a versão inicial do protocolo em RDFa o que

significa que você vai colocar adicionais <meta> marcas no <head>da sua página

web. As quatro propriedades requeridas para cada página são:

og: Título - O título de seu objeto como ele deve aparecer dentro do

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ários.

Page 2: O protocolo open graph

og: image - Um URL da imagem que deve representar o seu objeto

dentro do gráfico.

og: url - A URL canônica de seu objeto que será usado como seu ID

permanente no gráfico, por exemplo,

"http://www.imdb.com/title/tt0117500/".

Como exemplo, o seguinte é o protocolo de marcação 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 opcional

As seguintes propriedades são opcionais para qualquer objeto e são geralmente

recomendados:

og: Áudio - A URL para um arquivo de áudio para acompanhar este

objeto.

og: description - A 01:59 descrição frase de seu objeto.

og: determinante - A palavra que aparece antes do título deste objeto

em uma frase. Uma enumeração de (a, an, a, "", auto). Se auto for

escolhido, o consumidor dos seus dados deve escolher entre "a" ou

"um". O padrão é "" (em branco).

Page 3: O protocolo open graph

og: locale - A localidade estas tags são marcados dentro do

formato language_TERRITORY . O padrão épt_BR .

og: locale: alternativo - Uma variedade de outros locais desta

página está disponível dentro

og: nome_do_site - Se o objeto faz parte de um site maior, o nome que

deve ser exibido para o site em geral.por exemplo, "IMDb".

og: video - A URL para um arquivo de vídeo que complementa este

objeto.

Por exemplo (linha-break somente para fins de exibição):

<meta property="og:audio"

content="http://example.com/bond/theme.mp3" />

<Propriedade meta = "og: description"

content = "Sean Connery ganhou fama e fortuna como o

suave, sofisticado agente britânico, 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 encontrada em ogp.me / ns .

Propriedades estruturados Algumas propriedades podem ter metadados adicionais que lhes são inerentes. Estes

são especificados da mesma forma como outros metadados

com propriedade e conteúdo , mas a propriedade terá adicional : .

Page 4: O protocolo open graph

O og: image propriedade tem algumas propriedades estruturadas opcionais:

og: image: url - Idêntico ao og: image .

og: image: secure_url - um URL alternativo para usar se a webpage

requer HTTPS.

og: image: type - Um tipo MIME para esta imagem.

og: image: largura - O número de pixels de largura.

og: image: altura - O número de pixels de altura.

Um exemplo completo da imagem:

<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" />

O og: video tag tem as marcas idênticas og: imagem . 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" />

O og: Áudio tag só tem as 3 primeiras propriedades disponíveis (desde que o tamanho

não faz sentido para um som):

<meta property="og:audio"

content="http://example.com/sound.mp3" />

Page 5: O protocolo open graph

<meta property="og:audio:secure_url"

content="https://secure.example.com/sound.mp3" />

<meta property="og:audio:type" content="audio/mpeg" />

Arrays Se uma marca pode ter vários valores, basta colocar várias versões do

mesmo <meta> tag em sua página. A primeira tag (de cima para baixo) é dada

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 propriedades estruturadas depois de declarar sua tag raiz. Sempre que um

elemento de raiz é analisado, que a propriedade é considerada estruturado para ser

feito e outra é iniciado.

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 existem três imagens nesta página, a primeira imagem é 300x300 , o do

meio tem dimensões não especificadas, eo último é 1000 px de altura.

Page 6: O protocolo open graph

Tipos de Objetos Para que o seu objeto a ser representados no gráfico, você precisa especificar o

tipo. Isso é feito usando o og: tipo de imóvel:

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

Quando a comunidade concorda com o esquema para um tipo, ele é adicionado à lista

de tipos globais. Todos os outros objetos no sistema de tipo são Curie 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 setores. Cada vertical tem seu próprio

namespace. O og: tipo de valores para um namespace são sempre prefixado com o

namespace e depois de um período. Isso é para reduzir a confusão com tipos definidos

pelo usuário namespace que têm sempre dois pontos neles.

Música

Namespace URI: http://ogp.me/ns/music #

og: tipo de valores:

music.song

música: duração - inteiro > = 1 - O comprimento da música em

segundos.

música: álbum - music.album gama - O álbum esta canção é.

música: Álbum: Disco - inteiro > = 1 - Qual disco do álbum, essa

música é sobre.

música: Álbum: pista - inteiro > = 1 - Qual acompanhar essa música é.

música: Músico - perfil variedade - O músico que fez esta canção.

music.album

música: canção - music.song - A canção neste álbum.

música: canção: Disco - inteiro > = 1 - A mesma música: álbum:

disco , mas em sentido inverso.

música: Song: - inteiro > = 1 - A mesma música: Álbum: pista , mas

em sentido inverso.

música: Músico - Perfil - O músico que fez esta canção.

música: release_date - datetime - A data em que o álbum foi lançado.

Page 7: O protocolo open graph

music.playlist

música: canção - idênticos aos de music.album

música: canção: disco

música: Song:

música: creator - Perfil - O criador desta lista.

music.radio_station

música: creator - Perfil - O criador desta estação.

Vídeo

Namespace URI: http://ogp.me/ns/video #

og: tipo de valores:

video.movie

video: ator - perfil variedade - Atores do filme.

video: ator: papel - corda - O papel que desempenharam.

Vídeo: diretor - perfil variedade - Diretores do filme.

video: escritor - perfil variedade - Escritores do filme.

video: duração - inteiro > = 1 - O comprimento do filme em segundos.

video: release_date - datetime - A data em que o filme foi lançado.

video: tag - corda variedade Palavras - Tag associados a este filme.

video.episode

video: ator - Idêntico ao video.movie

video: ator: papel

Vídeo: diretor

Vídeo: writer

video: duração

video: release_date

video: tag

Vídeo: Série - video.tv_show - Qual série este episódio pertence.

video.tv_show

Um programa de TV multi-episódio. Os metadados é idêntico ao video.movie .

video.other

Page 8: O protocolo open graph

Um vídeo que não pertence a nenhuma outra categoria. Os metadados é idêntico

ao video.movie .

No Vertical

Estes são objetos definidos globalmente que simplesmente não se encaixam em um

vertical, mas ainda são amplamente utilizados e acordados.

og: tipo de valores:

artigo - URI de namespace: http://ogp.me/ns/article #

artigo: published_time - datetime - Quando o artigo foi publicado.

artigo: modified_time - datetime - Quando o artigo foi modificado

pela última vez.

artigo: expiration_time - datetime - Quando o artigo está

desactualizado depois.

artigo: autor - perfil variedade - Escritores do artigo.

artigo: Seção - corda - um nome de seção de alto nível. Tecnologia por

exemplo,

artigo: tag - corda variedade Palavras - Tag associados a este artigo.

livro - URI de namespace: http://ogp.me/ns/book #

livro: autor - perfil variedade - Quem escreveu esse livro.

livro: ISBN - corda - O ISBN

livro: release_date - datetime - A data em que o livro foi lançado.

livro: tag - corda variedade Palavras - Tag associados a este livro.

Perfil - URI de namespace: http://ogp.me/ns/profile #

Perfil: prenome - corda - Um nome normalmente dado a um indivíduo

por um dos pais ou de auto-escolhido.

Perfil: last_name - corda - Um nome herdado de um familiar ou de

casamento e pelo qual o indivíduo é comumente conhecido.

Perfil: username - corda - Um conjunto único curta para identificá-los.

perfil: sexo - enum (masculino, feminino) - O gênero.

website - URI de namespace: http://ogp.me/ns/website #

Nenhum outro do que os básicos propriedades adicionais. Qualquer não-marcado

webpage up deve ser tratado comoog: tipo de website.

Page 9: O protocolo open graph

Tipos Os seguintes tipos são usados na definição de atributos no protocolo Open Graph.

Tipo Descrição Literais

Boolean

Um booleano representa um valor

verdadeiro ou falso verdadeiro, falso, 1, 0

DateTime

A DateTime representa um valor

temporal, composto de uma data (ano,

mês, dia) e um componente opcional do

tempo (horas, minutos)

ISO 8601

Enum

Um tipo que consiste de um conjunto

limitado de valores de string constante

(membros de enumeração).

Um valor de cadeia que é um

membro da enumeração

Flutuar

A 64-bit assinado número de ponto

flutuante

Todos os literais que estejam

em conformidade com os

seguintes formatos: 1,234 -

1,234 1.2e3 -1.2e37E-10

Número

inteiro

Um inteiro assinado de 32 bits. Em

muitas línguas inteiros mais de 32-bits

se tornam carros alegóricos, por isso

limitar o protocolo Open Graph para

uso multi-linguagem fácil.

Todos os literais que estejam

em conformidade com os

seguintes formatos: 1234 -123

Corda A seqüência de caracteres Unicode

Todos os literais compostos de

caracteres Unicode, sem

caracteres de escape

URL

A 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 em grupo Facebook ou a lista de

desenvolvedor . Atualmente está sendo consumida pelo Facebook ( veja a sua

documentação ), Google ( veja a documentação ), e mixi . Ele está sendo publicado pela

IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp, e muitos outros.

Page 10: O protocolo open graph

Implementações A comunidade open source tem desenvolvido uma série de analisadores e ferramentas

de publicação. Deixe o grupo Facebook sei se você já construiu algo incrível também!

Facebook objeto Debugger - parser oficial do Facebook e depurador

Google rico Snippets Testing Tool - Abrir o suporte ao protocolo Gráfico

em setores específicos e motores de busca.

OpenGraph.in - um serviço que analisa Open Graph protocolo de

marcação e saídas HTML e JSON

PHP Validador e Markup Generator - OGP 2011 input validador e

marcação gerador em PHP5 objetos

PHP Consumidor - uma pequena biblioteca para acesso de Open Data

Protocol Gráfico em PHP

OpenGraphNode em PHP - um analisador simples para PHP

PyOpenGraph - uma biblioteca escrita em Python para analisar

informações de protocolo aberto Gráfico de sites

OpenGraph Rubi - Rubi Gem que analisa páginas da web e extratos Open

Graph protocolo de marcação

OpenGraph para Java - pequena classe Java usada para representar o

protocolo Open Graph

RDF :: RDFa :: Parser - Perl RDFa parser que entende o protocolo Open

Graph

WordPress Plugin - Plugin WordPress oficial do Facebook, que acrescenta

Open Graph metadados aos sites movidos a WordPress.

O protocolo Open Graph foi originalmente criado no Facebook e é inspirado

pela Dublin Core , link-rel canonical ,Microformats e RDFa . A especificação descrito

nesta página está disponível sob o Acordo Foundation Abrir Web, Versão 0.9 . Este site

é Open Source . Última atualização18 de novembro de 2012