Open Graph – Imagem miniatura do seu site no Facebook

O Windows 10 é bom mesmo?
31 de julho de 2015
Cuidado com a FRAUDE do br.registro
19 de Janeiro de 2016

Open Graph – Imagem miniatura do seu site no Facebook

Compartilhando o seu artigo no Facebook ou em outra rede social você percebe que não aparece a miniatura da imagem ou aparece algumas opções, mas nenhuma que que lhe agrade, como resolver esta situação?

Open Graph – Imagem miniatura do seu site no Facebook

Particularmente gosto de ter uma imagem única quando vou compartilhar algo nas redes sociais referentes ao meu site, quando trata-se de um artigo eu posso até utilizar imagens deste artigo, mas não é o caso aqui.

Fui compartilhar uma informação do meu site e apareceu uma imagem que não tinha muito haver com o que eu estava compartilhando, então percebi que ainda não tinha configurado o protocolo Open Graph para meu site, utilizei como referência este link e acredito que seja o melhor caso pretendam realizar essa configuração, entretanto vou colocar abaixo de forma resumida como ficou o meu código na TAG <head>.

<!-- OG Graph-->
<meta property="og:locale" content="pt_br">
 <meta property="og:url" content="http://brunoriggs.com.br">
 <meta property="og:title" content="Bruno Riggs Tecnologia">
 <meta property="og:site_name" content="Bruno Riggs Tecnologia">
 <meta property="og:description" content="Consultoria em T.I, Desenvolvimento WEB, Marketing Digital, SEO e Links Patrocinados">
 <meta property="og:image" content="http://brunoriggs.com.br/bruno-riggs-business.jpg">
 <meta property="og:image:type" content="image/jpeg">
 <meta property="og:image:width" content="1024">
 <meta property="og:image:height" content="576">
 <meta property="og:type" content="website">

Observem que a propriedade og: é sempre seguida por outra informação, url, title, imagem, formato da imagem e alguns outros. Tomando este exemplo por base vocês podem substituir de acordo com as suas configurações.

Parece que existe a possibilidade de termos mais de uma imagem para escolher, nunca utilizei, mas basicamente você vai usar:

<meta property="og:image" content="www.meusite.com.br/imagem.jpg">
 <meta property="og:image" content="www.meusite.com.br/imagem2.jpg">
 <meta property="og:image" content="www.meusite.com.br/imagem3.jpg">

bruno-riggs-business

É normal que mesmo depois destas implementações o Facebook mostre as imagens antigas, então você precisa zerar o cache do facebook acessando developers.facebook.com/tools/debug

Digite a url do seu site e clique em debug, após este procedimento irão aparecer dois outros botões. Clique no da esquerda e depois no da direita, se tudo correr bem você não verá nenhum erro, se isto vier a ocorrer você vai precisar ler (em inglês) e resolver.

Após estes procedimentos você pode ir nas redes sociais e testar o seu compartilhamento, verificando se a miniatura da imagem aparece.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *