O dono de uma pousada na Praia do Morro mandou o link do site novo para um hóspede pelo WhatsApp. Do outro lado, apareceu só um endereço azul, sem foto e sem o nome da pousada. O hóspede desconfiou e pediu o Instagram para conferir se era golpe. O site estava no ar e funcionando. O que faltava era a prévia do link, aquele cartão com imagem, título e descrição que aparece quando alguém compartilha uma página.
Neste post você vai entender de onde vem essa prévia, por que às vezes ela some ou mostra a imagem errada e o que conferir no seu site para que cada link compartilhado chegue com boa aparência.
O que é a prévia do link
Quando você cola um endereço no WhatsApp, no Facebook, no LinkedIn ou no Telegram, o aplicativo visita a página antes de enviar a mensagem. Ele lê algumas informações guardadas no código e monta um cartão com uma imagem, um título, uma frase curta e o endereço do site.
Essas informações ficam em etiquetas chamadas Open Graph, um padrão criado pelo Facebook em 2010 e adotado pela maioria dos aplicativos de mensagem e redes sociais. Quem visita o site não vê essas etiquetas. Elas existem só para os aplicativos que leem a página.
Funciona como a capa de um livro na livraria. Antes de abrir, a pessoa olha a capa e decide se vale a pena. No WhatsApp, a prévia é a capa do seu site.
Por que a prévia faz diferença para o seu negócio
Passa confiança
Golpes com links falsos são comuns, e as pessoas aprenderam a desconfiar de endereço solto. Um cartão com a foto da fachada, o nome da empresa e uma descrição clara mostra que o link é seu. Para quem recebe, é a diferença entre clicar na hora e perguntar se aquilo é confiável.
Faz mais gente clicar
Num grupo de WhatsApp, a mensagem com imagem ocupa mais espaço na tela e chama o olho. Um link sem prévia passa despercebido no meio das conversas. Se você divulga promoções, cardápio ou agenda pelo WhatsApp Business, cada envio sem prévia rende menos do que poderia.
Mostra a página certa
Quando não encontra as etiquetas, o aplicativo tenta adivinhar. Às vezes pega o logotipo esticado, um ícone do rodapé ou a foto de um banner antigo. O resultado parece descuidado, mesmo num site bem feito.
As quatro partes da prévia
Cada parte do cartão vem de uma etiqueta diferente. Quem cria o site preenche essas etiquetas para cada página.
- Imagem (
og:image): a foto ou arte que aparece em cima. É a parte que mais chama atenção. - Título (
og:title): o nome da página, em negrito. Costuma ser igual ou parecido com o título que aparece no Google. - Descrição (
og:description): uma ou duas linhas que explicam o que a pessoa vai encontrar ao abrir o link. - Endereço (
og:url): o endereço oficial da página. O aplicativo mostra o domínio em letra menor, logo abaixo.
O título e a descrição seguem a mesma lógica do título e da descrição que aparecem no Google: claros, curtos e com o nome do que você oferece. A diferença é que, na prévia, a imagem pesa mais do que o texto.
Como deve ser a imagem da prévia
A imagem é onde a maioria dos sites erra. Alguns cuidados resolvem quase todos os casos:
- Tamanho de 1200 x 630 pixels. É o formato horizontal que Facebook, WhatsApp e LinkedIn exibem bem. Imagens muito pequenas aparecem como uma miniatura quadrada no canto, ou nem aparecem.
- Formato JPG ou PNG. Imagens em SVG não aparecem no WhatsApp nem no Facebook. Para a prévia, o JPG é a escolha mais segura.
- Arquivo leve. O WhatsApp costuma desistir de imagens pesadas. Uma arte bem comprimida, com algumas centenas de KB, carrega sem problema. O post sobre como otimizar imagens do site mostra como reduzir o peso sem perder qualidade.
- O que importa no centro. Alguns aplicativos cortam as laterais, e outros mostram a imagem em formato quadrado. Deixe o logotipo e qualquer texto longe das bordas.
- Pouco texto na arte. No celular, a imagem aparece pequena. Uma frase curta e o logotipo bastam. O resto fica por conta do título e da descrição.
- Endereço completo da imagem. A etiqueta precisa apontar para o caminho inteiro, começando com https://. Um caminho pela metade funciona dentro do site, mas o aplicativo não encontra a imagem.
Por que o link do site aparece sem imagem
Se você compartilhou seu site e a prévia veio vazia ou errada, a causa costuma estar nesta lista:
| O que acontece | Causa provável | Como resolver |
|---|---|---|
| Nenhuma prévia aparece | O site não tem as etiquetas Open Graph | Incluir as etiquetas em cada página |
| Aparece o título, mas sem imagem | Imagem pesada, em SVG ou com endereço incompleto | Trocar por um JPG leve de 1200 x 630 com endereço completo |
| Aparece a imagem antiga | O aplicativo guardou a prévia anterior | Atualizar a prévia no depurador do Facebook ou testar o link com ?v=2 no final |
| O logotipo aparece cortado | Imagem quadrada ou pequena demais | Criar uma arte horizontal própria para a prévia |
| A prévia demora ou falha | Site lento ou bloqueando a visita dos aplicativos | Melhorar a velocidade e revisar a proteção do servidor |
| Todas as páginas têm a mesma prévia | Uma única etiqueta repetida no site inteiro | Definir título, descrição e imagem para cada página |
Como testar a prévia do seu site
Você não precisa entender de código para saber se a prévia está boa. Três testes simples mostram o que o cliente vê:
- Mande o link para você mesmo. No WhatsApp, abra a conversa com o seu próprio número e cole o endereço. Faça isso no celular, que é onde a maioria dos clientes vai receber a mensagem.
- Use o depurador do Facebook. A ferramenta gratuita Depurador de Compartilhamento, na área de desenvolvedores do Facebook, mostra o que o aplicativo enxerga na página e avisa quando falta alguma etiqueta. Ela também tem um botão para buscar a página de novo, que atualiza a prévia guardada pelo Facebook.
- Confira as páginas que você mais divulga. Página inicial, página de serviços, cardápio, produtos e postagens do blog. Cada uma deve ter a sua prévia, com título e imagem que combinem com o conteúdo.
Se você trocou a imagem e o WhatsApp continua mostrando a antiga, é porque ele guardou a prévia por um tempo. Um truque simples é testar o mesmo link com ?v=2 no final. O aplicativo trata esse endereço como novo e busca a imagem atualizada.
Cada página com a sua prévia
Muitos sites colocam a mesma imagem e o mesmo título em todas as páginas. Funciona, mas desperdiça uma chance. Se uma loja de roupas compartilha o link de um vestido, a prévia deveria mostrar o vestido, com o nome e o preço na descrição. Se uma clínica divulga a página de um tratamento, a imagem deve ser daquele tratamento.
Lojas virtuais e blogs costumam montar isso sozinhos a partir da foto principal do produto ou da capa do post. Em sites feitos sob medida, alguém precisa preencher cada página. Vale incluir esse item no checklist antes de publicar o site, junto com o teste no celular.
Os dados estruturados fazem um trabalho parecido para o Google. As etiquetas Open Graph cuidam dos aplicativos de mensagem e das redes sociais. Um site bem acabado tem as duas coisas.
Por onde começar
Faça o teste agora: mande o link da sua página inicial para você mesmo no WhatsApp. Se aparecer um cartão com imagem, título e descrição que representam bem a empresa, ótimo. Repita com as páginas que você mais divulga. Se a prévia vier vazia, com o logotipo cortado ou com uma foto antiga, anote o problema e compare com a tabela acima.
Se preferir não mexer no código, a TH Designer cuida disso para você. Criamos a imagem de compartilhamento no tamanho certo, preenchemos as etiquetas de cada página e testamos o resultado no WhatsApp e nas redes antes de entregar o site. Conheça nossos serviços e chame a gente no WhatsApp. O link, claro, vai chegar com prévia.
Comentários
Entre com a sua conta Google para comentar.