Prévia de link: por que seus links ficam quebrados e como corrigir

A imagem de prévia de link vem de uma linha no HTML da sua página: a tag og:image. Quando uma plataforma como WhatsApp, Slack, LinkedIn ou iMessage vê um link, um rastreador busca a página, lê essa tag e baixa a imagem. Se a prévia está em branco ou errada, algo nessa cadeia falhou: a tag está ausente, o endereço da imagem é relativo, o rastreador está bloqueado ou a plataforma ainda mostra uma cópia antiga do cache.

Por que as prévias de link quebram: tabela de diagnóstico

Comece pelo sintoma que você vê. A tabela abaixo reúne as oito causas por trás das prévias quebradas, com as mais comuns primeiro.

As tags que uma prévia funcional precisa

Você precisa de surpreendentemente pouco. Um título, uma descrição, uma URL completa da imagem, o tamanho da imagem e mais uma linha para o X mostrar um cartão grande em vez de uma miniatura. A URL canônica da página em og:url ajuda as plataformas a agrupar compartilhamentos 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>

É fácil errar isso em frameworks. Um app de página única que define as tags depois de carregar vai mostrar a prévia em alguns lugares e falhar na maioria. Use o recurso de metadados no servidor do seu framework ou gere a imagem por página, como descrito em imagens OG dinâmicas.

Como atualizar uma prévia de link em cache

As plataformas buscam a página uma vez e guardam o resultado por um tempo, então corrigir as tags não corrige os posts que as pessoas já compartilharam e, às vezes, nem os novos compartilhamentos. Use as ferramentas da própria plataforma quando existirem e mude a URL quando não existirem.

1. 1

   LinkedIn

   Cole a URL no Post Inspector do LinkedIn. Ele busca a página de novo e mostra exatamente o que o LinkedIn vê.

2. 2

   Facebook, Instagram e WhatsApp

   O Sharing Debugger da Meta, nas ferramentas para desenvolvedores, mostra as tags encontradas e tem um botão para ler de novo. O WhatsApp pode demorar mais para se atualizar.

3. 3

   Slack, Discord, iMessage e outros

   A maioria não tem ferramenta pública de atualização. Renomeie o arquivo da imagem, por exemplo autumn-v2.png, e atualize a tag, para que o rastreador veja um endereço novo.

4. 4

   Casos teimosos

   Compartilhe a página com um parâmetro inofensivo, como ?v=2. As plataformas tratam como um link novo e buscam do zero.

Como criar uma imagem que aparece bem em qualquer lugar

Quando as tags funcionam, é a imagem que decide se alguém vai tocar. Faça em 1200×630, um quadro largo de cerca de 1,91 para 1, que todas as grandes plataformas aceitam. Alguns apps mostram menor ou cortam um pouco as laterais, e alguns recorrem a um quadrado, então mantenha o texto no centro. A história completa dos tamanhos está em tamanho de imagem OG.

Uma prévia é minúscula numa conversa, então valem as regras do texto de miniaturas: poucas palavras grandes, contraste forte, uma ideia. No Gradiently, o Mark de um design mantém a região mais calma atrás do texto e escolhe letra clara ou escura por linha, então o título continua legível, não importa como a plataforma escale o cartão. Comece pelo tamanho Prévia de link no Studio e o mesmo design pode virar seu banner de blog 1200×600 e o resto dos seus tamanhos de imagem para redes sociais.

Um teste de dois minutos antes de compartilhar

1. Veja o código-fonte da página e confirme que og:image está lá com uma URL https completa.
2. Abra a URL dessa imagem numa janela anônima. Se ela não carrega ali, os rastreadores também não conseguem carregar.
3. Passe a URL pelo Post Inspector do LinkedIn ou pelo depurador da Meta para ver as tags lidas.
4. Envie o link para você mesmo no WhatsApp ou no Slack e olhe no celular.
5. Se algo estiver desatualizado, mude o nome do arquivo da imagem e teste de novo.

Faça isso uma vez para cada modelo do seu site, não para cada página, e prévias quebradas deixam de ser surpresa. Se você está construindo um site do zero, o guia de fundo de hero para sites trata da imagem principal de que essas prévias costumam se servir.