HTML

Open Graph Protocol na prática


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:

[gist]https://gist.github.com/1150657[/gist]

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.

 

 


I'm Pedro Mendes, a passionate developer and technology enthusiast. This blog covers programming and technology in the broadest sense possible. It's the place I collect my thoughts, work and findings to share with the public.

View Comments