Página Inicial > Dicas Webmaster SEO > Como Alterar a Imagem do Like Button

Como Alterar a Imagem do Like Button

Acerte na imagem quando compartilhar o conteúdo

Olá, amigos da MestreSEO!

A coluna de Facebook desta semana retoma um formato já feito por aqui. Além de passar informações sobre novidades, debater conceitos, estratégias e trazer entrevistas com especialistas, um dos meus objetivos aqui é montar tutoriais que resolvam questões pontuais dentro da rede social.

Recebi, via comentários aqui no blog e também por mensagens diretas de amigos da comunidade, a mesma reclamação: “quando eu clico em Curtir (like button) no meu site, a postagem gerada no meu perfil traz uma imagem estranha, sem relação alguma com meu post”.

Em outras palavras:

Like button com imagem errada

Este é mais um daqueles pequenos problemas que o Facebook acumula, sem muitas facilidades para encontrar fontes de resolução.

Mesmo assim, após algum tempo de pesquisa e com uma ajuda determinante do colega de MestreSEO, Wellington Kleber, encontrei algumas maneiras para que você resolva mais este problema e deixe tudo com a cara de sua empresa.

Descobrindo o Erro

Como já comentei, o jeito mais comum de você descobrir o erro é na clicagem. Muita gente só percebe que a imagem usada pelo botão Curtir está errada quando está diante do perfil no Facebook após aprovar um conteúdo do próprio site.

Mas existem aqueles que geram conteúdo em seu blog e não se preocupam em dar o Like. Para estes e os demais curiosos em saber que imagem está sendo adotada pelo botão, a área de Developers da rede social possui uma ferramenta interessante: a URL Linter

Ela trabalha de forma simples: basta colar a URL de entrada que você deseja consultar as informações. No nosso caso, queremos observar apenas qual imagem está selecionada como thumb, mas, caso interesse, há dados de description, title, metas, quantidade de likes, etc.

URL Linter te dá informações do Facebook

Solução Simples

O conserto é rápido e fácil. Quem tem em seu site o sistema WordPress pode comemorar, pois, pra variar, um plugin foi criado para resolver a questão – o Facebook Like Thumbnail.

De quebra, ele ainda melhora a situação do Like Button em seu site, escolhendo a melhor imagem para replicar no Facebook.

A instalação pode ser feita através da área de plugins do WordPress. Basta baixar o arquivo e subir para o servidor de seu site – um processo já tradicional se você tem experiência com a plataforma. Se preferir, faça a busca direta pelo painel administrativo e instale a aplicação.

Na tela de configuração do plugin, algumas informações fundamentais explicam o seu funcionamento e há apenas um campo de URL para edição. Este espaço serve para que você defina uma imagem padrão que será usada como thumbnail para as Curtidas em seu site ou blog.

O plugin de Like Thumbnail

Reparem nas instruções e como ele torna as coisas mais fáceis. Traduzindo-as, mostrando a ordem de escolha da imagem:

Se for um post ou página:

  • Thumbnail configurada no post
  • A primeira imagem colada no post
  • A imagem Default escolhida no plugin

Se for uma página principal ou de search:

  • A imagem Default escolhida no plugin

Qualquer outra coisa:

  • Primeira imagem no post da rotação
  • A imagem Default do plugin

Desta forma, você padroniza uma imagem padrão que será usada em caso de ausência de qualquer outra em uma página de conteúdo (thumbnail configurada pelo painel do WP ou imagem no post). O plugin ainda vai organizar as prioridades pra você, deixando esta thumbnail do WP como primeira opção de imagem no Like Button.

Após instalarmos este plugin no blog da MestreSEO, veja como o Curtir do MestreCast 34 foi interpretado no meu perfil do Facebook:

O Like correto com o plugin de imagem

Fazendo no Braço

Quem não trabalha com o WordPress, não tem a configuração de thumbnails e quer criar pequenos ícones padronizados para cada post, cada Like, é preciso abusar do conhecimento em programação.

Entre no código-fonte da página em que o seu Like Button está (ou será) instalado. Dentro do <head> da mesma, insira a seguinte linha:

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

Este endereço citado à frente do content é o local onde sua imagem está hospedada.

Desta forma, você estará apontando para o Facebook qual o caminho ele deve seguir na hora de escolher a thumbnail que será replicada no perfil.

Já antecipo aqui um comportamento-problema: o Facebook leva 24h para notar a atualização no código e talvez você não enxergue a mudança de imagem de imediato. Mas, ao mesmo tempo, a solução chega com a mesma ferramenta citada aqui.

Usando a URL Linter, basta colar o endereço da página que você alterou o código e clicar em “Lint” novamente. Ela irá mostrar que a imagem mudou e, ao mesmo tempo, estará forçando o Facebook a fazer a atualização pedida. Basta Curtir novamente o conteúdo e verificar em seu perfil a troca da thumbnail.

Com esta meta property você tem a chance de trabalhar de forma ainda mais padronizada, apesar de dar trabalho, por exigir a colocação do código em cada página criada e o upload de uma imagem nova para cada post.

Este trabalho braçal é exatamente o mesmo que o plugin Facebook Like Thumbnail realiza, conforme podemos observar na codificação do post do MestreCast:

O codigo automático do plugin do Like

Conclusão

Realizando uma destas opções você terá organizado uma simples, porém importante função na integração Site-Facebook.

Configure corretamente a imagem de sua empresa, acerte para que a imagem de seu post esteja também no Facebook das pessoas que curtem e compartilham o seu conteúdo. Ela também faz parte do processo!

Qualquer dúvida, basta entrar em contato pelos comentários.

Um abraço e até semana que vem.

Artigo produzido por MestreSEO, empresa especializada em Otimização de Sites. Não perca a oportunidade de conferir as nossas ferramentas de SEO.


Artigo Original: Como Alterar a Imagem do Like Button

Aprenda mais sobre SEO, Links Patrocinados e Social Media

ExpOn - O maior evento de SEO, Links Patrocinados e Social Media

Curso de SEO

Aproveite a oportunidade para participar do nosso Curso de SEO. Garanta já a sua vaga: http://www.mestreseo.com.br/curso-de-seo


Mestre SEO

Incoming search terms:

  1. Nenhum comentário ainda.
  1. Nenhum trackback ainda.