Como Adicionar Metadados Open Graph do Facebook em Temas do WordPress

Ainda me lembro da frustração de compartilhar um dos meus primeiros posts de blog no Facebook, apenas para vê-lo puxar uma imagem completamente aleatória e pixelada. Depois de passar horas no conteúdo, foi desanimador vê-lo mal representado antes mesmo que alguém tivesse a chance de clicar.

Isso acontece quando um site não dá às plataformas de mídia social instruções claras sobre o que exibir. Sem essa orientação, o Facebook tem que adivinhar, e muitas vezes adivinha errado.

Aqui no WPBeginner, dominamos como controlar a aparência do nosso compartilhamento social usando metadados Open Graph. Neste guia, vamos guiá-lo pelos métodos comprovados que usamos, para que você possa garantir que seu conteúdo sempre tenha a melhor aparência quando compartilhado.

Como Adicionar Metadados Open Graph do Facebook em Temas do WordPress

Você pode usar os links rápidos abaixo para pular diretamente para o método que mais lhe interessa:

  1. Adicionando Metadados do Facebook Open Graph com AIOSEO
  2. Definindo Metadados do Facebook Open Graph Usando Yoast SEO
  3. Adicionando Metadados Open Graph do Facebook Usando Código
  4. Perguntas Frequentes Sobre Open Graph do Facebook
  5. Recursos Adicionais Sobre Facebook e WordPress

Importante: Por favor, escolha apenas um dos métodos abaixo. Usar vários plugins de SEO ou adicionar o código manualmente enquanto um plugin está ativo pode criar tags Open Graph conflitantes, o que pode causar resultados de compartilhamento inesperados. Recomendamos o Método 1 usando AIOSEO para a configuração mais fácil e abrangente.

Método 1: Adicionando Metadados do Facebook Open Graph com AIOSEO

All in One SEO é um plugin de SEO popular para WordPress usado por mais de 3 milhões de sites. Ele permite que você otimize facilmente seu site para mecanismos de busca, bem como para plataformas sociais como Facebook e Twitter.

Primeiro, você precisa instalar e ativar o plugin gratuito All in One SEO. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar a página All in One SEO » Redes Sociais. Aqui, você pode inserir o URL da sua página do Facebook e todas as suas outras redes sociais.

O plugin AIOSEO para WordPress

Em seguida, clique na aba do Facebook na parte superior da página e você verá que o Open Graph Markup está ativado por padrão.

Você pode clicar no botão ‘Upload or Select Image’ para escolher uma imagem padrão do Facebook OG se um artigo não tiver uma imagem Open Graph.

Definir imagem padrão do Open Graph

Se você rolar para baixo, poderá personalizar o nome do seu site, a descrição e mais configurações. Não se esqueça de clicar no botão azul ‘Salvar Alterações’ quando terminar.

Agora que você definiu metatags Open Graph para todo o site, o próximo passo é adicionar metadados Open Graph para posts e páginas individuais.

Por padrão, o AIOSEO usa o título SEO e a meta descrição do seu post para o título e a descrição do Open Graph. Você também pode definir manualmente a miniatura do Facebook para cada página e post.

Simplesmente edite o post ou a página e role para baixo até a seção ‘Configurações do AIOSEO’ abaixo do editor. A partir daqui, mude para a aba Social e você verá uma prévia da sua miniatura.

Prévia do AIOSEO no Facebook

Você pode definir a imagem das mídias sociais aqui, bem como o título e a descrição.

Basta rolar para baixo até o campo ‘Fonte da Imagem’. Você pode escolher usar a imagem destacada, fazer upload de uma imagem personalizada ou outras opções.

Escolha qual imagem do WordPress usar como sua miniatura do Facebook

Método 2: Definir Metadados Open Graph do Facebook Usando Yoast SEO

Yoast SEO é outro plugin de SEO para WordPress que você pode usar para adicionar metadados do Facebook Open Graph a qualquer site WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Yoast SEO. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Uma vez ativado, os dados do Facebook Open Graph são habilitados por padrão.

Você pode verificar isso indo em Yoast SEO » Configurações e rolando para baixo até a seção Compartilhamento Social. Agora você pode garantir que o recurso de dados Open Graph esteja habilitado.

Habilitar Open Graph do Facebook

Você pode salvar suas configurações ou continuar e configurar outras opções sociais do Facebook.

