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
  • 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.

  • Charles

    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?

    • pedrolopesme

      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?

  • Alexandre Porto

    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