Home / Geração de Tráfego / Redes Sociais / Como resolver Problema com Imagem de Posts Compartilhados no Facebook

Como resolver Problema com Imagem de Posts Compartilhados no Facebook

Alguma vez você já tentou Compartilhar seu posts no Facebook, mas se deparou com uma postagem sem nenhuma miniatura, ou a miniatura muito relacionado aparecendo? Esse problema é muito comum para blogueiro, mas neste post vou mostra como resolver esse problema.

Tive esse mesmo problema recentemente com o site de um cliente e vi que muitas pessoas também estavam como esse mesma dificuldade e tendo esse mesmo problema para achar a solução ideal. Depois de algum tempo pesquisando o assunto consegui encontrar o a fonte do problema nos compartilhamentos, mas a solução ainda estava incompleta. Pesquisando mais encontrei a solução em alguns sites lá fora, mas algumas das alterações que eram indicadas estavam dando erro ou não apresentavam resultados ideais, então juntei tudo de melhor que achei, consegui resolver o meu problema e montei esse tutorial para ajudar quem ainda sofre com esse problema.

Isto ocorre por uma falta de especificação de um código no template junto com uma falha no interpretação do Facebook para identificar todas as imagens de uma página.

Em cada carregamento da página, ele procura todas as tags de imagem e exibir os que ele identifica como sendo relevantes, porém nem sempre o script carrega as imagens corretas, isso pode ser por conta do dimensionamento da imagem. O tamanho ideal para imagem de links é 400 x 209, seno que esse valor nem sempre pode ser seguido nas imagens dos seus posts. Mas não se desespere, o Facebook vai ajustar o dimensionamento da sua imagem para criar a melhor experiência possível dos seus seguidores.

Baseada no informação de que o tamanho ideal para a imagem do seu link compartilhado é essa acima o Facebook vai avaliar as imagens disponíveis na página e indicar as que ficam mais próximas do ideal. Encontrei um artigo muito interessante no gerenciandoblog.com.br que pode lhe ajudar a entender melhor essa questão do tamanho das imagens.

O próprio Facebook sabe desse problema e por isso recomenda aos desenvolvedores informar ao script qual imagem escolher, adicionando uma meta tag no cabeçalho. Essa meta tag é:

<meta property="og:image" content="http://seusite.com.br/imagem.jpg" />

e

<link href="http://seusite.com.br/imagem.jpg" rel="image_src" />

Para sites estáticos, basta inserir essa tag em cada página e escolher a imagem a ser a miniatura no compartilhamento. Mas para fazer funcionar corretamente no seus posts do WordPress precisamos ajustar o código para indicar ao Facebook que ele deve escolher a imagem em destaque do post, ou ainda uma outra imagem padrão.

Continuar lendo…

About Bruno Rodrigo Souza

Fundador da Agência Digital Web Absoluta e do Portal Seu Negócio na Internet, formado em Engenharia de Produção pela UFF-RJ. Trabalha com internet desde 2008. Especialista em SEO, Marketing Web e Wordpress. Escreve artigos sobre web empreendedorismo e Wordpress para o Portal Imasters e para Escola Wordpress

