Dani Guerrato

Facebook Open Graph

Por | Comentários: 77

Neste artigo você vai aprender a obter controle sobre os dados compartilhados no Facebook através do protocolo Open Graph. Aqui você vai ler explicações detalhadas a respeito das principais tags, exemplos concretos de uso e dicas ninjas. Espero que vocês curtam! :)

A importância dos metadados

Então você desenvolveu um site novo! Ele está lá todo bonitão, com o código semântico e o design impressionante. Mas o trabalho não acabou ainda. Você quer estimular os usuários a interagirem, discutirem e compartilhem o conteúdo e, logicamente, atrair mais visitantes! Como hoje o Facebook é a rede social mais utilizada no Brasil é natural que ele seja a melhor escolha para divulgar o conteúdo. Mas não é só largar um botão curtir em qualquer canto do seu site e se dar por satisfeito. É necessário informar aos Facebook que tipo de conteúdo é este que você quer compartilhar.

Muita gente quando pensa em metadados lembra automaticamente do Google. É claro, otimizar o seu site para que tudo corra bem lá no gigante das buscas é fundamental! Mas outro fator importante que as vezes fica de lado é o cuidado com a organização dos dados nas redes sociais.

Realizar a marcação correta de metadados não é apenas uma questão de organização de informações na timeline, mas também de publicar conteúdos para o seu público alvo ideal. Isso acontece por que o Facebook a todo tempo cruza as informações que você já curtiu para determinar quais conteúdos são mais relevantes para você. E te mostrar mais disso! Se você curtir videos verá mais videos, se curtir games verá mais games, etc. Ou seja, se você utilizar o Open Graph para marcar o blog da sua banda, por exemplo, e compartilhar o link no Facebook isto vai aparecer com mais destaque para aquele seu amigo que sempre curte links sobre música. E assim o Facebook encontra o público alvo perfeito para o seu blog. Tudo isso é feito através de um software chamado Scribe. Este artigo da revista Wired explica como isto funciona. Vale a pena a leitura!

open graph

Bem, vamos aprender como dizer para o Facebook como organizar o conteúdo da sua página. Isto pode ser util para informar qual é o título correto de um post, a imagem de exibição que você quer que apareça quando compartilharem a notícia, qual e a descrição correta… E a ferramenta que você tem para dizer ao Face como organizar os dados da sua página é através do protocolo Open Graph.

Como isso pode te ajudar?

Toda vez que alguém compartilhar o seu link no Facebook você terá controle total sobre as informações que serão mostradas. Além disso estudos mostram que as pessoas clicam mais em links no Facebook que estão acompanhados de imagens. Isso acontece por que links com imagens ocupam um espaço maior e se destacam por conta do contraste das cores. E você quer que as pessoas cliquem no seu link, certo?

Vou dar um exemplo pessoal do que acontece se você não se preocupa muito com isto. O portfólio da minha empresa, a PopUp Design, tem páginas específicas para cada projeto de design com fotos e um mini-case. Mas as meta-tags não estavam configuradas então o Facebook chutava qualquer conteúdo! Resultado? Quando a pessoa compartilhava o link direto de um de nossos trabalhos o resultado era o seguinte:

Exemplo do Open Graph mal configurado

Uma bagunça, né? O Facebook pegou um texto aleatório da seção sobre, o título ficou enorme, a url apontava para o endereço da home (e não para o job específico) e a thumbnail nem apareceu! Após as meta tags corretas o mesmo compartilhamento traz o seguinte resultado:

Exemplo de uso correto do protocolo Open Graph

Tudo muito mais lógico e organizado. Levamos o tempo ainda para escrever uma descrição personalizada do job que só aparece quando a pessoa compartilha no Facebook em uma linguagem mais descontraída em comparação a descrição que utilizamos para o Google. Isto tornou a comunição entre a empresa e a rede social algo muito mais gostoso. As possibilidades como uma ferramenta para alcançar este público são imensas e estavam sendo completamente desperdiçadas…

OK. Mas o que faz exatamente este tal de Open Graph?

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/daniguerrato. 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 Debugger Seu 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

