Como fazer com que a miniatura de visualização do seu site apareça no Facebook Share

Quando alguém compartilha um link para uma das páginas do seu site na linha do tempo, o Facebook busca automaticamente uma imagem da página vinculada e a exibe ao lado do nome e URL da página. Infelizmente, a imagem obtida às vezes pode não estar relacionada ao conteúdo da página ou pode até mesmo estar ausente do link compartilhado. Para garantir que o Facebook exiba a melhor imagem possível quando alguém compartilha sua página - e, portanto, aumente isso taxa de cliques do link - adicione algumas linhas de código ao código HTML da página para forçar o Facebook a buscar um imagem.

Adicionar marcação de gráfico aberto

Gráfico aberto é um protocolo desenvolvido pelo Facebook que, entre outros recursos, permite que os desenvolvedores da Web adicionem tags de marcação a suas páginas para personalizar a forma como o Facebook exibe links para seus sites.

Vídeo do dia

Adicione tags Open Graph a uma página editando seu código-fonte HTML:

Passo 1

Abra o arquivo HTML em um editor de texto como o Bloco de notas ou em um editor HTML dedicado. Posicione o cursor antes da tag de fechamento perto do topo do arquivo e pressione

Digitar para criar uma nova linha.

Arquivo HTML no Bloco de Notas, com linha em branco na seção Cabeçalho indicada.

Crédito da imagem: Imagem cortesia da Microsoft

Passo 2

Insira a seguinte metatag:

Substituir http://www.example.com/thumb.jpg com o link real da imagem que você deseja que o Facebook exiba quando um usuário compartilha um link para o seu site.

Gorjeta

  • Embora o Facebook aceite imagens em miniatura tão pequenas quanto 200 x 200 pixels, o tamanho recomendado tem 1200 pixels de largura e 630 pixels de altura.
  • Para aumentar a porcentagem de usuários que clicam no link - algo conhecido como taxa de cliques - considere adicionar um apelo à ação para a imagem, como Clique aqui ou Descubra mais.
Arquivo HTML com a tag de imagem da meta propriedade Open Graph circulada.

Crédito da imagem: Imagem cortesia da Microsoft

etapa 3

Salve seu arquivo e carregue-o em seu host da web.

Além da imagem em miniatura, considere o uso de tags de marcação Open Graph para, por exemplo, customizar título ou descrição de um link compartilhado.

Arquivo HTML com o título do Open Graph e as tags de descrição indicadas.

Crédito da imagem: Imagem cortesia da Microsoft