- \n
- Como o Facebook encontra imagens em destaque em suas postagens<\/li>\n
- Como implementar adequadamente o suporte a miniaturas do Facebook<\/li>\n
- Como depurar miniaturas do Facebook quando elas n\u00e3o funcionam.<\/li>\n<\/ul>\n
Como o Facebook sabe qual imagem usar?<\/h2>\n
O Facebook usa algo chamado protocolo Open Graph. Resumindo, \u00e9 uma forma padronizada de adicionar informa\u00e7\u00f5es sobre sua p\u00e1gina \u00e0 sua p\u00e1gina.<\/p>\n
Por exemplo, os elementos do Open Graph em sua p\u00e1gina podem dizer ao Facebook qual \u00e9 o t\u00edtulo, o URL e a imagem a ser exibida quando compartilhada no Facebook. Esta \u00e9 a apar\u00eancia das tags Open Graph em uma postagem recente do blog sobre Compete Themes:<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f449d5c74a.png\")
<\/a><\/p>\nVoc\u00ea pode ver todas as tags Open Graph que come\u00e7am com “og:". Verifique aquela tag “og: image" em particular. \u00c9 exatamente assim que voc\u00ea informa ao Facebook qual imagem usar como miniatura quando a p\u00e1gina for compartilhada.<\/p>\n
Ent\u00e3o, tudo que voc\u00ea precisa \u00e9 uma forma de adicionar uma tag de imagem Open Graph \u00e0s suas postagens que usar\u00e1 automaticamente sua Imagem em destaque.<\/p>\n
N\u00e3o se preocupe, voc\u00ea n\u00e3o precisa escrever nenhum c\u00f3digo. Voc\u00ea s\u00f3 precisa do plugin certo.<\/p>\n
Existem dois plug-ins que funcionam muito bem para adicionar tags Open Graph. Na verdade, voc\u00ea pode at\u00e9 ter um deles j\u00e1 instalado.<\/p>\n
Adicionar Open Graph com Yoast SEO<\/h3>\n
Voc\u00ea est\u00e1 usando o plugin Yoast SEO<\/a>? Nesse caso, voc\u00ea j\u00e1 tem tudo de que precisa.<\/p>\n
No menu Yoast SEO, voc\u00ea ver\u00e1 o menu Configura\u00e7\u00f5es sociais listado aqui:<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f449ff2da7.png\")
<\/a><\/p>\nVisite as configura\u00e7\u00f5es sociais e clique na guia Facebook.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44a270d66.png\")
<\/a><\/p>\nPor fim, voc\u00ea ver\u00e1 a op\u00e7\u00e3o de habilitar os metadados do Open Graph. Certifique-se de que esteja ativado para ativado, se ainda n\u00e3o estiver.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44a50fcca.png\")
<\/a><\/p>\nIsso \u00e9 tudo que voc\u00ea precisa fazer para adicionar as tags Open Graph de que o Facebook precisa.<\/p>\n
Agora, sempre que voc\u00ea compartilhar uma postagem no Facebook, a Imagem em destaque que voc\u00ea definiu para a postagem ser\u00e1 usada automaticamente.<\/p>\n
Aprenda a adicionar imagens em destaque com o Challenger<\/a><\/p>\n
Na captura de tela acima, voc\u00ea pode ver que o Yoast tamb\u00e9m oferece uma op\u00e7\u00e3o para definir a imagem, o t\u00edtulo e a descri\u00e7\u00e3o que deseja usar na sua p\u00e1gina inicial. Al\u00e9m disso, h\u00e1 uma imagem substituta que voc\u00ea pode usar para quaisquer postagens \/ p\u00e1ginas que n\u00e3o tenham uma imagem em destaque.<\/p>\n
Se voc\u00ea deseja que o Facebook mostre suas imagens de postagem, mas n\u00e3o deseja instalar o Yoast SEO, use as seguintes etapas.<\/p>\n
Adicionar Open Graph com Thumb Fixer para Facebook<\/h3>\n
Se voc\u00ea n\u00e3o quiser usar o Yoast SEO, pode instalar o plugin do Facebook Thumb Fixer<\/a>.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44a7dc40b.png\")
<\/a><\/p>\nThumb Fixer para Facebook adiciona metadados Open Graph a seus posts e p\u00e1ginas automaticamente. Assim como no Yoast SEO, as imagens em destaque ser\u00e3o usadas como miniaturas no Facebook.<\/p>\n
Voc\u00ea pode at\u00e9 definir uma imagem padr\u00e3o para o Facebook, que \u00e9 \u00fatil para qualquer postagem que n\u00e3o tenha uma imagem em destaque.<\/p>\n
Aqui est\u00e3o as configura\u00e7\u00f5es que este plug-in adiciona ao menu Configura\u00e7\u00f5es gerais.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44aaa65d1.png\")
<\/a><\/p>\nVoc\u00ea n\u00e3o precisa definir nenhuma dessas configura\u00e7\u00f5es, mas elas podem ajudar a otimizar ainda mais seu site para a plataforma social.<\/p>\n
O Facebook n\u00e3o est\u00e1 mostrando uma miniatura!<\/h2>\n
Voc\u00ea adicionou um dos plug-ins recomendados acima?<\/p>\n
As miniaturas ainda n\u00e3o est\u00e3o aparecendo?<\/p>\n
Existem duas etapas que voc\u00ea pode seguir para corrigir isso.<\/p>\n
Limpe o cache do seu site<\/h3>\n
Se voc\u00ea usa um plugin de cache como WP Rocket<\/a>, ent\u00e3o as tags Open Graph podem n\u00e3o estar aparecendo em suas p\u00e1ginas ainda.<\/p>\n
Para verificar se as tags foram adicionadas, visite qualquer postagem em seu site. Clique com o bot\u00e3o direito e selecione a op\u00e7\u00e3o Exibir c\u00f3digo-fonte da p\u00e1gina.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44acb40b2.png\")
<\/a><\/p>\nEm seguida, use cmd + f (ctrl + f) para pesquisar a fonte da p\u00e1gina para o seguinte texto: og: imagem.<\/p>\n
Voc\u00ea deve ver resultados como o seguinte:<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44aec72f9.png\")
<\/a><\/p>\nSe voc\u00ea n\u00e3o encontrar as tags, isso significa que est\u00e1 visualizando uma vers\u00e3o em cache da p\u00e1gina. Use o seu plugin de cache para esvaziar o cache e recarregar a p\u00e1gina. Voc\u00ea deve ver os metadados Open Graph no c\u00f3digo-fonte.<\/p>\n
O Facebook ainda n\u00e3o est\u00e1 usando a imagem?<\/h3>\n
Voc\u00ea limpou o cache e v\u00ea as tags OG na fonte.<\/p>\n
E se o Facebook ainda n\u00e3o mostrar a imagem quando voc\u00ea compartilhar sua postagem?<\/p>\n
Isso significa que o Facebook est\u00e1 usando uma c\u00f3pia da postagem de seu cache antes de voc\u00ea adicionar as tags Open Graph.<\/p>\n
Visite o depurador<\/a> do Facebook<\/a> (voc\u00ea precisar\u00e1 de uma conta do FB para acess\u00e1-lo). Insira seu URL e clique no bot\u00e3o Depurar. Assim que a p\u00e1gina for recarregada, clique no bot\u00e3o “Buscar novas informa\u00e7\u00f5es de rascunho”.<\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178569-616f44b0df1d9.png\")
<\/a><\/p>\nDepois de buscar novas informa\u00e7\u00f5es de rascunho, o Facebook substituir\u00e1 sua vers\u00e3o em cache por um novo rascunho da p\u00e1gina que cont\u00e9m os dados do Open Graph rec\u00e9m-adicionados.<\/p>\n
Se voc\u00ea rolar para baixo a p\u00e1gina do depurador, ver\u00e1 a tabela preenchida com informa\u00e7\u00f5es sobre sua p\u00e1gina, incluindo a imagem em miniatura desejada. Tente compartilhar sua postagem no Facebook novamente e voc\u00ea dever\u00e1 ver a imagem exibida.<\/p>\n
Esse truque corrige o problema 99% das vezes, ent\u00e3o lembre-se disso quando o FB n\u00e3o estiver exibindo sua imagem corretamente.<\/p>\n
Mais otimiza\u00e7\u00f5es do Facebook<\/h3>\n
Al\u00e9m de otimizar seu site com tags Open Graph, voc\u00ea tamb\u00e9m deve otimizar sua p\u00e1gina do Facebook. Por exemplo, obter o tamanho perfeito da imagem da capa do Facebook<\/a> pode ajudar com a marca e o engajamento. Torne este seu pr\u00f3ximo item a fazer depois de adicionar tags Open Graphs ao seu site.<\/p>\n
E se voc\u00ea quiser que mais pessoas postem seu conte\u00fado no Facebook, considere adicionar bot\u00f5es de compartilhamento social<\/a> a todas as suas postagens do WordPress.<\/p>\n
Conclus\u00e3o<\/h2>\n
Fazer o Facebook usar suas imagens em destaque nas miniaturas n\u00e3o precisa ser uma dor. Na verdade, voc\u00ea pode j\u00e1 ter um plugin instalado para adicionar o suporte necess\u00e1rio.<\/p>\n
Da pr\u00f3xima vez que voc\u00ea tiver um problema com as imagens em miniatura do Facebook, n\u00e3o se esque\u00e7a de limpar o cache do seu site e usar o depurador do Facebook e raspar novamente a p\u00e1gina para obter uma nova miniatura.<\/p>\n
Tem alguma d\u00favida sobre como mostrar miniaturas do Facebook de suas postagens do WordPress? Deixe um coment\u00e1rio abaixo.<\/p>\n