O Open Graph Protocol é uma especificação de meta tags que pode ser adicionada ao código HTML de um website para fornecer informações específicas sobre a página aos mecanismos de busca e redes sociais.
O que é Open Graph Protocol?
Com tanta redes sociais, tantos formatos de compartilhamento de conteúdo e com tantas pessoas consumindo shares e likes da vida, alguém decidiu tentar por ordem na bagunça e criar um formato mínimo para compartilhamento de conteúdo, sendo criado assim o open graph protocol.
Facebook criou o protocolo em 2010 com o objetivo de tornar mais fácil para as pessoas compartilhar conteúdo na plataforma.
As meta tags Open Graph permitem que os desenvolvedores forneçam informações sobre a página, como título, descrição, imagem e tipo de conteúdo, para que as redes sociais possam exibir uma prévia mais atraente e informativa ao compartilhado.
Mecanismos de busca também usam essas meta tags para entender melhor o conteúdo da página.
Open Graph na prática
Tudo isto ocorre através de algumas meta tags inseridas no header da sua página, que especificam o tipo do seu conteúdo, além de uma descrição e mais algumas propriedades que irão variar de acordo com o que você pretende compartilhar.
Um exemplo disto é o que fiz em um projeto pessoal.
Primeiro eu criei as seguintes meta tags descrevendo o conteúdo:
Basicamente o que defini foram:
- Title
- Type
- Url
- Image
- Nome do site de origem
- Description
Com isso, quando alguém da um like na página, ela aparece no Facebook personalizada a partir das tags usadas. Por exemplo, olha como fica o share deste post no Facebook:
Problema encontrado
Um problema que enfrentei quando estava montando o OpenGraph deste site foi um cache absurdo que o Facebook possui.
Só pude ver algumas alterações quando esperei um tempo e acessei com um browser diferente. Uma ferramenta interessante para validar se seu OpenGraph esta correto é o Facebook Debugger . Assim você não precisa fica dando like na sua página saber como o Facebook vai interpretá-la.
Adoção
A adoção do Open Graph Protocol tem sido ampla entre desenvolvedores de sites, visto que ele permite que o conteúdo seja compartilhado de forma mais atraente nas redes sociais e ajuda a melhorar o SEO.
Isso porque, ele ajuda a identificar o conteúdo de sua página e mostrar de forma mais precisa e rica nas redes sociais, além de facilitar na indexação do seu site pelos buscadores.
Principais tags do Open Graph Protocol
As principais meta tags do Open Graph Protocol incluem:
- og:title: Especifica o título da página.
- og:type: Especifica o tipo de conteúdo da página. Pode ser algo como “website”, “article”, “book”, entre outros.
- og:image: Especifica a imagem exibida quando o conteúdo for compartilhado nas redes sociais.
- og:url: Especifica a URL da página.
- og:description: Especifica a descrição da página exibida so compartilhar o conteúdo nas redes sociais.
- og:site_name: Especifica o nome do site onde a página está localizada.
- og:locale: Usado para informar o idioma usado na página e outros parâmetros relacionados com a língua.
Essas são algumas das principais meta tags do Open Graph Protocol, mas existem outras como og:audio, og:video, og:article:published_time, entre outras.
É importante lembrar que essas metatags devem ser adicionadas no head do HTML da sua página para que sejam reconhecidas pelos buscadores e redes sociais.
Magento em um ambiente distribuído 
Pedor, quando esse problema de cache acontecer é só usar o URL Linter que ele atualiza num boa.
http://developers.facebook.com/tools/debug?ref=mf
Opa Ubiratan,
Sim, se você se guiar pelo Linter (agora eles chamam de Debugger) você não tem problemas. A questão é que mesmo com o cache do navegador desligado, o Debugger me dizia uma coisa, mas quando eu dava like, aparecia outra no Wall. O meu problema era especificamente com a imagem, ela sempre vinha errada.
Com um navegador diferente eu vi tudo funcionando. Após um tempo, tudo estava normalizado. Se eu tivesse me guiado pelo Debugger não tinha perdido tempo com um problema que não existia 😉
Vlw pela dica.
Olá Pedro, imagino que o Opengraph tenha várias aplicações, mas esta que você usou como exemplo (Geopromo, com título, descrição e thumbnail, não só a URL) me deixou em dúvida. Eu dei like num post de um blog feito em WordPress (instalado) e o Facebook conseguiu fazer a mesma coisa (capturou as imagens do post para que eu escolhesse uma para thumbnail, aproveitou título e descrição), só que o tal blog não tinha as metatags do Opengraph (só as típicas de SEO) que você usou em seu exemplo, será que o FB na falta destas tags og procura alternativas?
Opa Charles, então o FB melhorou bastante nesse ponto desde que fiz a postagem. Por coincidência, esses dias percebi que o algoritmo deles de parsing da página esta bem esperto, pegando as principais informações da página com uma precisão aceitável. E se você estiver usando um WordPress essa captura se mostrou excelente.
A questão é que como esse tipo de captura é meio que cega, pode ser que eventualmente o FB vai criar uma identificação da sua página que não seja a melhor para a marca que você esta tentando divulgar nas mídias sociais. Nesse caso a melhor saída é o Open Graph mesmo.
Opa Charles, então o FB melhorou bastante nesse ponto desde que fiz a postagem. Por coincidência, essas dias percebi que o algoritmo deles de parsing da página esta bem esperto, pegando as principais informações da página com uma precisão aceitável. E se você estiver usando um WordPress essa captura se mostrou excelente.
A questão é que como esse tipo de captura é meio que cega, pode ser que eventualmente o FB vai criar uma identificação da sua página que não seja a melhor para a marca que você esta tentando divulgar nas mídias sociais. Nesse caso a melhor saída é o Open Graph mesmo.
Gostaria de saber se tem como eu acompanhar quem está comentando as postagens e qual postagem ou até mesmo quem deu like ou compartilhou?
Tenho lido em muitos locais que a a tag og:image eibe imagens de no máximo 100px, redimensionando qd necessário. ok, mas a fan page da revista exame, por exemplo, exibe imagem com a tag og:image com 375pixels, ou seja, uma coluna da pagina. (http://on.fb.me/1f7TxvW). Essa limitação de 100 pixels foi alterada ou há algum gato? obrigado