Você pode fornecer um ID de aplicativo do Facebook se usar um para sua página do Facebook e insights. Você também pode alterar o título, a descrição e a imagem meta Open Graph da sua página inicial.

Por último, você pode definir uma imagem padrão a ser usada quando nenhuma imagem for definida para uma postagem ou página.

A versão Premium do Yoast SEO também permite definir metadados Open Graph para postagens e páginas individuais. Simplesmente edite uma postagem ou página e role para baixo até a seção ‘Yoast SEO’ abaixo do editor.

Definir metadados do Open Graph para posts e páginas usando Yoast

A partir daqui, você pode definir uma miniatura do Facebook para essa postagem ou página em particular. Se você não definir um título ou descrição de postagem, o plugin usará seu título e descrição meta de SEO.

Agora você pode salvar sua postagem ou página, e o plugin armazenará seus metadados Open Graph do Facebook.

Método 3: Adicionando Metadados Open Graph do Facebook Usando Código

Este método geralmente requer que você copie e cole código no arquivo functions.php do seu tema. No entanto, recomendamos adicionar o código usando o plugin WPCode em vez disso, o que torna mais fácil e seguro adicionar código personalizado no WordPress.

O WPCode também vem com uma biblioteca de snippets de código prontos, incluindo um para adicionar tags Open Graph básicas, então leva apenas alguns cliques.

Primeiro, instale e ative o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir para Code Snippets » + Add Snippet no seu painel do WordPress.

Procure pelo snippet ‘Add basic Open Graph Tags’ na biblioteca. Assim que encontrá-lo, passe o mouse sobre ele e clique no botão ‘Usar snippet’.

Selecione o snippet 'Adicionar tags básicas do Open Graph' da biblioteca

Em seguida, o WPCode adicionará o código automaticamente para você, além de definir o cabeçalho de todo o site como o local de inserção.

O WPCode adiciona automaticamente o código para os dados do Open Graph

Depois disso, tudo o que você precisa fazer é ativar o snippet para ‘Ativo’ e clicar no botão ‘Atualizar’. Seu tema agora começará a exibir metadados do Facebook Open Graph no cabeçalho do WordPress.

Ativar e atualizar snippet

Se você for um usuário avançado, ainda poderá copiar e colar o código abaixo no arquivo functions.php do seu tema.

Como isso exige que você edite diretamente os arquivos do seu tema, certifique-se de fazer backup dos arquivos do seu tema antes de fazer quaisquer alterações.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Lembre-se de adicionar o nome do seu site na Linha 17, onde diz ‘Your Site Name Goes Here’. Depois disso, você deve alterar o URL da imagem padrão na Linha 19 com um dos seus próprios URLs de imagem.

Recomendamos colocar uma imagem com seu logotipo lá, para que, se seu post não tiver uma miniatura, ele use o logotipo do seu site.

Você também precisa adicionar seu próprio ID de aplicativo do Facebook na Linha 13. Se você não tiver um aplicativo do Facebook, poderá remover a Linha 13 do código.

Perguntas Frequentes Sobre Open Graph do Facebook

Ajudamos milhares de usuários a configurar suas configurações de compartilhamento social, e algumas perguntas surgem com bastante frequência. Aqui estão as respostas para as perguntas mais comuns sobre a adição de metadados Open Graph do Facebook.

1. Como faço para testar se minhas tags Open Graph estão funcionando corretamente?

A melhor maneira de verificar suas tags é com a ferramenta oficial do Facebook, o Depurador de Compartilhamento. Basta inserir o URL da sua postagem ou página, e a ferramenta mostrará uma prévia de como ela ficará ao ser compartilhada e listará quaisquer erros ou avisos que encontrar.

2. Qual é o melhor tamanho de imagem para uma imagem do Facebook Open Graph?

Para obter os melhores resultados em telas de alta resolução, o Facebook recomenda o uso de imagens com pelo menos 1200 x 630 pixels. É importante manter uma proporção de 1.91:1 para evitar que sua imagem seja cortada de forma estranha.

3. Por que o Facebook está mostrando a imagem errada mesmo depois de eu definir uma?

Geralmente, este é um problema de cache. O Facebook salva os dados do Open Graph que ele vê pela primeira vez para um URL. Se você atualizar a imagem, precisará dizer ao Facebook para verificar novamente executando o URL através da ferramenta Depurador de Compartilhamento e clicando no botão ‘Analisar Novamente’.

4. As tags do Open Graph afetam o SEO do meu site?

