Pré-visualização de links: porque aparece estragada e como corrigir

A imagem de pré-visualização de um link vem de uma linha do HTML da tua página: a tag og:image. Quando uma plataforma como o WhatsApp, o Slack, o LinkedIn ou o iMessage vê um link, um crawler vai buscar a página, lê essa tag e descarrega a imagem. Se a pré-visualização estiver em branco ou errada, algo nessa cadeia falhou: a tag não existe, o endereço da imagem é relativo, o crawler está bloqueado ou a plataforma ainda mostra uma cópia antiga da cache.

Porque falham as pré-visualizações: tabela de diagnóstico

Começa pelo sintoma que consegues ver. A tabela abaixo cobre as oito causas por detrás das pré-visualizações estragadas, com os suspeitos do costume primeiro.

As tags de que uma boa pré-visualização precisa

Precisas de surpreendentemente pouco. Um título, uma descrição, um URL de imagem completo, o tamanho da imagem e mais uma linha para o X mostrar um cartão grande em vez de uma miniatura. O URL canónico da página em og:url ajuda as plataformas a agrupar partilhas da mesma página.

<head>
  <title>Autumn menu | Hearth Bakery</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/autumn">
  <meta property="og:title" content="Our autumn menu is here">
  <meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
  <meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
  <meta name="twitter:card" content="summary_large_image">
</head>

As frameworks facilitam este erro. Uma aplicação de página única que define as tags depois de carregar terá boa pré-visualização em poucos sítios e falhará na maioria. Usa antes a funcionalidade de metadados do lado do servidor da tua framework, ou gera a imagem por página como se descreve em imagens OG dinâmicas.

Como atualizar uma pré-visualização de link em cache

As plataformas vão buscar a página uma vez e guardam o resultado durante algum tempo, por isso corrigir as tags não corrige as publicações que já foram partilhadas, e por vezes nem as novas partilhas. Usa as ferramentas da própria plataforma onde existirem e muda o URL onde não existirem.

1. 1

   LinkedIn

   Cola o URL no LinkedIn Post Inspector. Vai buscar a página outra vez e mostra exatamente o que o LinkedIn vê.

2. 2

   Facebook, Instagram e WhatsApp

   O Sharing Debugger da Meta, nas ferramentas para programadores, mostra as tags que encontrou e tem um botão para nova leitura. O WhatsApp pode demorar mais a atualizar.

3. 3

   Slack, Discord, iMessage e outras

   A maioria não tem ferramenta pública de atualização. Muda o nome do ficheiro da imagem, por exemplo autumn-v2.png, e atualiza a tag, para o crawler ver um endereço novo.

4. 4

   Casos teimosos

   Partilha a página com uma query string inofensiva como ?v=2. As plataformas tratam-na como um link novo e vão buscá-la de novo.

Como desenhar uma imagem com boa pré-visualização em todo o lado

Com as tags a funcionar, é a própria imagem que decide se alguém toca. Faz 1200×630, um formato largo de cerca de 1,91 para 1, que todas as grandes plataformas aceitam. Algumas apps mostram-na mais pequena ou cortam um pouco dos lados, e outras recorrem a um quadrado, por isso mantém as palavras no centro. Os tamanhos completos estão em tamanho da imagem OG.

Uma pré-visualização é minúscula numa conversa, por isso aplicam-se as regras de texto em miniaturas: poucas palavras grandes, contraste forte, uma só ideia. No Gradiently, o Mark de um design guarda a região mais calma atrás das palavras e escolhe letra clara ou escura por linha, por isso o título fica legível por mais que a plataforma redimensione o cartão. Começa pelo tamanho Pré-visualização de link no Studio e o mesmo design pode tornar-se o teu banner de blogue 1200×600 e o resto dos tamanhos de imagens para redes sociais.

Um teste de dois minutos antes de partilhares

1. Vê o código-fonte da página e confirma que og:image lá está, com um URL https completo.
2. Abre o URL dessa imagem numa janela privada do navegador. Se não carregar aí, os crawlers também não conseguem carregá-la.
3. Passa o URL pelo LinkedIn Post Inspector ou pelo depurador da Meta para veres as tags lidas.
4. Envia o link a ti próprio no WhatsApp ou no Slack e olha para ele num telemóvel.
5. Se algo estiver desatualizado, muda o nome do ficheiro da imagem e testa de novo.

Faz isto uma vez por cada modelo do teu site, não por cada página, e as pré-visualizações estragadas deixam de ser uma surpresa. Se estás a construir um site de raiz, o guia de fundo de hero para sites trata da imagem principal de onde essas pré-visualizações costumam partir.