Como obter a pré-visualização em miniatura do seu site exibido em compartilhamentos do Facebook

Passo 1

Antes de passar por todas as páginas do seu site adicionando código e criando imagens, verifique se você ainda 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 goste), continue.

Passo 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ê só quer que as pessoas conheçam a boa aparência da sua página em seus navegadores, faça uma captura de tela do seu site. Você pode fazer isso usando o botão da tela de impressão, Shift + Command + 3 em um Mac ou algum software de captura de tela gratuito.

Passo 3

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

Passo 4

Carregue a imagem A melhor coisa é que você carregá-lo no site real para o qual você está gerando a visualização. Embora possa funcionar com outro serviço como o Flickr ou Photobucket, às vezes não carregará uma prévia da imagem do site.

Passo 5

Adicione uma tag de metadados da fonte da imagem ao cabeçalho do seu documento. O rótulo será parecido com: (remova o espaço entre <e o link). Certifique-se de alterar a href para o local em que a imagem está hospedada, usando o URL completo. A fim de obter um "Preview para compartilhar" e outras funções para ler a imagem corretamente, você precisa se certificar de que está entre as tags de cabeçalho no seu html. Também ajuda a ter tags de metadados "title" e "description".