Seja você um blogueiro, marketing de mídias sociais, ou até mesmo dono de um pequeno negócio, em algum ponto você provavelmente se deparar com a questão do Facebook não exibir a imagem correta do seu site WordPress. Às vezes o Facebook exibe uma imagem antiga ou ainda pior, imagem nenhuma! Ainda bem que você pode facilmente diagnosticar e consertar estes tipos de problemas usando uma ferramenta chamada de Facebook Debugger. Verifique alguns dos cenários comuns abaixo que você poderia executar, e como consertá-los.

Como o Facebook Busca Informações

Sempre que você compartilha coisas no WordPress, o Facebook armazena suas imagens em seus servidores e CDN. Você pode pensar nisso como sendo um cache do seu site. Às vezes você precisa limpar o cache para conseguir que as coisas funcionem novamente. O mesmo vale às vezes para o Facebook. Se você faz atualizações em seu site, o Facebook pode mostrar ainda uma imagem antiga quando você a compartilha. Isto ocorre porque ele não busca novas informações, mas em vez disso exibe todas as informações que já tem em cache.

O mesmo vale para as informações sobre seu link e do conteúdo em si. Eles buscam o que eles chamam de Open Graph Meta Tags. De acordo com o Facebook, o protocolo Open Graph permite a qualquer página da internet para se tornar um rich object em uma imagem social. Basicamente estas são tags (códigos) que dizem ao Facebook informações sobre o que você está compartilhando.

Você ainda está procurando por esse host perfeito do WordPress?

Experimente a hospedagem WordPress gerenciada premium da Kinsta para experimentar seu site sem problemas.
  • Controles estilizados que representam a gerência Totalmente gerenciado
  • Um escudo com marcação representadando a segurançaSeguro como Fort Knox
  • Junção de linhas que representam migraçõesMigrações gratuitas
  • Três divisórias que representam a velocidade do servidorMáxima velocidade
  • Seta circular com ponto central representando backupsBackups diários
  • Hexágonos compensados que representam nossa infraestrutura de servidoresGoogle Cloud Platform

Não tem certeza se você está usando o Open Graph Meta Tags em seu site? Bem, você provavelmente está, mas apenas não sabe. ? Se você está usando um plugin popular como Yoast SEO ou Social Warfare, isso de fato, adiciona automaticamente essas tags para você nos bastidores.

Vamos pegar nosso guia de website speed optimization como exemplo. Se olharmos o código fonte desse post, podemos ver os seguintes dados em relação ao Open Graph. Obs: O Open Graph usa diferentes atributos, como og:title e o que realmente importa para este tutorial, é og:image. Este é o código em nosso site que o Facebook olha para determinar que imagem em destaque, título, e descrição mostrar.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta Managed WordPress Hosting" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

Usando o Facebook Debugger

Como qualquer plataforma ou ferramenta, terão problemas ou peculiaridades que você tem que trabalhar, especialmente se você não segue o guia de melhores práticas. A ferramenta do Facebook Debugger foi criada para ajudar você a resolver problemas com as suas Meta Tags do Open Graph, bem como diagnosticar problemas com cache.

Você pode encontrar o Facebook Debugger no site para desenvolvedores do Facebook na guia Ferramentas & Suporte. Se você compartilha muito conteúdo no Facebook, Este é um bom link para marcar para referência futura.

Ferramenta Facebook Debugger

Ferramenta Facebook Debugger

Para rastrear um simples post entre na URL e clique em “Debug.” Na verdade, vamos fazer um estudo de caso em nosso exemplo. Apenas atualizamos recentemente a imagem em nosso artigo de otimização de velocidade do site. Quando entrarmos no Facebook Debugger, ele vai primeiro puxar as informações em cache que e les têm no final (como visto abaixo)

É isso que as pessoas realmente estão vendo quando elas compartilham seus posts. Se bem que, neste caso, está puxando uma velha imagem antes de atualizamos o post. ? Também podemos ver que og:image está com o nome do arquivo antigo.

Imagem antiga e URL mostrados no Facebook Debugger

Imagem antiga e URL mostrados no Facebook Debugger

Então, o que podemos fazer? Existem duas coisas que precisam ser feitas. Siga as etapas abaixo.

Etapa 1 – Limpar o Cache do WordPress para Essa URL

A primeira coisa que precisamos fazer para garantir que o Facebook pegue as informações mais recentes é limpar o cache em nosso site WordPress. Tudo bem, tecnicamente existem duas camadas de cache que poderiam estar envolvidas aqui. Se a imagem antiga ainda está em cache em nosso site, o Facebook Debugger não vai ser capaz de ajudar você a consertar seus problemas, pois ele simplesmente recupera o cache de informação.

Quando o cache do WordPress se for, esta parte estará OK (e podemos ir para a etapa 2), porque com o cache do servidor Kinsta, enquanto um post é atualizado, o cache para essa página ou post é limpo automaticamente. Leia mais em como o cache da Kinsta funciona. Se você está usando uma solução de cache diferente ou um plugin de terceiros, você irá precisar ler a documentação para garantir que você saiba como limpar o cache de um URL. Aqui estão alguns links para algumas das mais populares soluções de cache:

caching solutions:

Se tudo falhar, você pode sempre limpar o cache em todo o seu site WordPress (como visto abaixo). Porém, por motivos de desempenho, normalmente isto não é recomendado, pois o seu site terá que reconstruir o cache, prejudicando seu tempo de carregamento enquanto isso.

Limpar o cache WordPress

Limpar o cache WordPress

E se você ainda está tendo problemas, sua imagem também deve ficar no cache do seu CDN. Neste caso você pode precisar eliminar seu cache CDN.