Embora as tags do Open Graph não afetem diretamente seus rankings nos motores de busca, elas têm um forte efeito indireto. Um compartilhamento social atraente e profissional leva a taxas de cliques mais altas e mais tráfego, que são sinais positivos para os motores de busca.

Recursos Adicionais Sobre Facebook e WordPress

Esperamos que este artigo tenha ajudado você a adicionar metadados do Facebook Open Graph no WordPress. Você também pode querer ver outros guias relacionados a como usar o Facebook no WordPress:

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

222 CommentsLeave a Reply

  1. Olá, tentei tudo o que pude e não consigo exibir a imagem em miniatura quando posto o URL do meu blog no Facebook. Já adicionei o código como você disse, baixei toneladas de plugins e não há imagem no Facebook! Você pode me ajudar, por favor? Por favooor!

  2. E quanto a apenas uma imagem para ser adicionada às opções de miniatura no Facebook? Notei que ele pega minha imagem destacada sem problemas, mas não pega as outras na postagem. Existe uma maneira de adicioná-las manualmente com algum código rápido?

  3. Olá,

    Como posso incluir um Facebook no código acima? Para que ele possa publicar diretamente um artigo em nossa linha do tempo de perfil e também em nossa página do Facebook. Obrigado

  4. não está funcionando para mim quando compartilho minhas postagens no Facebook, só mostra minhas últimas fotos do Instagram

  5. Olá, instalei este plugin, mas não consigo ver as opções OG no meu menu de configurações. Refresquei e esperei, mas ainda nada. O que deu errado?

  6. Esta linha significa que a imagem usará o tamanho médio?

    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );

    Se eu substituir por "big", usará a imagem grande? Eu gostaria de ver o link da postagem com o novo formato no Facebook, porque posso obter mais cliques.

    Obrigado!

    • Infelizmente isso não funcionou para mim, eu nem consigo vê-lo sendo exibido no código fonte do cabeçalho do WP. Estou usando o método de código, pois não quero adicionar nenhum plugin ao site.

      Eu verifiquei o arquivo htaccess e ele não está causando nenhum problema, pois está em branco, exceto pela declaração de permalink.

      Também não é um plugin de cache, pois não tenho nenhum instalado. Alguma ideia?

      • Na verdade, desculpe, isso funcionou, mas infelizmente usando a ferramenta de depuração, ainda parece que postar um link na minha linha do tempo ainda não mostra o og:image.

        Mesmo que esteja lá no json. É realmente bizarro. O depurador mostra a postagem, mas sem nenhuma imagem na prévia do compartilhamento. Alguma ideia, pessoal?

  7. Olá Syed,
    Eu usei muitos plugins para extrair minhas informações de meta do gráfico desde que comecei a usar o WordPress e o Facebook, e posso dizer que "Facebook Open Graph Meta for WordPress" é o plugin mais simples e profissional até agora.

    Tenho um pequeno problema... ao depurar o link das minhas postagens com o depurador do Facebook, minhas Informações Brutas do Documento Open Graph não aparecem corretamente. Tenho caracteres especiais incluídos, pois meu conteúdo está em húngaro.

    Aqui está um exemplo:
    Meta Tag:

    Agradeceria se alguém pudesse me dizer como corrigir isso.

    Obrigado antecipadamente e continuem o bom trabalho.

    Atenciosamente

  8. Eu tenho usado este código por muito tempo, mas recentemente tem havido problemas, ele nem sempre puxa a imagem. Usei o linter e encontrei este erro:

    Propriedade Inferida A propriedade ‘og:description’ deve ser fornecida explicitamente, mesmo que um valor possa ser inferido de outras tags.

    Então eu adicionei a tag de descrição e isso parece ter resolvido o problema da imagem, mas agora ela não exibe mais o conteúdo do artigo.

    Alguma ideia de como resolver isso? Eu só preciso mostrar as primeiras linhas do conteúdo.

    Obrigado

  9. Olá,

    Eu estava apenas me perguntando se é possível ter um "og:type" diferente para um post e uma página. Como está (bem, pelo que entendi) é que para tudo no WordPress, isso define o "og:type" como article.

    E se eu quiser definir o "og:type" de uma página como, digamos, "website" e para um post como "article"?

    Any suggestions or help much appreciated :)

    Obrigado

    • @seitanist Sim, o motivo pelo qual global $post é adicionado é porque este código está sendo adicionado fora do Loop na seção da página. Para extrair as informações corretas, devemos chamar global $post, o que faz com que todas essas tags funcionem.

  10. Olá, tudo funcionou! Quando coloco o link do meu post específico no meu mural do Facebook, tenho a miniatura, descrição e nome do site corretos. Mas o post no Facebook também mostra automaticamente o URL completo do meu site (logo abaixo do título do post). Em vez disso, quero que ele mostre o permalink do post específico – não o URL do meu site. Desta forma, posso integrar os 'likes' para aquele post em particular no WordPress. Por favor! Alguém?

  11. Olá, tentei instalar o plugin, mas não consigo ativá-lo devido a um erro fatal: Cannot redeclare add_opengraph_doctype()…/fbogmeta.php na linha 24

    O que eu devo fazer?

    Obrigado!

  12. Colei estes códigos conforme a instrução no meu blog techhogger.com, mas o problema ainda não parece resolvido. Vejo meus códigos do AdSense na área de descrição. Por favor, ajude.

      • @waqaslone@techhogger Para que a descrição apareça, você tem que usar os excertos. Alternativamente, você pode usar o plugin Otto’s Simple Facebook Connect e apenas ativar o Base. Isso cuidaria de tudo para você.

        • @wpbeginner@waqaslone@techhogger

          Fiz tudo. Até tentei o plugin que você disse. Tente apenas compartilhar qualquer postagem do meu blog e você saberá o que exatamente está acontecendo. Até certo ponto, consegui remover os códigos que apareciam na seção de descrição. Mas agora não consigo ver a descrição e as miniaturas das postagens ao compartilhá-las no Facebook. Serei grato se eu tiver sua ajuda.

        • @techhogger@waqaslone Estamos usando o método compartilhado nesta página em nosso próprio site. Tudo funciona. Estamos usando o SFC no List25 e funciona perfeitamente. Não tenho certeza por que você está tendo esses problemas. O SFC tem uma maneira muito inteligente de analisar seu conteúdo e extrair a descrição. Então, sei com certeza que ele extrai a descrição. Ele também extrai todas as imagens. Isso muito provavelmente significa que há outro plugin interferindo em seu site. Você tem algum plugin do WP para adicionar a caixa de curtidas ou o botão de curtidas? Ou algum outro plugin do FB?

        • @wpbeginner@waqaslone Tentei compartilhar novamente após sua última resposta. E o mesmo acontece. Vejo apenas o título da postagem com a descrição como a descrição do meu blog em vez da descrição da postagem e nenhuma miniatura. Estou usando o plugin Digg Digg para compartilhamento social.

        • @wpbeginner@waqaslone Acho que está funcionando agora. Baixei e configurei o plugin novamente. E agora parece estar funcionando. Você pode dar uma olhada e me dizer se tudo está bem agora.

  13. Estou acostumado a colocar meta tags no HTML no Blogger. Mudar para o WordPress tem sido uma dor de cabeça nesse aspecto, pois não tenho HTML para editar e não estou acostumado com CSS. Este plugin é um sonho, mas não parece estar funcionando corretamente. Minha pergunta é: Parece que tenho 3 IDs diferentes: Meu perfil do Facebook, minha página de fãs do Facebook (a que meu blog se conecta) e meu ID do depurador OG que aparece na página do depurador do desenvolvedor; qual ID preciso usar para o plugin? Não importa qual eu coloque no plugin, quando clico em "depurar", a miniatura não é atualizada e é sempre um dos GIFs de publicidade. Posso ter mais de uma miniatura padrão como teria usando meta tags em HTML?

  14. Quando um usuário acessa minha página do WordPress "objeto", como obtenho o ID de usuário do Facebook se for um usuário do Facebook visualizando a página? O Facebook envia um signed_request ou o ID de usuário do Facebook via querystring?

  15. Então instalei essas coisas no meu site (AngryMetalGuy.com) e não funciona. Eu não tenho a menor ideia do porquê. Estou além de frustrado e super confuso. Se você pudesse, por favor, por favor, por favor, por favor, por favooooor me ajudar, seria ótimo.

  16. Isso resolveu meu problema com o botão Compartilhar no Facebook, mas agora, quando tento compartilhar uma postagem do meu site no Facebook usando o Hootlet da Hootsuite, a caixa de texto da descrição está vazia. Ela mostra a miniatura e o URL corretos, mas nenhum texto de prévia do artigo. Funcionava antes e ainda funciona para outros sites, então acho que aconteceu quando instalei o plugin... ajuda?

  17. @SaijoGeorge Ele apenas exibirá o trecho definido da sua postagem. Se você não especificar um trecho, nada será exibido.

  18. Great plugin .. the only issue I seem to be having is that the meta property=”og:description” spits out some random data :( . Thr url for a sample post is 1800pocketpc.com/watch-out-for-windows-phone-7/22453/ similar issue on another blog bestwp7games.com/crazy-horses-match-maker-a-path-drawing-game.html ( here og:description comes out to be blank ) I am using thesis variations on both of those sites .. was wondering if any of you guys have come across this issue

    Vale notar também que a tag de meta descrição nessas páginas parece exibir os dados corretos

  19. Hi wpbeginner! I installed the plugin on my site, ww w.swimbikerun.ph and it’s not working. I’m still getting these errors on the linter. Also no thumbnails are showing when you share a post on fb. Hope you can help :)

    Além disso, não está mostrando a descrição

    Aviso

    Propriedade Obrigatória Ausenteog:title é obrigatório

    Propriedade Obrigatória Ausenteog:type é obrigatório

    Propriedade Obrigatória Ausenteog:url é obrigatório

    Propriedade Obrigatória Ausenteog:image é obrigatório

  20. @Tia Peterson@wpbeginner

    Eu uso o plugin All in one seo e não consegui puxar a descrição para mostrar no linter de URL

  21. @Tia Peterson@wpbeginner

    Eu encontrei uma solução para isso que mostra os primeiros 300 caracteres da postagem.

    apenas mude og:description para :

    <meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />

  22. Ok, voltei aos arquivos originais do tema e fiz o upload do arquivo original functions.php. Não funcionou. Ainda uma tela em branco. Estou pensando em atualizar o tema para ver se isso ajuda. Estou me perguntando se o código que coloquei no arquivo functions.php, de alguma forma, mudou outra coisa. Isso é possível?

  23. Oi pessoal,

    Eu deveria ter baixado o plugin. Em vez disso, copiei e colei o código acima no meu arquivo functions.php e agora meu blog desapareceu.

    Eu entrei no meu servidor e, tendo feito cópias do arquivo php no notepad, fiz o upload do arquivo antigo. Ainda sem sorte.

    Parece que terei que contratar um programador para consertar isso.

    Algum conselho?

  24. @wpbeginner Obrigado. Acho que não recebi a atualização, no entanto. Devo apenas baixar o plugin novamente do repositório de plugins do WP e reinstalar?

  25. @Tia Peterson Acabei de fazer o upload da correção para isso e outro problema. Deve estar no ar em 15 minutos ou menos (sempre que as atualizações do SVN forem concluídas).

  26. @SteveJoseph@joshuatj Também com o linter (não tenho certeza exatamente qual é o número), mas se sua postagem tiver tantas curtidas, ela não redefinirá a descrição / título e assim por diante... Se eu estiver correto, esse número não é muito alto...

  27. @wpbeginner@joshuatj Obrigado pela resposta wpbeginner. Tentei seu plugin nos últimos 3 dias, então tinha certeza de que era a versão mais recente, mas isso não pareceu funcionar para mim. Vou seguir sua sugestão de que se resolverá sozinho, mas a solução atual não é a mais ideal. Ele está puxando a descrição da seção "intro" do meu blog, o que é útil para falar sobre mim com o público, mas faz muito pouco para apoiar por que eles deveriam clicar no artigo ou item compartilhado. Felizmente, ele mostra a imagem e o título do post corretos, apenas não a descrição do próprio post.

    Como o Facebook divulgou tanto o Open Graph, você imaginaria que eles teriam garantido que isso estivesse funcionando e bem consolidado. Obrigado novamente.

  28. Olá! Por algum motivo, o plugin não puxa uma descrição. No início, descobri que ele puxava a descrição do campo 'excerpt', então comecei a usar esse campo sempre. Agora, ele nem sequer puxa disso. Não tenho certeza por quê. Estou usando a versão mais recente do plugin, o StudioPress News Child Theme para Genesis e a versão do WordPress 3.1.

    Aqui está nosso post mais recente para mostrar que, quando você cola este URL no Facebook, apenas a imagem e o título aparecem. No código-fonte, o campo de descrição para o plugin Open Graph está completamente vazio. http://www.bizchickblogs.com/2011/08/what-do-you-know-about-naturopathy.html

    Obrigado pela sua ajuda!

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.