O que é Facebook Open Graph Protocol Como Usar?

Há mais ou menos um ano atrás, o Facebook lançou um esquema de metadados chamado Open Graph, a fim de facilitar a integração entre páginas da web e o próprio facebook. Nas palavras deles, usando o Open Graph, você pode fazer qualquer página se comportar como um objeto do facebook, com direito a analytics e tudo.

A ideia dos desenvolvedores, no início, era usar tags de esquemas já existentes, como o Dublin Core e o foaf, além de meta tags do próprio html, mas no caminho eles perceberam que isso ficaria muito complicado, sem contar uma sopa de letrinhas. Assim, usando as especificações da W3C pro RDFa, o Open Graph reúne todos os atributos que eles julgaram úteis – os obrigatórios são:

  • Categoria: baseada nas páginas mais frequentes do Facebook, identifica a natureza daquele objeto. Pode ser uma atividade, um negócio ou um produto. Cada uma dessas categorias tem subcategorias que podem ser usadas pra refinar ainda mais essa classificação.
  • Um título “limpo”: sabe quando você manda uma página pra wall do Facebook e ela vai com o title superpoluído? Dessa forma você pode normalizar para um título mais agradável, sem as exigências de SEO.
  • Uma imagem: Ah, isso é bem interessante. Usando a tag de imagem do Open Graph, é possível associar uma imagem fixa ao objeto. Sem essa de mandar uma página pro Facebook e torcer pra cair uma imagem descritiva.
  • Uma URL canônica: eles pensaram em usar o rel-canonical, mas depois de consultarem usuários potenciais, perceberam que havia o medo disso impactar nos rankings de busca. Então incluíram essa tag.

Além dessas meta tags, que, no caso de uma página da web, ficam no <head>, existem também outras não obrigatórias porém recomendadas, como descrição e nome do site (para reunir páginas que pertencem ao mesmo site).

Usando o Open Graph com tags html
Exemplo de uso do Open Graph

Existem ainda tags que são usadas no conteúdo para identificar informações de contato, eventos, informações de vídeo, audio, etc.

Será que cola?

Apesar do principal objetivo deles com o Open Graph seja identificar esses elementos para incorpora-los aos dados do facebook em si, confesso que estudar sobre o esquema mudou um pouco minha opinião sobre a rede social. Através desse protocolo e da Open Graph API, que permite consultar praticamente tudo que está no facebook (se forem informações sobre os usuários, com a permissão dele, óbvio), é possível combinar o que está lá “dentro”, fechado, e o que está aqui “fora”, pra trazer mais contexto às informações apresentadas.

Por exemplo: não sou muito fã do conceito de busca social (e isso dá um post em si), mas pra certos nichos de consulta, é interessante contar com uma pequena ajuda dos amigos. O Yelp, site de reviews de restaurantes e negócios, e o Rotten Tomatoes, site de  reviews de filmes, já entenderam isso e levaram a integração além com o “Facebook Instant Personalization”, que dá grande destaque às opiniões e preferências das pessoas da sua rede de amigos.

Não sei qual é  o nível de adoção ativa (sem ser através do botão de like) disso – e nem sei se é usado por motivos “extra-facebook”, mas qualquer forma de organizar dados de maneira estruturada ganha um voto de confiança da minha parte. Considerando que uma das tags obrigatórias é exatamente de categoria, imagino as possibilidades de usar isso para desambiguação e oferecimento de informações exatas relacionadas a um tema. Afinal, o Facebook é a rede social mais popular do mundo, cada vez mais presente no Brasil e torna muito fácil para seus usuários manifestarem seus interesses – basta apertar “curtir”.

Além disso, ele é mesmo mais simples que os outros esquemas, porque não tem muito compromisso com abrangência, então não precisa prever “n” casos de uso, como acontece com os já citados Dublin Core e foaf, além de ter tags pensadas diretamente para objetosnativos da Web, como sites e blogs.

Obviamente, nem tudo são flores. o verdadeiro sentido do “Open” no nome do protocolo pode ser debatido: as informações são abertas, mas a forma como o usuário interage com elas é proprietária.

Ok, quero usar o Open Graph!

Bom, se você tem algum plugin oficial do botão de like no seu site, você provavelmente já utiliza. Mas se quiser um controle maior sobre a forma como as informações estão sendo passadas, no site oficial do protocolo você encontra o básico pra começar, como as tags e exemplos de aplicação. Lá também tem recursos para saber como usar o Open Graph com Java, PHP e Ruby.

O próprio Facebook oferece um gerador de botão de like e tags do Open Graph, prontinhas pra serem coladas no <head> da sua página.

 

Fonte:Anna Raquel do blog Modelo Mental
Bom com as explicações acima da amiga Anna Raquel vimos que este novo protocolo da facebook é uma boa tática de SEO para nós que criamos sites.
Bom após brincar um pouco na sessão de desenvolvedores do Facebook achei alguns links que podem ser usados em suas aplicações, ainda estou estudando o assunto se alguém tiver alguma sugestão por favor deixe seu comentário abaixo.

(Lembre-se substitua os nicknames pelos seus)

Descobrir sua ID no Facebook

http://graph.facebook.com/shaverm

Foto do Perfil

http://graph.facebook.com/shaverm/picture

Foto de Grupo

http://graph.facebook.com/69048030774/picture

Foto de Perfil de Páginas

http://graph.facebook.com/DoloresPark/picture

Pesquisar usuários

(no caso acima estamos procurando algum usuário com o nome MARK)

 

Bom por enquanto era isso pessoal, deixe seu comentário abaixo

Charles Corrêa on FacebookCharles Corrêa on GoogleCharles Corrêa on PinterestCharles Corrêa on RssCharles Corrêa on TwitterCharles Corrêa on VimeoCharles Corrêa on Youtube
Charles Corrêa
Administrador dos Sites Charles Corrêa, Blog Charles Corrêa e outros mais, programador web deste 2002 e sempre se atualizando as novas tendência do mercado, trabalho com soluções para SMS Marketing, E-mail Marketing, SEO, Mídias Sociais e moderador do fórum da Comunidade Brasileira do PHP-Fusion Brasil.
Também trabalhando com Internet Marketing desde 2004.

5 comments

  1. Firefox 42.0 Firefox 42.0 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.3) Gecko/20100101 Firefox/42.0

    Olá ! Isto post não podia ser escrito muito melhor!
    Olhando através de isto post me lembra do meu companheiro de quarto
    anterior! Ele continuamente manteve pregando sobre isto.
    Eu vou frente este artigo com ele. Quase certeza
    ele irá tem um muito bom ler. Agradeço-lhe por partilha!

  2. Firefox 50.0 Firefox 50.0 GNU/Linux x64 GNU/Linux x64
    Mozilla/5.0 (X11; Linux i686 on x86_64; rv:50.0) Gecko/20100101 Firefox/50.0

    Sou extremamente satisfeito para descobrir neste web site .
    Eu quero Obrigado para aqueles tempo por isso fantástico ler!!!!

    Eu definitivamente apreciado cada parte do-e eu tê-lo livro marcado para verificar novo coisas
    em seu local.

Leave a Reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *