O que faz exatamente este Open Graph?

  • 1 de janeiro de 2015
  • Dicas
No Comments

Ele faz qualquer página da internet ter as mesmas funções que qualquer objeto do Facebook. Isso pode ser utilizado, entre outras coisas, para criar aplicativos e tabs dentro do Facebook. Mas o objetivo deste post é ensinar a você como transformar os objetos de fora do Face em algo que ele possa entender. Para isto basta utilizar alguns metadados entre as tags <head> da sua página.

A estrutura de declaração é bem simples. Você abre uma meta tag e coloca dois valores:

property – Define qual é a propriedade Open Graph. São as palavrinhas com “og:” na frente!
content – O conteúdo. Pode ser um texto, um valor númerico, uma url, etc. Depende do parâmetro aceito pela propriedade escolhida.

Se parece confuso com um exemplo concreto fica mais simples. Você pode utilizar a meta abaixo para informar ao Facebook que o seu endereço é um website:

As propriedades básicas

» og:title – O título do seu objeto. Pode ser o nome da página, produto, serviço, artigo, etc.
» og:site_name – O nome do seu site. Se diferencia do tútulo por ser um contexto mais amplo. Por exemplo, este artigo faz parte do site BlogUp.
» og:type – O que exatamente é o seu objeto. Pode se tratar de um website, um artigo, um video, etc.
» og:image – A thumbnail que irá representar o seu objeto no Facebook. Pode ser o logo da empresa ou a imagem de exibição do seu artigo, por exemplo. Você pode colocar quantas você quiser, basta repetir uma tag embaixo da outra. Mas não vale a pena colocar muitas! As pessoas não vão ter muita paciência para ver todas… O Facebook a partir de 2013 começou a utilizar imagens retangulares para este parâmetro. O tamanho recomendável é 1200×630. Se a imagem for menor que 600 x 315 o destaque será menor.
» og:url – o endereço canônico que você deseja vincular aos seu site.

Vou exemplificar com as meta tags utilizadas neste artigo.

Reparem que no exemplo eu utilizei duas imagens de exibição. A thumbnail do artigo e o logo do blog.

A lista gigantesca de og:type

» O básico:
blog
website
article

» Atividades:
activity
sport

» Negócios:
bar
company
cafe
hotel
restaurant

» Grupos:
cause
sports_league
sports_team

» Organizações:
band
government
non_profit
school
university

» Pessoas:
actor
athlete
author
director
musician
politician
public_figure

» Lugares:
country
landmark
state_province

» Produtos e Entretenimento:
album
book
drink
food
game
product
song
movie
tv_show
upc
isbn

Ufa! Se ainda assim o seu objeto não se encaixar nesta lista você pode marcar como “other”.

Propriedade FB admin

Esta propriedade serve para vincular uma página da internet ao seu perfil no Facebook. Isso te permite ver estáticas e gráficos legais sobre a intereção dos usuários do seu site através do Facebook Insights. Para isso basta vincular o seu ID do Facebook utilizando uma das seguintes propriedades:

fb:admins – Uma lista separada por virgulas com os IDs dos administradores da página.
fb:app_id – Funciona da mesma maneira que o fb:admin, mas para ids de aplicativos dentro do Facebook.

Como descobrir o seu ID

Isso fica meio escondido, mas existem algumas gambiarras para descobrir… A maneira simples que encontrei é visitar o endereço: http://graph.facebook.com/seunomedeusuário. Substitua “seunomedeusuário” pelo – acho que você já adivinhou – seu nome de usuário! No meu caso, por exemplo, o endereço fica http://graph.facebook.com/sergiocapuzzo. Ao visitar esta página você pode descobrir, caso você ainda não tenha certeza, onde você mora, o seu sexo e o seu ID do Facebook.

Outras propriedades úteis:

og:description
og:site_name
og:audio
og:video
og:email
og:phone_number
og:fax_number
og:street-address
og:locality
g:region
og:postal-code
og:country-name

Alguns objetos como artigos, imagens, audios e videos podem conter ainda mais detalhes como dimensões, formato, etc No caso de uma música, por exemplo, é possível determinar a duração da faixa, o nome do album, o nome do artista… Existem MUITAS tags e você dificilmente irá utilizar todas. Odeio ser a pessoa chata que te manda ler a documentação, mas… leia a documentação! Você pode encontrar uma lista completíssima das tags aqui e aqui.

Quer saber se deu certo?

Conheça o seu principal companheiro de jornada: o Debugger! É só entrar neste site, colar o seu link na caixinha que ele te mostra como o Facebook está interpretando o seu site e onde você está fazendo tudo errado.

Facebook DebuggerSeu melhor amigo!

Você pode alterar estas informações a qualquer momento, mas o Facebook coloca algumas restrições: após 50 “curtidas” og:title se torna fixo. O mesmo acontece com a propriedade og:type após 10.000 “curtidas”. Isto acontece para evitar que você curta a página “Eu sou palmeirense” e um desenvolvedor espertinho troque o título para “Vai Corinthians!”.

Dicas para quem utiliza WordPress

wordpress

Nós te amamos, WordPress! <3

Bem, marcar meta dados em HTML parece fácil e rápido. Exceto quando seu site tem milhões de páginas! Mas você consegue utilizar PHP para automatizar as coisas e deixar tudo mais fácil. Aqui vamos dar alguns exemplos para quem utiliza o CMS WordPress, mas você pode adaptar isto para qualquer situação! É claro, existem plugins que quebram um agalho e automatizam o processo… Mas você pode acabar perdendo o controle da situação e deixando o seu site/blog/whatever mais pesado a toa, certo? Vamos quebrar o seu galho então e dar uns exemplos de código.

1. Pega automaticamente o nome do seu blog.

 

2. Configura o título da página no Facebook. Se estiver dentro de um post, mostra o nome do artigo. Se não mostra o nome do site.

 

3. Coloca o excerto (o texto antes do “leia mais”) do seu post como descrição no Facebook.



4. Se o seu post tiver uma imagem em destaque coloca ela como og:image. Se não, utiliza uma imagem padrão definida por você.

5. Define o permalink do seu post como URL canonica.

 

6. Se você tiver dentro de um post ou página define o tipo de conteúdo como “article”. Se não define como “blog”. Você pode substituir por website, etc.

O último passo – adicionar o botão curtir!

Visite a central de desenvolvedores do Facebook, preencha o formulário e gere o código do seu botão. Cole o script no seu site e seja feliz! :) Nesta mesma página o Facebook também disponibiliza um gerador automático que pode te ajudar a na elaboração das Open Graph tags básicas. O gerador pode quebrar um galho se tudo isso parecer confuso, mas não substitui você ler sobre o assunto e criar algo realmente relevante e personalizado para o seu projeto.

Curtir

Deixe um comentário

Comentários


Veja outras máterias interessantes