# Prévia de link: por que seus links ficam quebrados e como corrigir [Canonical HTML page](https://gradiently.design/pt-br/guide/link-preview-image) Você cola o link numa conversa e aparece uma caixa cinza, a imagem errada ou um logo cortado ao meio. Quase toda prévia quebrada vem de uma de oito causas, e todas se resolvem em minutos. ## The short version - A imagem de prévia de um link é a figura que uma plataforma mostra quando alguém compartilha um endereço, e vem da tag og:image da página. - Os motivos mais comuns para a imagem de prévia sumir são a falta da tag og:image, um endereço de imagem relativo, uma imagem que o rastreador não alcança e tags adicionadas por JavaScript depois que a página carrega. - As plataformas guardam as prévias em cache, então, depois de corrigir uma página, muitas vezes é preciso uma ferramenta de depuração ou um endereço novo para a imagem nova aparecer. - Uma imagem de 1200×630 com o texto mantido no centro aparece bem em quase todas as plataformas. - Testar o link numa mensagem privada para você mesmo é a forma mais rápida de ver o que as outras pessoas vão ver. 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. | O que você vê | Causa provável | Solução | | --- | --- | --- | | Nenhuma imagem | Sem tag `og:image` na página | Adicione a tag ao `head` da página | | Sem imagem, mas a tag existe | URL relativa, como `/share.png` | Use o endereço completo, começando com `https://` | | Sem imagem só em alguns apps | Tags inseridas por JavaScript | Gere as tags no servidor, na primeira resposta HTML | | Sem imagem, mas a URL está certa | Imagem atrás de login, firewall ou regra do `robots.txt` | Deixe a imagem acessível publicamente | | Imagem antiga depois de uma mudança | A plataforma guardou em cache a primeira busca | Faça uma nova leitura com um depurador ou mude a URL da imagem | | Um quadradinho em vez de um cartão grande | Imagem pequena demais, ou sem a tag de cartão grande para o X | Use 1200×630 e adicione `twitter:card` definido como `summary_large_image` | | Imagem cortada nas laterais | Texto colocado perto das bordas | Mantenha o texto no centro do quadro | | Imagem carrega devagar ou dá timeout | O arquivo tem vários megabytes | Comprima; algumas centenas de kilobytes bastam | Siga a lista de cima para baixo. Quando a prévia está em branco, a resposta quase sempre está nas quatro primeiras linhas. ## 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. ```html Autumn menu | Hearth Bakery ``` Um conjunto completo. Repare na URL https absoluta da imagem; um caminho como /share/autumn.png é um erro muito comum. > **Veja o código-fonte, não a página** Os rastreadores leem o HTML bruto que seu servidor envia, e a maioria nunca executa JavaScript. Abra a página, escolha Exibir código-fonte da página e procure por `og:image`. Se não estiver nesse código, nenhum app de conversa vai encontrar, por mais certo que pareça no inspetor do navegador. É 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](https://gradiently.design/pt-br/guide/dynamic-og-images). ## 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. **LinkedIn** Cole a URL no [Post Inspector do LinkedIn](https://www.linkedin.com/post-inspector/). Ele busca a página de novo e mostra exatamente o que o LinkedIn vê. 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. **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. **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](https://gradiently.design/pt-br/guide/open-graph-image-size). - Open Graph 1200×630: 1200 × 630 - Link do LinkedIn 1200×627: 1200 × 627 - Alternativa quadrada 1200×1200: 1200 × 1200 O cartão 1200×630, a imagem de link quase idêntica do LinkedIn e o quadrado em que alguns apps cortam. Texto centralizado sobrevive aos três. Uma imagem de prévia de link em que o título fica sobre uma área clara do degradê e é difícil de ler O texto corre justo sobre a parte mais clara do fundo e desaparece no tamanho de miniatura. A mesma imagem de prévia de link com uma área mais escura e calma do degradê atrás do título O mesmo cartão com uma área calma e de alto contraste atrás do texto. Legível até numa conversa lotada. ### Evite - Seu logo sozinho sobre branco - Uma captura de tela da própria página - Frases longas em letras pequenas - Texto encostando nas bordas - A mesma imagem para todas as páginas ### Faça - Um título curto que combina com a página - Um fundo que as pessoas reconhecem como seu - Texto grande o bastante para ler com 300 pixels de largura - Uma margem clara em volta - Uma imagem por página importante Uma prévia é minúscula numa conversa, então valem as regras do [texto de miniaturas](https://gradiently.design/pt-br/guide/typography-for-thumbnails): 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](https://gradiently.design/pt-br/guide/social-media-image-sizes). ## 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](https://gradiently.design/pt-br/guide/website-hero-background) trata da imagem principal de que essas prévias costumam se servir. ## FAQ ### Por que a imagem de prévia do meu link não aparece? Em geral, a página não tem a tag og:image, a tag usa uma URL relativa, a imagem está bloqueada para rastreadores ou as tags são adicionadas por JavaScript. Confira primeiro o código-fonte bruto da página. ### Como atualizo uma prévia de link que mostra uma imagem antiga? As plataformas guardam as prévias em cache. Peça uma nova leitura da URL com o Post Inspector do LinkedIn ou o Sharing Debugger da Meta, ou renomeie o arquivo da imagem para que a URL mude. ### Qual deve ser o tamanho da imagem de prévia de link? 1200×630 pixels. Mantenha o texto no centro, porque alguns apps cortam as laterais ou mostram o cartão como um quadrado. ### Por que o X mostra uma miniatura pequena em vez de uma imagem grande? Adicione uma meta tag `twitter:card` definida como `summary_large_image` e confirme que a imagem é grande o bastante, de preferência 1200×630. ### Prévias de link funcionam com apps de página única? Só se as tags Open Graph estiverem no HTML que o servidor envia. A maioria dos rastreadores não executa JavaScript, então tags adicionadas no navegador ficam invisíveis para eles.