Hoje em dia, todos os sites possuem os famosos botõezinhos de “curtir” ou “compartilhar” do Facebook. Este recurso é a maneira mais fácil de divulgar o conteúdo do seu site… cada pessoa que clica nestes botões, automaticamente posta em sua timeline do Facebook o link direto para o conteúdo do seu site. O sistema do Facebook automaticamente seleciona uma imagem e gera uma miniatura para ilustrar a página que foi “curtida”. A combinação da miniatura, link, descrição e título forma o que o Facebook chama de “Graph Object”. O problema é que o sistema não tem como adivinhar qual a melhor imagem para o conteúdo, e portanto, se não dissermos à ele qual imagem utilizar, ele vai simplesmente escolher uma aleatoriamente… E na maioria das vezes ela não corresponte ao conteúdo postado.

O “problema”

Para entendermos melhor o problema… Veja um exemplo prático. Um amigo tem um site onde ele divulga os ensaios fotográficos que ele dirige. Então ele monta alguns “álbuns” com título, descrição e  as fotos… ficando mais ou menos assim:

img-facebook-like

Porém, quando eu curto a página… ao invés do Facebook pegar uma das fotos do álbum, ou o título do álbum: “Aniversário da Marina”, ele simplesmente escolheu estas informações aleatoriamente. O que fez ficar um pouco confuso lá na minha “timeline”. As pessoas não tinham como adivinhar do que se tratava sem clicar no link para conferir.

img-facebook-like-2

Para corrigir este comportamento existe uma documentação disponível na página para desenvolvedores do Facebook: https://developers.facebook.com/docs/opengraphprotocol/. Lá é possível encontrar as “tags mágicas” que dizem ao Facebook exatamente o que ele precisa saber sobra a sua página e como ele deve promovê-la na sua timeline.

Entendendo os “Graph Objects”

Os Graph Objects, são esses quadradinhos marcados aí na imagem acima. Eles são a representação de uma página qualquer no Facebook. Existem tags que nos permitem determinar exatamente a extrutura as informações que serão exibidas por eles e é claro, que quanto mais informações nós fornecemos, mais oportunidades essas páginas terão… sendo clicadas mais vezes e chamando mais atenção. Vamos avaliar um exemplo que retirei lá da documentação oficial:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
    ...
  </head>
  ...
</html>

Estas metatags descrevem a página do filme “The Rock”. E a primeira coisa que precisamos observar é que todas seguem a mesma estrutura:

  • Uma tag META com os atributos PROPERTY e CONTENT.
  • Todos dentro do HEAD do HTML.

O protocolo Open Graph define quatro propriedades “obrigatórias”:

  • og:title: O título do objeto exatamente como ele deveria aparecer no gráfico, por exemplo, “The Rock”.
  • og:type: O tipo do seu objeto, por exemplo, “movie“. Veja a lista completa de tipos suportados.
  • og:image: URL da imagem que deve representar o seu objeto dentro do gráfico. A imagem deve ser de pelo menos 50px por 50px (embora 200px por 200px seja o minimo e o recomendado) e têm uma relação de proporção de 3:1 no máximo. Os formatos suportados são: PNG, JPEG e GIF. Você pode incluir várias tags “og:image” para associar várias imagens com sua página.
  • og:url: A URL completa de seu objeto, por exemplo, “http://www.imdb.com/title/tt0117500/”.

Existem também outras tags, que apesar de não serem “obrigatórias” são altamente recomendadas.

  • fb: app_id: Um “Facebook ID” para administrar esta página.
  • og: site_name: Um nome legível para o seu site, por exemplo, “IMDb”.
  • og:description: Uma ou duas frases para descrever sua página.

Usando estas boas práticas você tem a certeza de que sua página será sempre bem apresentada no Facebook. Não fique aí dormindo no ponto…

Abraços!