Etapa 2 – Extrair Novamente no Facebook Debugger

Agora que o cache está limpo para o post ou página em questão, vamos precisar limpá-lo novamente na ferramenta Facebook Debugger. Então entramos com a URL e clicamos no botão “Extrair Novamente”.

Extrair novamente a ferramenta no Facebook Debugger

Extrair novamente a ferramenta no Facebook Debugger

Você pode encontrar um aviso. Em nossa experiência, estes nem sempre são as mais precisas. Por exemplo, vemos um aviso que diz que nossa imagem excede o tamanho máximo de 8 MB ou o servidor também estava muito lento para responder. Primeiro de tudo, nossa imagem não chega nem perto desse tamanho. Na verdade, o tamanho é de apenas 160,63 KB. Segundo, nosso servidor é um muito rápido e a página inteira carrega em menos de 1 segundo.

Aviso do Facebook

Aviso do Facebook

Então aqui iremos simplesmente clicar no botão “Extrair novamente” por mais uma vez. Sim, isso pode parecer estranho. Mas muitas vezes você pode precisar extrair duas vezes. Leva apenas alguns segundos. E buum! Isso mesmo. Podemos ver abaixo que agora está puxando nossa nova imagem destacada e se olhamos para o atributo og:image, em vez disso o novo nome do arquivo.

Nova imagem na ferramenta Facebook Debugger

Nova imagem na ferramenta Facebook Debugger

É importante notar que isso não atualizará a imagem para postagens compartilhadas do Facebook. Isto apenas impacta posts em que você ou outras pessoas compartilham após o fato.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos

Dicas Adicionais do Facebook Debugger

Você pode usar a ferramenta do Facebook Debugger não apenas para atualizar imagens antigas, mas o conteúdo (texto) você vê em seus posts do Facebook como sempre. O título e descrição são do Open Graph Meta Tags. Então, se você precisa repetir algo, atualizá-lo no WordPress e seguir exatamente a mesma etapa abaixo.

As propriedades ‘og: image’ fornecidas ainda não estão disponíveis

Também, porque ignoramos os avisos abaixo não significa que eles não são sempre úteis. Na verdade, existem tamanhos recomendados quando eles chegam nas imagens que você estaria usando. Caso contrário, coisas ruins podem acontecer. Como em uma imagem não aparece (como visto abaixo neste aviso).

As propriedades previstas “og:image”ainda não estão disponíveis porque novas imagens são processadas assincronamente. Para garantir que os compartilhamentos de novas URLs incluam uma imagem, especifique as dimensões usando as tags “og:image:width” e ‘og:image:height’.

Facebook Debugger – imagem muito pequena

Facebook Debugger – imagem muito pequena

O item acima ocorreu acima é porque nossa imagem era muito pequena. O tamanho da imagem mínima exige que seja 200 x 200 pixels. Normalmente o maior é melhor quando chega nas imagens do Facebook. O buffer tem um ótimo post com todos os tamanhos recomendados da imagem para mídia social 1.200 x 630 pixels parece funcionar melhor para a maioria das pessoas. Está tudo bem ser um pouco maior, na verdade, nossa imagem em nosso post no primeiro exemplo era 1460 x 730. Apenas para lembrar que o Facebook irá cortar qualquer coisa maior, e então manter esta proporção é uma das partes mais importantes.

Se você está usando um plugin como o Yoast SEO, pode também ser recomendado definir manualmente a imagem. Talvez suas imagens em destaque em seu tema WordPress tenham uma proporção diferente. Ou talvez nem mesmo você precise usar imagens destacadas!

Neste caso, o plugin Yoast SEO permite que você atualize manualmente um tamanho diferente da imagem, apenas para o Facebook e que irá preencher estes Open Graph Meta Tags. Você também pode definir manualmente o título e descrição, se necessário.

Caixa social do Yoast SEO Facebook

Caixa social do Yoast SEO Facebook

As propriedades ‘og: image’ fornecidas ainda não estão disponíveis…

Você também pode ver o seguinte aviso falando sobre uma ID de aplicativo do Facebook ausente. É importante observar que isso não interfere na capacidade de compartilhar postagens no Facebook de maneira alguma. Muitas vezes isso pode simplesmente ser ignorado. No entanto, isso limita sua capacidade de usar os dados do Facebook Insights.

As seguintes propriedades requeridas estão faltando: fb: app_id

As seguintes propriedades requeridas estão faltando: fb: app_id

As seguintes propriedades requeridas estão faltando: fb: app_id

Se você quiser os dados adicionais do Insights, precisará adicionar sua ID de aplicativo do Facebook ao seu site. Aqui estão as instruções abaixo sobre como adicioná-lo no WordPress usando o plugin Yoast SEO.

  1. Crie seu aplicativo do Facebook: https://developers.facebook.com/docs/apps/register (isso é completamente grátis)
  2. Copie seu ID de aplicativo do Facebook do app dashboard.
  3. No seu painel do WordPress, clique em “SEO” no lado esquerdo.
  4. Sob a aba “Facebook”, você pode entrar no seu ID de aplicativo do Facebook.
Adicionar ID do aplicativo do Facebook

Adicionar ID do aplicativo do Facebook

Certifique-se de limpar o cache do seu site antes de testar novamente na ferramenta Facebook Debugger.

Resumo

Esperamos que você tenha entendido um pouquinho mais sobre a ferramenta Facebook Debugger e como você pode usá-la para diagnosticar e consertar imagens em seu site WordPress. Lembre-se de limpar todas as camadas de cache e então extrair novamente. Sua nova imagem deve então aparecer corretamente em todos os compartilhamentos no Facebook.

41
Shares