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. É bom que o AIOSEO possa definir uma imagem padrão do Open Graph para posts sem imagens em destaque.
    Tenho alguns posts de blog mais antigos sem imagens em destaque definidas, então é útil que eu possa especificar meu logo completo (com uma foto minha editada) como uma imagem do Open Graph.
    Isso fará com que meus posts sejam compartilhados corretamente nas redes sociais, mesmo que eu ainda não tenha adicionado uma imagem em destaque.

  2. Isso é realmente útil, mas a interface do Yoast SEO não se parece mais com isso. Isso precisa ser atualizado.

    • Thank you for letting us know that their interface has been updated, we will look to update it when we update the article :)

      Admin

  3. Obrigado pelo tutorial. Eu tenho adicionado o Open Graph no AIO SEO e ainda me surpreendo que o AIO SEO me diga que não há um. Passei cerca de meia hora nisso antes de descobrir que tinha que clicar em atualizar novamente na avaliação de SEO para que o plugin baixasse as novas configurações do WordPress e fizesse uma nova análise de SEO. Uma coisa tão simples e me levou tanto tempo.

  4. Olá, obrigado pelo trecho de código, estou ansioso para experimentá-lo. Uma pergunta, ele permitirá que o FB capte a imagem destacada (é isso que é a “miniatura”?) e o resumo de cada postagem do blog, ou ele usará apenas a imagem do logotipo de todo o site designada na linha 19? Já tentei o Blog2Social, mas as postagens não tinham a imagem destacada e o resumo e não ficaram boas. Obrigado!

  5. Olá,

    Código incrível. MAS, por que ele não altera og:url e og:image. Tentei com uma postagem sem imagem definida como padrão. Mas verificando no depurador do Facebook, ele pega meu logo do rodapé em vez de obter a imagem que adicionei na parte og:image.
    O título está funcionando, ele mudou do original e eu colei og:description também. Todas as meta tags mais importantes, mas imagem e url.
    Por que isso acontece?

    Obrigado,
    Atila

    • Certifique-se de ter limpado qualquer cache do seu site WordPress, pois esse é o motivo mais comum para não atualizar e corresponder ao código.

      Admin

  6. olá, como posso modificar o código para adicionar tags OG para tipos de postagem personalizados? Tentei alterando esta linha de código if ( !is_singular()) para if ( is_singluar( array( ‘post’, ‘publications’) ) ) mas meu site gera um erro fatal. alguém pode me ajudar, obrigado

  7. Olá, tentei todas as soluções sugeridas e ainda me faltam alguns parâmetros para o schema:
    A required field is missing: id
    A required field is missing: price
    A required field is missing: availability

    Existe alguma solução via plugin ou atualizando o código do function.php?

    • Isso seria marcação para um produto que você está vendendo em seu site e o All in One SEO tem a opção de adicionar essa marcação aos seus produtos.

      Admin

  8. Se eu usar as configurações do Yoast SEO, levará tempo para mostrar o resultado perfeito no compartilhamento do Facebook? Ou começará a funcionar em minutos?

        • Se não estiver mostrando o que você definiu em todos os sites sociais, você deve entrar em contato com o suporte do Yoast e informá-los para garantir que não haja um problema com o plugin.

  9. Olá
    Quando compartilho minha postagem no Facebook, ela aparece com minha imagem de destaque.
    Mas quando compartilho no WhatsApp, minha imagem de destaque não aparece com o link, por favor me ajude..

    • Se você estiver usando o Yoast para adicionar os metadados, primeiro recomendamos entrar em contato com o Yoast para garantir que não haja problemas conhecidos.

      Admin

  10. Olá, por favor me ajude
    O Facebook bloqueou meu site, agora no aplicativo de desenvolvedor do Facebook, não consigo nem vincular meu site porque ele foi bloqueado pelo Facebook

    Por favor, diga-me como desbloquear seu site com o Facebook

  11. Olá

    Por favor, você pode me aconselhar quando usar um tema filho – preciso copiar o functions.php do tema pai e depois adicionar o script acima a um functions.php recém-criado e fazer o upload para a pasta do tema filho OU devo apenas adicionar o script ao functions.php do tema pai?

    Obrigado por ler, Sadie

  12. Como eu removeria o "Por ..." de aparecer no cartão?

    Atualmente temos um problema onde é exibido como: nome-do-site | Por nome-do-site

    Queremos apenas que o primeiro nome do site apareça e não duas vezes.

  13. Estou usando isso em um site auto-hospedado. O que faço sobre o ID DO USUÁRIO que devo substituir, já que o site não está no wordpress.com?

  14. Olá,
    Eu tenho um grande problema!!
    Quando compartilho minha postagem no Facebook, ela aparece como minha imagem de destaque.
    Mas quando compartilho no WhatsApp, minha imagem de destaque não aparece com o link, por favor me ajude..

  15. Tudo bem, mas ainda há um problema: como adicionar o ID do Facebook? Após usar este código, a seguinte mensagem de ID do Facebook aparece.

    A propriedade ‘fb:app_id’ deve ser explicitamente fornecida. Especifique o ID do aplicativo para que as histórias compartilhadas no Facebook sejam devidamente atribuídas ao aplicativo. Alternativamente, o app_id pode ser definido na URL ao abrir a caixa de diálogo de compartilhamento.

  16. Gostei deste artigo, mas em janeiro de 2018 esta opção de *código manual* não parece funcionar completamente. Por exemplo, embora eu tenha verificado que a propriedade de imagem padrão funciona, quando crio uma nova postagem, não vejo EM LUGAR NENHUM um campo onde se possa começar a editar metadados de “open graph (og)”.

    Sugestões? Obrigado!

  17. Obrigado por tantas ótimas informações. Mas tenho uma pergunta.

    Quão útil é adicionar metadados do Facebook graph em nosso site..?

    E se for muito útil, para qual propósito ele é útil..?

  18. E se eu quiser mudar a imagem em miniatura não para todo o site, mas apenas para uma página do meu site wordpress: Por exemplo, estou tentando compartilhar uma página de evento do meu site e gostaria de uma miniatura única e relevante. Ajuda?

  19. Olá, eu queria incluir Worpress SEO by Yoast, mas não tenho certeza se a versão mais recente é compatível com a minha versão do Worpress (4.2.2), você sabe se é seguro ativar?

    Obrigado, pessoal

  20. Adicionei o código para adicionar manualmente isso ao meu tema. No entanto, as coisas não estão funcionando. Meu perfil tem que ser público para que meu ID de usuário do Facebook seja acessível?

  21. Isso ainda é válido para hoje? Eu tentei e funcionou, mas notei no código o seguinte: “xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

    2008 não é um pouco antigo? Existe um protocolo mais novo que deveríamos usar hoje?

  22. Olá, obrigado por postar. Fiquei com uma dúvida. Entendi que o em cada post é construído dinamicamente pelas funções que você explicou tão bem. O que não consigo entender é onde as variáveis chamadas por essa função são definidas e armazenadas. Quando você coloca property=”og:type” content=”article”/, OK você está definindo com uma string fixa. Mas quando você usa: property=”og:title” content=”‘ . get_the_title() . ‘”, onde a função get_the_title() vai buscar isso? Como posso definir previamente esses valores para cada post de forma que o código pegue os metadados corretos para cada parâmetro?

    • get_the_title() obterá o título do seu post. Se você quiser usar outra coisa, você sempre pode obter o valor de uma meta box. Com o plugin Advanced Custom Fields, seria algo como get_field(“my_field”), ou com um campo meta personalizado regular do WordPress seria get_post_meta($post->ID, “my_field”, true). Veja get_post_meta()

  23. Bem explicado! Tento descobrir onde posso adicionar o código para verificar o tamanho da imagem em destaque, já que o FB precisa de um tamanho com um mínimo de 200px para largura e altura, caso contrário, ele usará outra imagem da postagem.
    Qualquer ajuda seria ótima!

  24. Tenho tentado usar o Yoast para habilitar meus metadados para que eu possa usar Rich Pins no Pinterest. Fiz o que este tutorial diz, mas o Pinterest ainda não reconhece minha postagem. Existe outro plugin que eu possa tentar?

    • Uma vez que você tenha o Yoast instalado, procure em SEO » Painel » Títulos e Metadados e, abaixo disso, em Social.
      Em Social, você deve Habilitar os “Adicionar metadados Open Graph” na aba Facebook.

      • Essa opção simplesmente não está lá com a v4.6 do plugin.
        Em SEO >> Painel, as abas que tenho são: Painel, Geral, Recursos, Informações da empresa, Ferramentas do webmaster e Segurança. Nenhuma menção a Títulos e Metadados ou Social.

        Isso é porque eu não configurei um perfil social do Facebook? Certamente isso não deveria ser necessário apenas para poder configurar coisas de OG!

  25. Adicionei compartilhamento social ao template de resultados de pesquisa, então cada trecho tem um botão de compartilhamento, MAS os metadados que são compartilhados estão bagunçados e incontroláveis com isso, há alguma maneira de fazer isso funcionar melhor quando há 20 resultados na mesma página com descrições meta diferentes para cada um?

  26. Olá, você pode me ajudar por favor? Adicionei o código na função e o que eu tenho que adicionar no head por favor?

  27. Aqui também há uma boa melhoria para fazer uma exceção para a página inicial:

    if (is_front_page()){ echo ”; echo ”; echo ”; }else{ echo ”; echo ”; }

  28. Eu baixei o plugin Yoast e o configurei para a minha página inicial, mas quando insiro o site no Facebook, ele ainda não mostra a imagem que especifiquei, nem o trecho de texto que escrevi.
    Também não consigo encontrar meu URL do Facebook usando o link que você forneceu, ele apenas me dá um erro...
    Eu tentei depurar, mas ele diz que páginas do Facebook não podem ser depuradas e que elas não têm cache.
    Entãooooo.... nada funcionou até agora!

  29. Eu só queria agradecer por esta descrição muito completa sobre o processo de conectar o Facebook à sua página do WordPress. Tenho tentado fazer isso há dias seguindo outros sites e recomendações. Esta noite, me deparei com sua página em uma pesquisa do Google e pronto, funcionou. Viva! Muito obrigado.

  30. Obrigado por esta informação. Foi muito fácil de seguir. Fiz o upload do plugin Yoast e segui todos os passos e salvei, mas a miniatura ainda é apenas uma caixa em branco. Leva algum tempo para propagar? Preciso sair e entrar novamente no Facebook? ou no WordPress?

  31. Oi pessoal, estou tendo problemas com og:description, basicamente toda a formatação está faltando na página compartilhada. Novas linhas não são respeitadas, como posso controlar isso?
    Obrigado!

  32. Obrigado por isso. Quero compartilhar links diretamente do meu site usando o botão social. No entanto, quando clico, por exemplo, no botão de compartilhamento do Facebook, a imagem e a descrição ainda usam informações anteriores. Embora eu tenha atualizado a imagem e a descrição usando o Yoast SEO e personalizado especificamente a imagem e a descrição para essa postagem. Posso saber o que fiz de errado?

  33. Obrigado. Não consigo dizer quanto tempo tentei descobrir isso. Fácil de fazer com ZiPLIST para receitas, mas não consegui descobrir para Artigos.

  34. Oi! Tenho um problema que não sei como resolver. Quando tento compartilhar um link no Facebook do meu blog, ou uma página específica, esta mensagem aparece: "página não encontrada" ou o link com símbolos que não entendo. Eu verifiquei os links com o depurador de objetos e é isso que aparece: a propriedade obrigatória 'og:title' do tipo 'string' não foi fornecida. Como posso resolver isso, por favor?

  35. @ Syed Balkhi. —– Apenas quero perguntar isto: depois de configurar todas as tags e obter um resultado de teste de depuração limpo sem avisos, quando alguém clica no botão Curtir do Facebook que usei na minha página web, ele não aparece no feed da Linha do Tempo do Facebook, apenas aparece na seção de atividade recente. Por que isso acontece? Há mais alguma coisa que eu precise adicionar para que ele seja exibido diretamente no feed de notícias quando clicarem no botão CURTIR??????

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.