Como exibir a visualização em miniatura do seu site nos compartilhamentos do Facebook

O Facebook possui uma função de link que permite aos usuários compartilhar conteúdo entre si. Essa funcionalidade, também chamada “Compartilhar” ou “Adicionar isso”, carrega um gráfico do site para acompanhar o link. Devido a vários fatores, nem todos os sites carregam uma imagem de visualização. Além de ter o título mais longo de todos os tempos, este artigo também contém as etapas para garantir que seu site exiba uma imagem “Visualizar para compartilhar”.

Passo 1

Antes de percorrer cada página do seu site adicionando código e criando imagens, verifique se você não tem uma boa imagem com “Visualizar para compartilhar”. Acesse o Facebook, tente compartilhar um link e veja o que aparece. Se você não obtiver uma imagem (ou pelo menos uma que você goste), continue.

Etapa 2

Encontre uma imagem que você deseja usar para representar seu site. Você pode usar um logotipo, uma imagem do site ou até uma captura de tela. Supondo que você queira que as pessoas saibam a boa aparência da sua página nos navegadores, faça uma captura de tela do seu site. Você pode fazer isso usando o botão de tela de impressão, Shift + Command + 3 em um Mac ou algum software gratuito de captura de tela.

Etapa 3

Antes de carregar a captura de tela, use o software de imagem para recortá-la e editá-la da maneira que deseja que apareça no site. Para carregá-lo, eu o reduziria para 250 pixels de largura ou menos e o compactaria.

Etapa 4

Carregue a imagem. É melhor que você faça o upload para o site real para o qual está gerando a visualização. Embora possa funcionar com outro serviço, como Flickr ou Photobucket, às vezes não carrega uma visualização da imagem do site.

Etapa 5

Adicione uma tag de metadados da fonte da imagem no cabeçalho do seu documento. A tag terá a seguinte aparência: <link rel = “image_src” href = “http://site.com/image.jpg” /> (remova o espaço entre <e o link). Altere o href para o local em que a imagem está hospedada, usando o URL completo. Para obter uma “Visualização para compartilhar” e outras funções para ler a imagem corretamente, você precisa garantir que ela esteja entre as tags de cabeçalho no seu html. Também ajuda a ter tags de metadados “title” e “description”.

 

Você pode estar interessado:

Deixe um comentário