O Facebook pode ser um ótimo lugar para compartilhar mensagens e começar a anunciar seu conteúdo. No entanto, você pode notar que alguns dos seus links compartilhados não contêm as imagens certas. Às vezes o Facebook pode enviar uma imagem antiga ou pior ainda, sem imagem alguma!
Felizmente, você pode facilmente solucionar e corrigir esses tipos de problemas usando uma ferramenta chamada Depurador de Compartilhamento. Isto pode direcionar erros de exibição específicos ou problemas com suas meta tags. Usando este software, você pode habilitar o Facebook para anunciar corretamente seus artigos com as imagens corretas.
Neste artigo, vamos explicar o que é Facebook Debugger e como você pode usá-lo para corrigir suas imagens do WordPress. Vamos começar!
Como funciona o Facebook Crawler
Antes de começar a usar o Depurador de Compartilhamento, você precisará entender como o Facebook rastreia o seu conteúdo. Sempre que alguém usar um botão de compartilhamento social ou copiar e colar um link para à sua página, o Facebook irá rastrear o HTML do seu site. Em seguida, ele gera uma imagem em miniatura, título e descrição com base nessas informações.
Aqui estão alguns requisitos gerais que seu site deve seguir para garantir que este processo funcione sem problemas:
- Gzip e deflacionar a codificação em seu servidor
- Liste as propriedades dos gráficos abertos dentro de 1 MB do seu HTML
- Limitar o tempo de carregamento da página para alguns segundos
- Adicione as strings de agentes de usuário do rastreador ou endereços IP à lista de permissões do seu site
- Certifique-se de que sua política de privacidade é rastreável
Agora que você já conhece um pouco mais sobre o rastreador do Facebook e como ele funciona, veremos alguns dos problemas que você pode enfrentar ao compartilhar conteúdo na plataforma.
Como o Facebook obtém informações
Sempre que você compartilha conteúdo com o Facebook, ele armazena suas imagens em cache em seus servidores e na Rede de Entrega de Conteúdo (CDN). Se você fizer atualizações em seu site, o Facebook ainda pode mostrar uma imagem antiga quando você for compartilhá-la. Isso ocorre porque ele não busca novas informações, mas fornece informações armazenadas em cache.
O mesmo vale para informações sobre seu link e o próprio conteúdo. Eles buscam o que eles chamam de ‘Open Graph Meta Tags’. Segundo o Facebook, o protocolo Open Graph transforma uma página da web em um objeto rico em um gráfico social. Basicamente, estas são tags (código) que dizem informações do Facebook sobre o que você está compartilhando.
Mesmo que você não esteja familiarizado com as Meta Tags do Open Graph, é provável que você já esteja usando-as. Se você instalou plugins populares como Yoast SEO ou Social Warfare, estes automaticamente adicionam meta tags para você nos bastidores.
Tomaremos como exemplo o nosso guia de otimização de velocidade do site. Se olharmos para o código-fonte daquele artigo, podemos ver os seguintes dados referentes ao Open Graph. Nota: Open Graph usa atributos diferentes, como og:title e aquele que realmente nos interessa para este tutorial, que é og:image.
<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®" />
<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" />Este é o código em nosso site que o Facebook examina para determinar qual imagem, título e descrição apresentar. Uma vez que estes dados estejam em cache, você precisará usar a ferramenta Depurador de Compartilhamento para atualizar seus detalhes de publicações.
Como usar o Depurador de Compartilhamento do Facebook para corrigir imagens do WordPress
Qualquer plataforma ou ferramenta terá problemas que você tem que resolver. A ferramenta de Depurador de Compartilhamento do Facebook foi criada para ajudá-lo a resolver problemas com suas Meta Tags do Open Graph , bem como a solução de problemas de cache.
Você pode encontrar o Depurador de Compartilhamento no site Meta for Developers em Tools. Para rastrear um artigo, simplesmente digite a URL e clique em Debug:
Na Kinsta, recentemente atualizamos a imagem em nosso artigo de otimização de velocidade do nosso site. Quando entrarmos no Facebook Debugger, ele enviara primeiro as informações em cache que eles:
Neste caso, o Facebook está mostrando uma imagem antiga de antes de atualizarmos o artigo. Também podemos notar que o og:image é um nome de arquivo antigo. Isso é o que as pessoas estão vendo quando compartilham nosso artigo.
Passo 1: Limpe o cache do WordPress para aquela URL
Para garantir que o Facebook pegue as últimas informações sobre o seu artigo, você precisará limpar o cache no WordPress. Se a imagem antiga ainda estiver no cache do seu site, o Depurador de Compartilhado não poderá ajudar a resolver o seu problema, pois ele simplesmente irá buscar novamente as informações no cache.
Com o cache em nível de servidor Kinsta, sempre que um artigo é atualizado, o cache para aquela página ou artigo é limpo automaticamente. Se você estiver usando uma solução de cache diferente ou um plugin de terceiros, você vai querer olhar a documentação deles para garantir que você saiba como limpar seu cache.
Se tudo mais falhar, você pode sempre limpar o cache em todo o seu site WordPress. Entretanto, tenha em mente que o seu site terá que reconstruir o cache, o que pode degradar a velocidade do seu site.
Se você decidir que é necessário, abra o MyKinsta, navegue até seu site WordPress e clique em Ferramentas. Aqui, clique em Limpar cache:
Se você ainda estiver tendo problemas, sua imagem também pode estar em cache no seu CDN. Neste caso, você pode precisar limpar o seu cache CDN.
Passo 2: Extraia mais uma vez no depurador de compartilhamento
Agora que o cache está limpo para o artigo ou página em questão, precisaremos extrair novamente na ferramenta do Facebook Debugger. Para fazer isso, clique no botão Scrape Again.
Você pode encontrar avisos que nem sempre são os mais precisos. Por exemplo, vemos um aviso de que nossa imagem excedeu o tamanho máximo de 8 MB e o servidor foi muito lento para responder. Na realidade, nossa imagem é de apenas 160.63 KB e a página é carregada em menos de 1 segundo.
Então foi quando clicamos no botão Scrape Again por uma segunda vez. Sim, isso pode soar estranho. Mas muitas vezes você pode precisar clicar duas vezes. Então você verá que agora mostra a imagem recém-selecionada com o novo nome de arquivo como o atributo og:image:
É importante notar que isso não atualizará a imagem para artigos já compartilhados no Facebook. Isso só afeta os artigos que você ou outras pessoas compartilham após o fato.
Dicas adicionais do Facebook Debugger
Você pode usar a ferramenta Depurador de Compartilhamento para não apenas para atualizar imagens antigas, mas também o conteúdo (texto) que você vê em seus artigos no Facebook.. O título e a descrição são ambas as Meta Tags do Open Graph. Portanto, se você precisar reformular alguma coisa, atualize no WordPress, e siga as mesmas etapas acima.
Corrija o aviso de imagem ‘properties are not yet available’
Além disso, só porque ignoramos os avisos acima não significa que eles nem sempre sejam úteis. Na verdade, existem tamanhos recomendados quando se trata de imagens que você deveria estar usando. Caso contrário, sua imagem pode não aparecer (como visto abaixo neste aviso):
As propriedades ‘og:image’ fornecidas ainda não estão disponíveis, porque novas imagens são processadas de forma assíncrona. Para garantir que compartilhamentos de novas URLs incluam uma imagem, especifique as dimensões usando as tags ‘og:image:width’ e ‘og:image:height’.
Este aviso ocorreu porque nossa imagem era muito pequena. O tamanho mínimo de imagem que o Facebook requer é 200 x 200 pixels. Normalmente, quanto maior, melhor quando se trata de imagens do Facebook.
Em geral, 1.200 x 630 pixels parece funcionar melhor para a maioria das pessoas. Você pode fazer uma imagem maior do que esta, mas o Facebook vai cortá-la. Quando você estiver determinando o tamanho da sua imagem, mantenha esta proporção em mente.
Se você estiver usando um plugin como Yoast SEO, também é recomendado configurar manualmente a imagem. Suas imagens em destaque no seu tema WordPress, podem ter uma relação de aspecto ou tamanho diferente. Talvez você nem mesmo use imagens em destaque!
Neste caso, o plugin Yoast SEO permite que você faça o upload manual de uma imagem de tamanho diferente apenas para o Facebook. Você simplesmente precisará encontrar as configurações sociais do Yoast SEO para um artigo e adicionar uma nova imagem do Facebook:
Uma vez que você carrega uma imagem no tamanho correto, ela irá preencher as Meta Tags do Open Graph que o Facebook está procurando. Além disso, você pode continuar a definir manualmente o título e a descrição, caso necessário.
Adicione a propriedade fb:app_id
Você também pode ver um aviso sobre a falta de uma ID de aplicativo do Facebook. É importante notar que isso não interfere de forma alguma na capacidade de compartilhar mensagens no Facebook. Muitas vezes isso pode simplesmente ser ignorado, mas limita à sua capacidade de usar os dados do Facebook Insights:
Se você quiser esses dados adicionais do insight, então você precisa adicionar sua ID do aplicativo do Facebook ao seu site. Primeiro, crie o seu aplicativo do Facebook. Depois, copie sua ID de aplicativo do Facebook do painel do aplicativo.
Uma vez que você tenha configurado um aplicativo em tempo real no Facebook, você pode adicionar uma meta tag para ele em seu site. Embora o Yoast SEO suportasse este processo, ele recentemente removeu esta funcionalidade. Como alternativa, instale o plugin gratuito do Meta Tag Manager:
Para começar a usar esta ferramenta, vá para Settings > Meta Tag Manager. A seguir, defina o Tag Type como ‘propriedade’ e o Property Value como ‘fb:app_id’:
Para o Content Attribute, cole seu ID do aplicativo do Facebook. Assim que você clicar em Save Changes e limpar seu cache, esta informação será adicionada à meta tags do seu site. Agora você pode extrair a URL novamente para ver se o problema foi resolvido!
Resumo
Esperamos que agora você entenda um pouco mais sobre a ferramenta de depuração de compartilhada do Facebook e como você pode usá-la para solucionar problemas e corrigir imagens em seu site WordPress. Desta forma, todos os seus links compartilhados conterão as imagens, títulos e descrições corretas.
Após notar uma imagem incorreta no Depurador de Compartilhamento, limpe todas as camadas de cache em seu site e extraia novamente. Suas novas imagens devem então aparecer corretamente para que todos compartilhem no Facebook.
Muitas vezes, você pode evitar qualquer problema com seus links do Facebook, limpando regularmente o cache do seu site. Com um plano de hospedagem da Kinsta, o cache da sua página será automaticamente limpo sempre que você atualizar o conteúdo!