Por dentro do schema…

Ficou curioso para saber como isso o Google indexa meta dados? Bem, atualmente, não apenas o Google, como o Bing, o Yahoo! e Yandex (um mecanismo de busca famoso na Rússia) utilizam um protocolo chamado Schema… Não vou contar mais agora por que nós odiamos spoilers e este é o assunto do próximo post. Nos vemos na próxima! :)

Tags: > , , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • http://www.facebook.com/brunobruno3 Bruno Monteiro

    Completissimo! Parabéns. :)

  • Leandro Rodrigues

    Olá Dani! Gostei muito das dicas, gostaria de saber você conhece algum lugar onde ofereçam um curso completo ou um módulo sobre esse assunto de mídias digitais de uso técnico? pq eu conheço escolas que falam sobre o assunto falando mais do lado do marketing e de como o profissional interagir na relação empresa e público, mais eu gostaria de ver amplamente a questão do ponto de vista do desenvolvedor… Tem alguma sugestão de onde posso aprender mais? Obgd e Abçs

  • http://www.facebook.com/danillosg Danillo Guimarães

    Ótimo artigo! Parabéns!

  • Cleto Souza

    A melhor explicação sobre o assunto! Parabéns!

  • http://www.facebook.com/renan.saulo Renan Sales

    Excelente o post tirou todas minhas dúvidas!!!
    =)

  • http://twitter.com/gabrielrb Gabriel RB

    Gostei da explicação. Vai pros favoritos.

  • secarosom

    Obrigado, esclareceu legal!

  • Renan

    No wordpress estou usando thumnails com tamanho personalizado. Eu fiz da seguinte maneira:
    ID ) ) {
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $posts[0]->ID), array(240,134) );
    $thumb = $thumb[0]; // retorna url do thumbnail customizado
    echo “”;
    }?>

    • Renan

      ID ) ) {
      $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $posts[0]->ID), array(240,134) );
      $thumb = $thumb[0]; // retorna url do thumbnail customizado
      echo “”;
      }?>

      • Renan

        Não rola colocar código no comentário?

  • Felipe Theossi

    Achei o blog por acaso, e esse foi o primeiro post que eu li.
    Gostei muito do post, tem conteúdo é completo e a leitura é super tranquila.

    Obrigado pela dica…

  • Junior vaka

    Estou com esse problema. Toda vez que vou compartilhar algo do meu blog aparece outra imagem que não tem nada a ver com o post. Vou tentar configurar. Valeu pela dica. Parabens.

  • http://www.facebook.com/profile.php?id=100001776686180 Vanessa Eufrásio

    Curti. Te doaria 5 dólares ;D

  • http://twitter.com/_rhfactor RH Factor Dev

    Muito bom!

  • masavio

    Muito bom. Parabéns. De fato, o melhor texto que vi sobre o assunto.

  • Alejoiss

    Muito bom o Texto. Me ajudou bastante :D. Parabéns!

  • Alexandre

    Olá Dani, espero que possa me ajudar… estou construindo esse site http://www.gtsdesign.com.br e implementei os botões de compartilhamento manualmente, (estou usando wordpress). Acontece que quando eu clico em curtir o flyout do face está cortado, impossibilitando de comentar e compartilhar… segue as instruções do facebook mas não resolveu…

    “When I click the Like button, the popup window (or “flyout”) doesn’t show. Why?

    If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.”

    o seu por exemplo está funcionando corretamente, mas o meu não, vou enviar um printscreen para vc poder visualizar o caso: http://prntscr.com/1e492s
    Espero que possa me ajudar…. abraços

    • http://www.popupdesign.com.br/ Dani Guerrato

      Alexandre
      Não olhei o seu código, mas o texto em inglês que você copiou e colou já explica o erro. Você colocou o botão de like em um elemento html com overflow hidden. Esta propriedade corta tudo que passa da altura do elemento. Aumente o tamanho deste elemento ou utilize alguma outra solução no seu CSS como overflow auto ou clearfix.
      Um abraço!

      • Alexandre

        Ok Dani, vou verificar isso novamente… Mas eu tenho uma outra questão para vc…
        Depois que fomos para a plataforma wordpress, o nosso site despenco no rank do Google, esse seu artigo realmente é muito bom mas eu tive que fazer algumas mudanças, não me lembro agora pois faz dois meses. Eu estudo SEO a 3 anos e estou quebrando a cabeça agora com SEO em WordPress mas ainda não obtive o sucesso que tenho quando trabalho com HTML puro… alguma dica como eu posso otimizar meu código? O site é http://www.gtsdesign.com.br

        • http://www.popupdesign.com.br/ Dani Guerrato

          Alexandre, SEO não é minha especialidade, mas pelo que eu sei é natural perder algumas posições após qualquer mudança estrutural grande. De cabeça não lembro de nenhuma técnica específica exclusiva para WordPress, mas algo que me ajudou bastante pessoalmente foi marcação de dados estruturados (Schema), bem como integração com Google+. Não olhei o seu código, mas o resto das dicas provavelmente são coisas que você já está (ou deveria estar) fazendo como cuidado com semântica do HTML, urls amigáveis, meta-tags estruturadas, sitemap, integração com o Webdevelopers Tools, etc Lembrando sempre que conteúdo relevante é a melhor estratégia de SEO. :)

          Se você precisar de uma ajuda mais específica mande um e-mail para contato@popupdesign.com.br para um orçamento de consultoria.

          • Alexandre

            Obrigado Dani, ouvir dizer que muitos sites feitos em plataforma worpress são penalizados devido a grande quantidade de sites de baixa qualidade utilizando essa plataforma… tudo isso mencionado por ti foi feito… vou estudar os códigos e achar um pulo do gato… mas acho que vou ter que trabalhar pesadamente em building links…

            Obrigado

  • Vitor Bustamante

    Olá, obrigado pelo bom artigo. Existe alguma marcação para que certas imagens não sejam disponibilizadas no compartilhar? Obrigado!

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Vitor!
      Eu desconheço esta função. A minha sugestão seria utilizar alguma imagem neutra no parâmetro og:image (como o seu logotipo ou avatar, por exemplo). Desta forma o Open Graph não disponibilizaria nenhuma outra imagem.
      Um abraço!

  • http://www.blogdozemarcos.com Zemarcos

    O Facebook mudou de novo a escolha de imagens, oferecendo três opções. E agora não funciona mais a exibição da imagem do post e o resumo…

    • http://www.popupdesign.com.br/ Dani Guerrato

      O Facebook mudou apenas o tamanho da imagem (já atualizado no post). O restante do código funciona normalmente…

  • Tila

    De facto muito bom o artigo, mas para mim é chinês . Pelo menos fui ao Debugger (que desconhecia completamente e o que me aparece é: o aviso abaixo copiado. Mas não sei o que fazer nem onde devo ir para emendar. Ao blog ou ao facebook? E como fazer passo por passo (è que não percebo mesmo nada) Agredeço, desde já se puder me ajudar . Obrigado Tila
    Avisos do Open Graph que devem ser corrigidosPropriedade inferida:A propriedade “og:url” deve ser fornecida explicitamente, mesmo que um valor possa ser inferido a partir de outras tags.Propriedade inferida:A propriedade “og:title” deve ser fornecida explicitamente, mesmo que um valor possa ser inferido a partir de outras tags.Propriedade inferida:A propriedade “og:description” deve ser fornecida explicitamente, mesmo que um valor possa ser inferido a partir de outras tags.Propriedade inferida:A propriedade “og:image” deve ser fornecida explicitamente, mesmo que um valor possa ser inferido a partir de outras tags.A “og:image” deve ser maior:A “og:image” fornecida não é suficientemente grande. Utiliza uma imagem que tenha, pelo menos, 200×200 px. A imagem “http://1.bp.blogspot.com/-EdFyqg00S6s/UXMFxIFH6OI/AAAAAAAABrE/ezKOzUxBCdo/s1600/Capa+H+6.jpg” vai ser utilizada em vez dessa

    • http://www.popupdesign.com.br/ Dani Guerrato

      Tila,
      Tendo como base apenas o texto que você postou é possível inferir, entre outros problemas, que a sua imagem não tem as dimensões corretas (necessário ao menos 200×200 pixels) e portanto não pode ser utilizada. Tente novamente com uma imagem quadrada maior do que estas dimensões.

      Este blog é direcionado a designers e desenvolvedores web profissionais. É necessário conhecimento básico em HTML/CSS para seguir este artigo, bem como a maior parte do conteúdo aqui disponível. Se você é iniciante recomendo a utilização de algum plugin compatível com a sua plataforma (blogspot) que possa fazer isto automaticamente para você. Ou busque um webdesigner profissional de sua confiança para realizar as adaptações necessárias no código.

      Um abraço!

      • Darlon

        fico feliz de ver mulheres desenvolvendo. esse desenvolvimento web ja tava muito maxista kkkkk

  • Clao Pedrass

    Oi Dani, será que voce pode postar o script para Joomla? Já baixei e testei trocentos plugins e nada. Ao curtir o artigo ou colar a url no Facebook não aparece a miniatura do artigo e o título nem sempre é o correto. Agradeço antecipadamente e fico ansioso por sua preciosa resposta. Abç.

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Clao!

      Para ser sincera eu não trabalho com Joomla. Mas a lógica basicamente é a mesma. Utilize o script em sua versão HTML e substitua o código dentro das metatags pelas variáveis de Joomla correspondente a cada um dos itens.

      Uma outra opção é utilizar alguma extenção pronta como:
      http://extensions.joomla.org/extensions/site-management/seo-a-metadata/open-graph

      Um abraço!

  • Darlon

    puts excelente! não tem lugar melhor seus artigos dão gosto de ler. olha que eu prefiro vídeo! kkk

  • Diego Oliveira

    Simplesmente excelente, nada mais!

  • http://companhiadereisestreladaguia.meximas.com/ Roberto Hebert

    Pode ser útil a informação que vou passar para quem estiver com problemas na atualização de miniaturas: após exaustivos testes notei que para atualizar a imagem é necessário trocá-la de pasta, na estrutura de pastas do seu site, informar o novo caminho na propriedade ‘og:image’ da metatag e acionar novamente o Debbuger do Facebook. Não sei ao certo a causa, mas parece que o servidor deles cria um tipo de cash, talvez trocar o nome da imagem pode funcionar também, não testei.

  • Bruno Souza

    Estou com problemas na criação de Histórias dento do Opengraph, não consigo achar uma palavra correta que defina uma ação e o objeto dentro dele, ja faz dois dias que estou tentando, se puder me ajudar eu agradeço. Meu blog: http://www.ultimatecnologia.com.br

    Preciso de ajuda urgente!

  • Mestre Elias

    Ola
    Muito bom esse seu artigo mais ainda nao consegui resolver o meu problema, eu to com o classipress e na hora de compartilhar os anuncios no face, aparece outras imagens, eu ja tentei de tudo, poderia vc me dizer qual é o arquivo que se encontra as balisas para eu mesmo adicionar os codigos ?
    desde ja muito obrigado

  • Marcio Marins

    Olá Dani!!
    Sei que e tópico é meio antigo mas foi uns dos melhores que achei até agora.

    Gostaria de saber porque estou tendo problemas com acentuação nos textos das meta tags e porque o já que uso .

    Quando clico no botão LIKE do meu site não aperece as informações que estão nas meta tags correspondentes e a acentuação fica toda bichada além da demora na atualização.

    Abraço!

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Márcio,
      Tente utilizar charset=UTF-8.
      Um abraço!

      • Marcio Marins

        O problema é que a pagina é renderizada em PHP.

        • http://www.popupdesign.com.br/ Leandro Lima

          Isso não é um problema… você pode usar UTF-8 em PHP… é só ver este blog! ;)

  • Hector Castilla

    Ola Dani!

    vc tem ideia porque este código <meta property="og:url" content="”/> na home do site está pegando a URL do primeiro post em lugar de pegar a URL do site?

    obrigado.

  • Tiago Bezerra dos Santos

    Dani, como sempre, artigo fantástico e dicas valiosíssimas! Parabéns!
    Apenas fiquei com a mesma dúvida do colega Hector Castilla: o código citado sempre pega a URL de um determinado post.
    Alguma dica? Obrigado.

  • Carlos

    Olá, parabéns pelo post. Gostaria que me tirasse uma dúvida se possível, já revirei o google de cabeça para baixo e não achei nada satisfatório, a não ser o seu post que foi o mais explicado que achei. Quando eu clico no botão de compartilhar no meu site, ele não aparece a página na linha do tempo do facebook. Já tentei de tudo e não to conseguindo. segue as metatags:

    <meta property="og:title" content="” />

    <meta property="og:url" content="http://www.bagateladobairro.com.br/resultado.php?id=” />
    <meta property="og:image" content="http://www.bagateladobairro.com.br/fotos/” />

    <meta property="og:description" content="” />

    To fazendo algo de errado? Tenho que fazer alguma coisa com algum aplicativo do facebook? o site é bagateladobairo(.)com(.)br

  • http://www.tudoparawordpress.com.br/ Guga Alves

    Só uma correção. Em ‘Dicas para quem utiliza WordPress’, não faça isso desse modo.
    Instale o plugin WordPress SEO e faça por ele. Você já vai precisar mesmo de uma série de coisas q esse plugin faz, e ele gerencia corretamente as tags Open Graph, além das tags do Twitter e as tags title e description, importantes para SEO.

    • http://www.popupdesign.com.br/ Dani Guerrato

      A palavra “correção” pode confundir as pessoas. Eu diria que este é um método alternativo de implementar o Open Graph e válido para quem tem pouca intimidade com HTML. Eu, pessoalmente, não gosto de utilizar plugins terceirizados para coisas que podemos desenvolver utilizando código puro. Essencialmente isto deixa o carregamento mais pesado, cria dependências desnecessárias e suja o código. Não existe nenhum plugin de WordPress que eu “precise” usar. Sinceramente, prefiro admistrar meta tags por conta própria e o foco deste artigo é justamente para quem deseja entender como a coisas funcionam de maneira mais profundada do que “instale o plugin x ou y”. Mas obrigada pela sugestão de qualquer forma.

      • http://www.tudoparawordpress.com.br/ Guga Alves

        Concordo que não seja bom usar plugins para coisas simples, mas se você for fazer tudo o que é relacionado a SEO sem usar este plugin, você terá que adicionar muitas horas de trabalho e manutenção no site para garantir que tudo vai funcionar bem. Em casos como esse, é sim recomendado usar um plugin.
        Fazer isso manualmente pode ser interessante, mas se você quer poder configurar manualmente cada post, pois cada um pode ter suas caracteristicas que levem a serem configurados de forma diferente da padrão programada, você teria que criar uma metabox pra controlar tudo isso em cada post. E você acabaria precisando de um plugin para controlar indexação do post, inclusão ou não em sitemap, prioridade nele, entre muito outras coisas.
        A description nem sempre deve ser o excerpt do post, ele pode estar sendo usado no site e com um limite de caracteres bem maiores que uma description deve ter. A imagem a ser colocada no og:image tem uma dimensão máxima, que pode ser diferente do post_thumbnail, portanto é bom tratar ela em separado ou ter um recorte específico para isso.
        Utilizar um plugin bem feito,bem vailidado pelo mercado e extremamente útil é sim recomendado, o que não é recomendado é sair instalando qualquer um sem certeza de sua qualidade. Portanto sim, é uma correção, não é recomendado fazer tudo isso manualmente se já tem como fazer em um plugin que é essencial para um projeto que almeja boa indexação no google e controle de todos os itens essenciais inerentes ao SEO.

        Não estou aqui desmerecendo seu trabalho ou seu post, apenas pasando uma dica de uma melhor metodologia a ser seguida neste caso.

        • http://www.popupdesign.com.br/ Dani Guerrato

          Cuidado com este tipo de atitude, já que pode sim ser interpretada de forma prepotente. Não é legal chamar de “correção” ou “melhoria” algo que é tão sujeito a interpretações. Cada um tem a sua própria metodologia e a do nosso blog é de ensinar a pescar ao invés de mandar comprar o peixe na feira sem, com o perdão da expressão, “cagação de regra”. ;) Eu prefiro explicar como as coisas funcionam para que aí o leitor decida qual caminho prefere seguir. Afinal, você pode achar o plugin útil no contexto do WordPress… mas e se você está trabalhando com HTML puro, utilizando outro CMS como Joomla ou até mesmo outra linguagem de programação? Sabendo como funciona você tem a liberdade de ENTENDER na prática como e poder ESCOLHER qualquer caminho (inclusive o plugin, se achar válido). A diferença é que agora você entende como ele atua e pode replicar a funcionalidade se precisar um dia. Enquanto se você souber apenas instalar plugins ficará preso ao trabalho de terceiros. A cada mudança no Open Graph você precisará esperar a equipe atualizar o plugin. E se eles abandonarem o projeto? E se você precisar migrar para outra plataforma?

          Eu, pessoalmente, faço tudo isto através de campos personalizados mesmo e não acho que seja um trabalho grande. A beleza do PHP é esta. Você só faz uma vez e é replicado para o restante do conteúdo. Simples, limpo e rápido. Tanto que é algo que oferecemos para todos os nosso clientes e nossa equipe é composta de apenas dois desenvolvedores. E sim, temos uma boa indexação no Google, tanto que você provavelmente encontrou este texto assim. O melhor SEO é um conteúdo de qualidade. :)

          Um abraço!

          • http://www.tudoparawordpress.com.br/ Guga Alves

            Não falei com prepotência alguma, falei tentando ajudar com uma prática que julgo melhor. Uma pena tentar ajudar e ser chamado de prepotente, mais respeito aos visitantes por aqui, ok?

          • http://www.popupdesign.com.br/ Dani Guerrato

            Guga, repare bem que não te chamei de prepotente. Eu disse que sua atitude pode ser interpretada desta forma e te aconselhei medir melhor suas palavras. A expressão “correção” parte do ponto de vista que o outro está errado, quando o que ocorre aqui é uma divergência de pontos de vista. Neste caso acredito que as palavras “dica”, “sugestão” ou “opinião” seriam, como você colocou, mais respeitosas. Eu dei todo tipo de argumento para justificar a minha opinião (veja bem, opinião, não correção! Em nenhum momento eu disse que você está errado) a respeito do ponto que você levantou, explicando nossa metodologia e questionamentos e você ignorou todos eles e simplesmente me acusou de falta de respeito. A partir do momento que você está deixando de discutir ideias e levando a discussão para o lado pessoal ela deixa de ser uma conversa e passa a ser um bate-boca o não é mais proveitoso nem para mim nem para o restante dos leitores. Prefiro encerrar por aqui. Um abraço!

        • http://www.popupdesign.com.br/ Leandro Lima

          O artigo é sobre como usar o Opengraph. Em qualquer linguagem. HTML, PHP, ASP ou em qualquer CMS que você escolher. Não nos limitamos a WordPress e plugins… uma hora o plugin cai em desuso, e ai, quem não sabe fazer sem plugin fica sem as pernas. ;)

          Correção da a entender que o artigo está errado, e não está. Como disse, nós não nos focamos em WordPress. Apenas, no final, demos uma dica útil para quem usa. Mas, todas as dicas servem pra qualquer CMS.

          Ensinamos a pescar, não damos o peixe… ;)

          • http://www.tudoparawordpress.com.br/ Guga Alves

            Concordo com você, Leandro, quando diz que em plugins tem esse perigo de cair em desuso, mas conhecendo o plugin, podemos saber que ele é um plugin sério, e não um plugin feito por curioso que o abandona depois..
            A dica foi específica para WordPress, e dei uma dica focada nele apenas. Não dei peixe algum, apenas uma dica, afinal não adianta instalar o plugin e não o configurar direito.

          • http://www.popupdesign.com.br/ Leandro Lima

            Guga, só uma observação: você está dizendo que a sua observação é uma correção. Correção parte do pressuposto que tudo o que foi escrito está errado, e que a sua opinião está certa.

            Poderia dizer: “É uma dica pra quem sua WordPress”, “É um Plugin interessante”… mas disse que é uma correção. Isso soa como um desmerecimento ao que foi dito, e uma tentativa de colocar a sua ideia acima de todo o resto do conteúdo. Enfim…

            Eu já trabalhei com este plugin que você disse em alguns projetos. Achei ele realmente interessante. No entanto, já vi usuários mais leigos com dificuldades de trabalhar com eles. Além do mais, fazer manualmente e usar Custom Fields me deu um controle maior do código, e não dependeu de um tempo a mais de trabalho. Acabou sendo tudo bem prático e fácil… ;)

            Pra quem quiser usar o plugin, vai fundo… mas, antes de usar qualquer plugin, acho fundamental saber viver sem ele…

  • http://qualidadebemestar.com.br/ Fabio Coelho

    Muito bom o artigo! Parabéns! Mas o artigo parece ser para desenvolvedor pois eu fiquei boiando onde colocar esses códigos. Quando começou a dizer “utilizar alguns metadados entre as tags da sua página” me perguntei: “onde fica essa ?” rs :)

  • Alessandra Lima

    Oi Dani, tudo bem? fiz o teste do debugger e tive a seguinte resposta: Facebook URLs aren’t scrapable by this Debugger. Try your own. Você sabe me dizer por que está me pedindo para usar o meu próprio url?

  • http://hiltonmuccillo.com.br Dev Front-End

    Parabéns Dani! Excelente!

  • Fabio Pereira

    Top, pra mim só faltava lembrar desse maldito Debugger kkkkkkkkkkkk Valeuuuuuuuuuuu

  • Maike

    Dani, eu precisava realmente disso, fazer com que o facebook pegasse minha imagem destacada, mas usando o código que você passou gerou erro! Você pode me ajudar? Se e te passar as minhas meta tags, você me ajuda a implantar isso?
    Obrigado desde já

  • Luciane

    Olá Dani! Obrigada pelas explicações! Li vários artigos mas nenhum explicava o significado de cada meta tag. Gostaria de saber se vc poderia me ajudar. Tenho um blog no wordpress e todo o compartilhamento dos posts no facebook já funcionam. Só a imagem do compartilhamento que sempre vai uma imagem do nosso perfil do gravatar! Já inclui a meta tag Já atualizei o compartilhamento do SEO Yoast e nada… como posso resolver este problema?

  • brazuca trader

    Não funcionou já estou desesperado para solucionar o problema!

  • Rodinei

    Olá Dani, parabéns pela dedicação, mas tenho um monte de dúvidas, como não sei nada de html ou php, preciso saber Isso é um html? Um PHP? Seja qual for onde eu gravo isso em meu site para que ele seja acessado? A imagem selecionada para ser aberta no facebook devo gravar ela em algum lugar em especial dentro de meu servidor? Se é um arquivo que faz parte de minha página onde ele está? Qual o nome dele?, e como eu publico ele?

    • http://www.popupdesign.com.br/ Leandro Lima

      Oi Rodinei, tudo certo?

      Os artigos do nosso blog são voltados para pessoas com conhecimento intermediário em HTML. O que estamos mostrando aqui é um HTML com alguns metas de WordPress aplicados.

      Recomendo que você se aprofunde nos estudos de HTML e PHP para não ter dúvidas.

      Mas, para te responder de maneira rápida:

      1 – É um HTML e um PHP ali em cima. A parte do Opengraph é HTML e a parte do WordPress é em PHP.
      2 – Você deve colocar essas infos no head do seu site. Se for em WordPress, no arquivo header.php
      3 – A imagem selecionada estará em seu servidor.
      4 – Eu não sei o nome do arquivo nem onde ele está, hahaha. Ele, provavelmente, está em algum lugar em seu servidor.

      Caso continue na dúvida, recomendamos sempre que você contrate um profissional especializado.

      ;)

  • André

    No meu site, quando compartilho no facebook, a imagem não aparece no espaço reservado para ela.
    Quando tento acessar diretamente pelo link da imagem, retorna erro 403.

    Já mudei a resolução da imagem e nada.
    Alguma sugestão?

  • Michael Felipe

    Uau!! Muito bom o artigo! Obrigado :D

  • André Oliveira

    O meu aparece isso, sabe me dizer ????
    og:image was not defined, could not be
    downloaded or was not big enough. Please define a chosen image using
    the og:image metatag, and use an image that’s at least 200x200px and is
    accessible from Facebook. Image
    ‘http://chacarasbr.com.br/_imagens/logo01.png’ will be used instead.

  • http://www.sandrobot.com/ Talita Finger

    Adorei o artigo, muito bom, parabéns Dani :D

  • Ace Full

    Olá Dani, gostei muito do artigo, agora tenho outra duvida, como colocar a opção de compartilhar em cima de imagens, tenho uma pagina estática com diversas imagens e gostaria de poder compartilha-las individualmente. Desde já sou muito grato!

  • http://www.sejabelissima.com.br Camila Nunes

    Gente, to perdidinha com isso! Só sei que nos compartilhamentos que tento não aparece nada, nem titulo, nem resumo, nem imagem. Quero consertar mas não faço ideia! Oq eu faço?? Vcs fazem isso??

  • Marcelo Cherubini de Lima

    Ola, voce sabe como faço para mostrar a indicaçao de amigos em comum no facebook em um outro site?

  • Cláudio Pereira Filho

    Parabéns! Mandou muito bem.
    Gratidão pela ajuda.

  • Nathalia

    Oi, acabei de receber uma notificação do facebook me informando que meu open graph foi bloqueado por 24h. Mas não sei o motivo. Tem como saber ?

  • Heros Henrique

    Tenho que ser sincero, já vi muitos tutoriais de diversos assuntos na
    internet. Mas a forma explicativa deste aqui esta excelente. Parabéns e
    continue assim! :)

  • Caroline Portfolios

    Parabéns meeeesmo, muito inteligente e sabe explicar muito bem!

  • Caroline Portfolios

    Se puder me ajudar, agradeço! Você sabe qual Plugin para traduzir um tema que comprei, ele é todo inglês, não sei de um plugin eficiente…

  • http://douglasneves.com/ Douglas Neves

    Olá Dani, primeiramente parabéns pelo post!

    Mas tenho uma dúvida, fiz um site chamado tmeventos.vc e coloquei todas as meta tags do open graph porém quando eu crio um post novo e testo no:

    https://developers.facebook.com/tools/debug/og/object/
    ou no https://developers.facebook.com/tools/debug/

    Eu tenho que clicar em “Fetch new scrape information” para que as meta tags sejam lidas.

    Toda vez eu tenho que fazer este processo? ou tem alguma forma de automatizar isso via código?

    Ou tem um tempo específico para que isso seja atualizado?

    Abraços

  • Michelli X Tiago

    ola muito bom seu Post teria como me ajudar resolver este erro no depurar ‘fb:app_id’ so falta ele ja resolvi os outros mas ele nao consigo obrigado pela ajuda

  • Rogério Fraga

    Parabéns pelo post! Gostaria apenas de perguntar se tem como especificar o texto e a imagem do post de trechos diferentes de uma página HTML. Ou seja, tenho vários pequenos artigos numa página de HTML e gostaria de compartilhar cada artigo separadamente no Facebook. Já instalei o globo-share-bar mas os valores que coloco em data-title e data-image-url não são respeitados pelo Facebook, ao compartilhar. Engraçado que esses valores funcionam nas outras redes sociais do share-bar (Twitter, Google+ e Pinterest). Estou há uma semana pesquisando a solução e não acho! Você tem alguma ideia? Muito obrigado!

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.