# Pré-visualização de links: porque aparece estragada e como corrigir [Canonical HTML page](https://gradiently.design/pt-pt/guide/link-preview-image) Colas o teu link numa conversa e aparece uma caixa cinzenta, a imagem errada ou um logótipo cortado ao meio. Quase todas as pré-visualizações estragadas vêm de uma de oito causas, e todas se corrigem em minutos. ## The short version - A imagem de pré-visualização de um link é a imagem que uma plataforma mostra quando alguém partilha um URL, e vem da tag og:image da página. - As razões mais comuns para faltar a imagem de pré-visualização são não haver tag og:image, o URL da imagem ser relativo, o crawler não conseguir aceder à imagem e as tags serem adicionadas por JavaScript depois de a página carregar. - As plataformas guardam as pré-visualizações em cache, por isso, depois de corrigires a página, muitas vezes precisas de uma ferramenta de depuração ou de um URL alterado para a nova imagem aparecer. - Uma imagem de 1200×630 com as palavras no centro tem boa pré-visualização em quase todas as plataformas. - Testar o link numa mensagem privada para ti próprio é a forma mais rápida de ver o que os outros vão ver. 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. | O que vês | Causa provável | Solução | | --- | --- | --- | | Nenhuma imagem | Não há tag `og:image` na página | Adiciona a tag ao `head` da página | | Sem imagem, mas a tag existe | URL relativo, como `/share.png` | Usa o endereço completo, começado por `https://` | | Sem imagem só em algumas apps | Tags inseridas por JavaScript | Gera as tags no servidor, na primeira resposta HTML | | Sem imagem, com URL correto | Imagem atrás de um login, firewall ou regra do `robots.txt` | Torna a imagem acessível ao público | | Imagem antiga depois de uma alteração | A plataforma guardou em cache a primeira leitura | Faz nova leitura com um depurador ou muda o URL da imagem | | Quadrado pequeno em vez de cartão grande | Imagem demasiado pequena, ou sem tag de cartão grande para o X | Usa 1200×630 e adiciona `twitter:card` com `summary_large_image` | | Imagem cortada nos lados | Palavras junto às margens | Mantém o texto no centro da imagem | | A imagem carrega devagar ou expira | O ficheiro tem vários megabytes | Comprime-o; umas centenas de kilobytes chegam bem | Percorre a lista de cima para baixo. Quando a pré-visualização está em branco, a resposta está quase sempre nas primeiras quatro linhas. ## 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. ```html Autumn menu | Hearth Bakery ``` Um conjunto completo. Repara no URL absoluto https da imagem; um caminho como /share/autumn.png é um erro muito comum. > **Vê o código-fonte, não a página** Os crawlers leem o HTML em bruto que o teu servidor envia e a maioria nunca executa JavaScript. Abre a página, escolhe Ver código-fonte da página e procura `og:image`. Se não estiver nesse código, nenhuma app de conversas a vai encontrar, por mais correta que pareça no inspetor do navegador. 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](https://gradiently.design/pt-pt/guide/dynamic-og-images). ## 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. **LinkedIn** Cola o URL no [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/). Vai buscar a página outra vez e mostra exatamente o que o LinkedIn vê. 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. **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. **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](https://gradiently.design/pt-pt/guide/open-graph-image-size). - Open Graph 1200×630: 1200 × 630 - Link do LinkedIn 1200×627: 1200 × 627 - Quadrado de recurso 1200×1200: 1200 × 1200 O cartão 1200×630, a imagem de link quase idêntica do LinkedIn e o quadrado para onde algumas apps cortam. Palavras centradas sobrevivem aos três. Uma imagem de pré-visualização de link em que o título fica sobre uma zona clara do gradiente e é difícil de ler As palavras atravessam a parte mais clara do fundo e desaparecem no tamanho de miniatura. A mesma imagem de pré-visualização de link com uma zona mais escura e calma do gradiente atrás do título O mesmo cartão com uma zona calma e de alto contraste atrás das palavras. Legível mesmo numa conversa cheia. ### Evita - O teu logótipo sozinho sobre branco - Uma captura de ecrã da própria página - Frases compridas em letra pequena - Texto a tocar nas margens - A mesma imagem em todas as páginas ### Faz - Um título curto que corresponda à página - Um fundo que as pessoas reconheçam como teu - Letra grande o bastante para ler com 300 píxeis de largura - Uma margem clara em redor - Uma imagem por cada página importante Uma pré-visualização é minúscula numa conversa, por isso aplicam-se as regras de [texto em miniaturas](https://gradiently.design/pt-pt/guide/typography-for-thumbnails): 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](https://gradiently.design/pt-pt/guide/social-media-image-sizes). ## 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](https://gradiently.design/pt-pt/guide/website-hero-background) trata da imagem principal de onde essas pré-visualizações costumam partir. ## FAQ ### Porque não aparece a imagem de pré-visualização do meu link? Normalmente a página não tem tag og:image, a tag usa um URL relativo, a imagem está bloqueada para crawlers ou as tags são adicionadas por JavaScript. Verifica primeiro o código-fonte em bruto da página. ### Como atualizo uma pré-visualização de link que mostra uma imagem antiga? As plataformas guardam as pré-visualizações em cache. Pede uma nova leitura do URL com o LinkedIn Post Inspector ou o Sharing Debugger da Meta, ou muda o nome do ficheiro da imagem para o URL mudar. ### Que tamanho deve ter a imagem de pré-visualização de um link? 1200×630 píxeis. Mantém as palavras no centro, porque algumas apps cortam os lados ou mostram o cartão como um quadrado. ### Porque mostra o X uma miniatura pequena em vez de uma imagem grande? Adiciona uma meta tag `twitter:card` com o valor `summary_large_image` e garante que a imagem é grande o bastante, de preferência 1200×630. ### As pré-visualizações de links funcionam com aplicações de página única? Só se as tags Open Graph estiverem no HTML que o servidor envia. A maioria dos crawlers não executa JavaScript, por isso as tags adicionadas no navegador ficam invisíveis para eles.