Você compartilha sua nova página e a prévia mostra um título antigo, um logo cortado ou um quadro cinza. As pessoas julgam um link por esse cartão antes de clicar, então uma prévia quebrada custa visitas a cada compartilhamento.
As prévias seguem algumas regras simples. Quando a página entrega aos apps o que eles procuram, o problema costuma ficar resolvido de vez.
De onde vem a prévia
Quando alguém cola um link, o robô do app busca a sua página e lê algumas tags no cabeçalho HTML. O padrão principal é oprotocolo Open Graph, que define og:title, og:type, og:image e og:url. A maioria dos apps também lê og:description, e o X lê as próprias tags twitter:card, usando o Open Graph para o resto.
O robô não rola a página, não clica nem espera como uma pessoa. Ele lê o que o servidor envia primeiro. O que o JavaScript acrescenta depois muitas vezes fica invisível para ele.
Por que dá errado
As tags não existem, então o app adivinha a partir do texto e das imagens que encontrar.
As tags são adicionadas por JavaScript depois que a página carrega, então o robô nunca as vê.
O og:image usa um caminho relativo ou um endereço http em vez de uma URL https completa.
A imagem é grande demais, pequena demais, tem o formato errado ou é bloqueada por firewall, proteção contra bots ou login.
Todas as páginas usam o mesmo título e a mesma imagem genéricos, então todos os links parecem iguais.
O app guardou em cache uma versão antiga da página e continua mostrando.
Uma imagem que funciona em todo lugar
Use uma imagem na horizontal de 1200 × 630 pixels, em JPEG ou PNG e com tamanho razoável. Mantenha textos importantes e logos longe das bordas, porque alguns apps cortam em quadrado ou em um formato mais estreito. Sirva a imagem por uma URL https completa que qualquer pessoa consiga abrir sem login.
Adicione também og:image:width, og:image:height e og:image:alt. Eles ajudam os apps a montar o cartão antes de a imagem carregar e a descrevê-la para quem usa leitor de tela.
Como atualizar uma prévia em cache
Os apps guardam as prévias, às vezes por dias. Depois de corrigir as tags, pode ser preciso pedir que leiam a página de novo. O Sharing Debugger do Facebook e o Post Inspector do LinkedIn têm um botão para buscar a URL novamente. Em outros apps, compartilhar o link com um parâmetro inofensivo, como ?v=2, gera uma prévia nova.
Teste antes de compartilhar
Meuteste gratuito de prévia de link busca a sua página como os robôs de prévia fazem, lê as tags Open Graph e de cartão do X, baixa as imagens para conferir se carregam e mede tamanho e peso. Depois mostra como o cartão deve aparecer no X, LinkedIn, Facebook, WhatsApp, Slack e Discord, com uma lista de correções.
Cada app tem suas regras e as muda de tempos em tempos, então trate as prévias como um guia próximo, não como uma cópia exata pixel a pixel.
Deixe automático
Em um site com muitas páginas, as prévias deveriam vir do próprio conteúdo: o nome do produto, o título do artigo ou a data do evento, com uma imagem gerada ou escolhida para cada página. Frameworks como o Next.js conseguem gerar essas tags e imagens no servidor. Se todas as suas páginas usam o mesmo cartão genérico,me conte sobre o site e eu configuro tudo para que cada página nova tenha uma prévia adequada sem trabalho extra.