95 comments

  1. fiz isso e deu fatal error…
    não consigo abrir meu site, nem o wordpress.

    o que faço?
    obrigada

  2. Boa noite amigo, estou com esse mesmo problema com imagens de post compartilhados e não conseguir resolver, vc poderia me ajudar.

  3. Olá Bruno Souza, fiz mais deu erro tbm igual o amigo acima falou (FACILITEI), troquei tbm o plugin e fica com o mesmo erro.Por estou precisando muito de sua ajuda.

  4. Infelizmente não consegui resolver com suas instruções. Gostei muito do plugin compartilhar Jetpack mas a imagem nem o titulo e descrição aparecem, só mostra os links. Já tentei usar outros plugins mas não tive sucesso. Me dá uma força aí.

  5. Eu já uso o plugin yoast que adiciona as meta tags automaticamente…

    Sempre funcionou e do nada parou.

    Se eu colocar esse código não vai dar conflito?

  6. Tenho este mesmo problema (não dá pra alternar as imagens só fica a imagem de cabeçalho) ao compartilhar com o facebook, mas ao compartilhar com o Orkut ou Google+ está normal.

    Obs: o meu é Blogspot

  7. Boa noite!

    Estou com o mesmo problema, quando compartilho no Facebook as postagens do meu blog http://www.jiquinews.com.br o facebook pega a logomarca do blog, como imagem da postagem e não da opção para mudanças da imagem. Esse problema começou acontecer aos 15 dias, pois antes o facebook identificava as imagens da postagem e dava opção para mudança oferecendo várias miniaturas.

    Por favor me ajude…

  8. Oi Bruno,
    Muito legal as suas dicas, mas eu gostaria de saber como ficariam os códigos caso eu quisesse que a imagem associada fosse sempre a do post? Ou caso eu não quisesse uma imagem, eu poderia retirar a miniatura?

    Outra pergunta, a descrição precisa ser fixa? Ou pode ser relacionada ao post, as primeiras linhas?

    Abraço,

  9. E pra quem não usa wordpress como faz?

  10. Olá Bruno! Estou com problema no compartilhamento das postagens, quando vou compartilhar uma postagem do meu blog no facebook, só aparece a imagem do cabeçalho. Se puder me ajudar ficarei grata. Não sei o que faço, já pesquisei tanto …
    Att
    Vanusa

  11. Olá Bruno!
    Preciso exatamente desta função mas em meu site, e eu nunca usei wordpress. O funcionamento é o mesmo?

  12. Serve também para blogspot? Estou com o mesmo problema.

  13. Tem como eu escolher por exemplo 3 imagens para poder aparecer como miniaturas e a pessoa escolher uma delas na hora de compartilhar.

    Se sim como faria?

  14. Olá
    Bruno, como eu posso resolver este problema no blogspot? Tenho um blog de noticias e sempre que tendo compartilhar alguma matéria, ai inves de aparecer a imagem que se encontra na postagem, aparece um dos banners dos patrocionadores. Algumas vezes dá certo, mas na maioria das vezes nunca vai a imagem que quero. Poderia me ajudar?

  15. Tardelli, as soluções que aponto neste artigo são apenas para o WordPress hospedado em servidores fora do wordpress.com. Aconselho a todos optarem por esta solução.

  16. Muito obrigado Bruno!
    Já conhecia o Debugger do Facebook, porém ainda não conseguia mudar a miniatura da minha home, agora que vi a meta tag, ficou bem mais fácil!

  17. Obrigado, resolveu meu problema com as imagens, mas quando compartilho video ainda continua mostra a imagem permanece.

  18. olá, eu uso a versão atualizada do plugin Yoast, vai dar conflito?

  19. Ola,eu uso um plugin para compartilhar os Anúncios do site, ate funciona bem , mas quando se vai compartilhar aparece a imagem do topo do meu site e não do anuncio que quero compartilhar. tem como resolver este probleminha.Grato e parabéns ótimo site.

  20. Fiz o que tinha aqui e minha página fica branca! Não carrega mais… Socorro!!!
    Meu facebook é http://www.facebook.com/thiagomelego

  21. Olá tudo bem gostaria de sabe se você poderia me ajudar.
    Eu criei um link para postar no meu Flickr só que quando eu colo ela ,ele aparece a imagem como é pra ficar,mas eu queria que ficasse somente os códigos para as pessoas copiarem ele.Obrigado!

  22. Obrigado Bruno!
    Comigo funcionou.
    Esse post é muito importante. Parabéns!

  23. Olá Bruno
    Não estou conseguindo fazer, na realidade não tenho experiência em programação, nenhuma.
    Então preciso de mais explicações, por exemplo:

    Eu uso blogger e o SoBoo para compartilhamento

    Então, entendi que tenho que colocar estes dados no HTML do meu Post.
    Tenho que colocar os dois?

    Como substituo as informações?

    e

    Tem como adiconar uma descrição personalizada para cada postagem quando for compartilhada no Facebook?

    Agradeço

  24. Estou com problemas ao usar seu código fiz tudo como informou mas não apresenta a imagem ao invés disto me da o erro 500 Internal Server Error no lugar da imagem ja testei o link e esta direcionando corretamente, a única coisa que não fiz foi a pagina function php pois não entendi esta parte, poderia me ajudar?

  25. Olá, o meu problema acontece que quando o cara que fez a programação colocou o botão do face, e funcionava legal, puxava a foto em destaque e publicava grande. Agora ela da várias opções de fotos, e todas elas fora de foco, muito ruim, e quando mando publicar fica a foto menor, serrilhada, mas se clicar nela vai para meu site na pagina correta.
    aguardo, e obrigadol

    • Uma opção muito boa e que dará mais destaque ao seu post no facebook é publicar o link e subir a imagem correspondente ao post direto do seu computador assim resolve facilmente este problema e seu post terá mais destaque com a imagem maior que chama bastante a atenção. Mas se preferir usar a imagem puxada pelo link basta seguir as indicações deste artigo para resolver o problema. Obrigado e boa sorte!

  26. Ola, tentei colocar a meta tag para a imagem porem o facebook sempre coloca uma logo de um cliente que tenho, porem já tirei a logo da hospedagem e ele continua pegando esta imgem, sabe me dizer se ele demora para reconhecer a imagem nova?
    Obrigado

    • Olá Cassio. A imagem deveria surgir imediatamente após a atualização do código. Você precisa verificar se há algum plugin ou função do seu template que carrega essa outra imagem que você indica.

  27. Olá Bruno tudo bem, te enviei um email estou com muita dificuldade com o open graph veja se consegue me ajudar. Abraçao.

    • Olá Tom! Respondi seu email. Espero poder ajudar.
      Dá uma olhada no código fonte da sua página inicial e veja que o meta tag property=”og:image” está com uma imagem que não exite e nem é do seu site. Tenta atualizar isso com o plugin.
      Abraços.

  28. Bom dia! Eu também estou com esse problema na hora do compartilhamento e gostaria de saber onde exatamente dentro do arquivo functions.php eu devo colar o código. Isso que eu não entendi. Pode me ajudar? Desde já, agradeço!

    • Gabriela, se você optar por inserir o código no functions.php, basta colar o mesmo no final do arquivo, mas lembre-se que é importante ter um pouco de conhecimento em programação para não causar problemas no seu site. Abraços.

  29. Parabéns pelo post,com meu site acontece a mesma coisa,hora vai a imagem do post hora vai a do cabeçalho,já fiz ate algumas alterações no .htaccess e no hotlink dentro do cpanel

  30. olá amigo, agora você não explico como faço para colocar os códigos na plataforma Blogger, tem como?

  31. Tem como resolver esse problema na plataforma do blogger?

  32. Bruno Por favor me ajude, pois preciso muito disso não esto conseguindo resolver esse problema eu eu coloco o link na pagina do facebook e não aparece a imagem e nem o link para dar acesso ao meu site, me ajude por favor me adc no facebook ae

    https://www.facebook.com/uevertom.marques

  33. fiz isso e deu fatal error…
    não consigo abrir meu site, nem o wordpress.

    o que faço?
    obrigada

    • Olá Rodrigo. Sempre que houver um erro ocasionado por alguma alteração feita no código do seu site, retorne ao arquivo anterior à modificação. Por isso é muito importante fazer o backup antes. Boa sorte.

  34. Bruno boa noite, preciso de uma força,

    depois que coloquei seu codigo na functions o site e o wp-admin estão fora do ar apresentando o seguinte erro “Parse error: syntax error, unexpected ‘[‘ in /home/eblop369/public_html/wp-content/themes/church/functions.php on line 17”
    o pior é que não consigo acessar nada mais…
    Preciso de sua ajuda

  35. Olá Bruno gostei muito do post, porém não consigo deixar realmente como eu quero, por exemplo, eu consigo deixar o compartilhamento com uma imagem padrão mas meu objetivo é ao compartilhar a imagem da miniatura ser a mesma do post, qual código eu usaria?

  36. Olá! Estou com o mesmo problema, mas não consigo resolver… Já visitei vários sites e li muitos tutoriais e mesmo assim o problema ainda persiste, pois estou fazendo algo errado. Será que você poderia me ajudar?

  37. Simplesmente sensacional.

    Apliquei no meu site e ficou perfeito http://sevagas.com.br/goiania/

    Muito obrigado pela dica!!!

  38. oi, bruno, tudo bom?
    primeiro gostaria de saber se essas dicas funcionariam no cargocollective.

    caso funcione:
    tenho várias seções de fotografias no site e instalei um botão de like e share pelo developers, mas quando vou compartilhar um projeto/seção, a miniatura/thumbnail é de outro projeto! e é sempre o mesmo.
    pelo que fucei, o problema é em uma tal de “og:url”, mas não sei como alterar, o que tenho que fazer, etc. você pode me ajudar, por favor?

    atenciosa e desesperdamente,
    alile dara.

    • Olá Alile, infelizmente não sei qual é a estrutura do Gargo para te dar essa resposta, mas é muito provável que não sirva. Minha dica para você é migra já para o WordPress. Tenta primeiro o http://wordpress.com na versão gratuita e se quiser algo mais profissional pode ir para um auto hospedado e selecionar um template bacana.
      Se quiser mais dicas me manda um email quando quiser.
      Abraços,

  39. Valeu Bruno!

    Funcionou perfeitamente.

    Nem todas as postagens do meu blog possuem imagens. Esse tutorial veio pra salvar meus compartilhamentos.

    Grande abraço.

  40. Funcionou muito bem, porém o facebook não da chance para erros, uma vez errado ele sempre vai postar errado o mesmo link. Obg pela dica!

  41. Olá,
    Tenho um blog na internet, hospedado no blogger .. De uns dias para cá a postagem que público não aparece a imagem pequena na pagina inicial. Eu não fiz nenhuma mudança e isso ocorreu.

    Saberia dizer o que é ??? coloquei o site no campo meu site do seu formulário ….

    Abraço…

  42. Olá, eu estou participando de uma promoção no facebook e para isso preciso compartilhar uma certa imagem todos os dias, hoje fui compartilhar e a imagem não aparece mais, nem os antigos compartilhamentos, você poderia me ajudar com isso?

  43. No meu site o compartilhamento pelo botão do Facebook, não aparece, imagem, título e descrição, já pesquisei muito e não achei como corrigir, eu trabalho com a plataforma do Joomla, tentei colocar os botões do AddThis, mas mesmo assim não aparecem.
    Pode me ajudar?

  44. Olá Bruno, o seu artigo está bem didático e me ajudou a entender o problema. Contudo, como sou leiga no assunto não sei como incluir o código que você sugeriu. Devo colar no functions.php ou no template-tags.php? É só colar ao final do arquivo?

  45. Bruno, tentei fazer isso e agora meu worpress não abre nem a parte de login
    da esse erro: Parse error: syntax error, unexpected $end in /home/u976771353/public_html/wp-content/themes/virtue/functions.php on line 49

    me ajuda por favor!

  46. Tenho um site na plataforma WP, quando vou compartilhar uma postagem no facebook não aparece o titulo e descrição e nem a miniatura … o que seria isso?

  47. amigo não consigo compartilhar com o face o post certo já tentei de tudo. Você faz esse tipo de trabalho qual o valor?

  48. SALVADOR DEVIDAS!!!!! 🙂
    HÁ UNS 3 MESES PROCURO UMA SOLUÇÃO PARA ESSE PROBLEMA, TROQUEI ATÉ DE HOSPEDAGEM. ENFIM CONSEGUI.

    VLW

  49. Olá tudo bem,
    Estou super agoniada e nervosa, por que coloquei o código e agora meu blog nao abre, nao atualiza nada… retirei o código e novamente cliquei em atualizar fichário, mas aí continua indo pra uma pagina em branco escrito http://www.morganagronskar.com/wp-admin/theme-editor.php.
    Por favor, espero que me ajude.

  50. cara, muito obrigado, me ajudou MUITO!!

  51. Onde coloco os códigos? Tenho de colocar na head e um link na página? Não entendi, pode ajudar?

  52. Funcionou perfeitamente, muito obrigado por compartilhar.

  53. Tem alguma solução assim para o Blogger?

    A imagem que aparece quando eu clico em algum botão de compartilhamento é a da info do autor. Gostaria pelo menos de destacar a primeira imagem inserida no post, é possível?

  54. sou leiga e gostaria de sugerir que você printasse uma tela de como devemos colar o código.

  55. Bom dia! Sou muito grato por esse tutorial amigo, tentei de diversas formas, Plugins e outros códigos e nenhum conseguiu compartilhar meus artigos com as respectivas imagens, mas esse que você fornece consegui na hora, é só tirar os comentários do código acima // e não deixar espaços entre as funções e colocar o link da imagem padrão que funciona perfeitamente.

Leave a Reply

Your email address will not be published. Required fields are marked *

*