Open Graph Protocol na prática

by pedrolopesme Posted on August 17, 2011

Com tanta redes sociais, tantos formatos de compartilhamento de conteúdo e com tantas pessoas consumindo shares, likes e plus1s 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.

Na realidade este “alguém” foi o próprio Facebook, e portanto é ele quem esta consumindo este formato ferrenhamente.  A idéia é bem interessante: seu conteúdo se torna um objeto rico e pode ser compartilhado através de algo mais interessante (e chamativo) do que um mero link.  Este conteúdo pode ser um vídeo, imagem, post, audio, localização, produtos, etc. Um exemplo disto é no próprio Facebook, quando alguém compartilha um link do youtube, um pequeno thumbnail aparece junto a um titulo, e o video pode ser visto no próprio perfil do quem postou.

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 no GeoPromo.

Primeiro eu criei as seguintes meta tags descrevendo o conteúdo:

<meta property="og:title" content="Geopromo"/> 
<meta property="og:type" content="website"/> 
<meta property="og:url" content="http://www.geopromo.com.br"/> 
<meta property="og:image" content="http://www.geopromo.com.br/images/icons/opengraph.jpg?1312037161"/> 
<meta property="og:site_name" content="Geopromo"/> 
<meta property="og:description"
        content="Encontre e organize as melhores ofertas da internet baseado na sua localizacao"/>
view raw gistfile1.html This Gist brought to you by GitHub.

Basicamente o que defini foram:

  • Title
  • Type
  • Url
  • Image
  • Nome do site de origem
  • Description

Com isso, por exemplo, quando alguém da um like na página, ela aparece no Facebook como :

E não é só no Facebook na web, mas também na versão mobile do Facebook (android).

Problema

Um problema que enfrentei quando estava montando o OpenGraph do GeoPromo 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.

 

 

This entry was posted in HTML. Bookmark the permalink.
  • http://www.facebook.com/ubiratanbraga Ubiratan Braga

    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

  • Anonymous

    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.