Quando você compartilha um link no WhatsApp, o aplicativo busca sua página, lê algumas tags meta do HTML e monta um cartão de prévia com título, descrição e imagem antes mesmo de o destinatário tocar no link. Se essas tags estiverem erradas, a prévia desaparece silenciosamente. Este guia explica exatamente quais tags Open Graph o WhatsApp lê, por que og:image precisa usar uma URL absoluta, quais dimensões de imagem realmente funcionam e como testar e corrigir prévias antes de enviar.
Como o WhatsApp lê as prévias de link
Toda vez que alguém cola uma URL em uma conversa do WhatsApp, o rastreador interno do aplicativo, às vezes chamado de WhatsApp Link Preview Bot, faz uma requisição HTTP GET para essa URL. Ele analisa a resposta HTML procurando tags <meta property="og:..."> dentro do <head>. Se encontrar as tags corretas, monta um cartão de prévia. Se não encontrar, o link aparece como texto simples, sem nenhum contexto visual.
O WhatsApp não é o único rastreador que funciona assim: Facebook, LinkedIn, Slack, Telegram, iMessage e Twitter/X seguem o mesmo protocolo Open Graph desenvolvido pelo Facebook em 2010. A especificação fica em ogp.me e define um conjunto de tags <meta> que qualquer site pode adicionar para controlar como suas páginas aparecem quando compartilhadas em redes sociais.
Quando o rastreamento acontece?
O WhatsApp rastreia uma URL quando você a cola pela primeira vez em uma conversa e a prévia carrega. O resultado é armazenado em cache de forma agressiva: o WhatsApp servirá o mesmo cartão de prévia por dias ou até semanas após a primeira busca. É por isso que atualizar suas tags OG no servidor não corrige imediatamente uma prévia quebrada; a versão em cache continua aparecendo. Mais sobre quebra de cache em uma seção adiante.
Observação
Prévias em grupos versus mensagens diretas
O WhatsApp gera prévias tanto em mensagens diretas quanto em conversas de grupo. O comportamento é idêntico: as mesmas tags OG são usadas nos dois contextos. No entanto, existe uma nuance: se o remetente desativou as prévias de link nas configurações do WhatsApp (Configurações → Conversas → Gerar prévias de link), as prévias não aparecerão, não importa quão bem configuradas estejam suas tags. Isso é uma configuração do cliente, não um problema do servidor.
Requisito de URL absoluta em og:image
Esta é a causa mais comum de prévias quebradas no WhatsApp: um caminho relativo na tag og:image. A especificação do protocolo Open Graph é inequívoca sobre isso: og:image precisa ser uma URL absoluta completa. Não um caminho relativo à raiz, não uma URL relativa ao protocolo, não um fragmento de caminho. Uma URL completa com esquema, domínio e caminho.
| Formato | Exemplo | Funciona no WhatsApp? |
|---|---|---|
| ✓ URL absoluta (correta) | https://seudominio.com/images/share.jpg | ✓ Sim |
| ✗ Caminho relativo à raiz | /images/share.jpg | ✗ Não: falha silenciosamente |
| ✗ URL relativa ao protocolo | //seudominio.com/images/share.jpg | ✗ Pouco confiável |
| ✗ Caminho relativo | images/share.jpg | ✗ Não |
| ✗ URI de dados | data:image/jpeg;base64,... | ✗ Não |
Propriedades estruturadas podem ser especificadas colocando dois-pontos após o nome da propriedade e usando outra tag og:image com uma URL absoluta.
Por que caminhos relativos falham silenciosamente
Quando o rastreador do WhatsApp busca sua página, ele analisa o HTML de forma isolada: não "conhece" sua URL base como um navegador conhece. Um caminho relativo como /images/share.jpg não tem contexto, então o rastreador ou o ignora ou tenta resolvê-lo em relação a uma URL base que talvez não tenha inferido corretamente. O resultado é uma imagem ausente sem nenhuma mensagem de erro: a prévia aparece sem imagem ou não aparece de forma alguma.
Use sempre a URL absoluta completa, incluindo https://. Se o seu site suporta HTTP e HTTPS, use sempre https://: muitos rastreadores sociais se recusam a carregar imagens que não sejam HTTPS nas prévias por motivos de segurança.
Aviso
CDN e servidores de imagem de terceiros
Se suas imagens são servidas por uma CDN ou um servidor de terceiros (como Cloudinary, Imgix ou um bucket de armazenamento em nuvem), o requisito de URL absoluta continua valendo: basta usar a URL completa da CDN. A única consideração adicional são os cabeçalhos CORS: garanta que sua CDN permita requisições de origem cruzada, pois alguns rastreadores verificam isso. Verifique também se a URL da CDN não tem tokens de autenticação que expiram: uma URL assinada com validade limitada quebrará as prévias de quem clicar no link depois que o token expirar.
Otimizador de texto de prévia do Open Graph
Verifique se os comprimentos do seu og:title e og:description estão otimizados ao mesmo tempo para WhatsApp, Facebook, LinkedIn e Twitter.
Regras de tamanho e formato de og:image
Acertar a URL da imagem é apenas metade da batalha. O WhatsApp também tem requisitos de tamanho e formato que determinam se a imagem será exibida em destaque ou totalmente ignorada.
Dimensões recomendadas
A especificação Open Graph recomenda 1200×630 pixels com proporção de 1,91:1. Este é o alvo que renderiza bem ao mesmo tempo no WhatsApp, Facebook, LinkedIn e Slack, então não há motivo para não usá-lo como padrão.
| Plataforma | Tamanho mínimo | Tamanho recomendado | Proporção |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 ou 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
O WhatsApp exibirá imagens até cerca de 300×200 pixels, mas qualquer coisa menor tende a ser renderizada como uma miniatura minúscula em vez de uma imagem em destaque, e imagens muito pequenas podem ser totalmente omitidas. Imagens abaixo do limite mínimo ou com proporções extremas (imagens verticais muito altas, por exemplo) às vezes são rejeitadas.
Formatos de arquivo suportados
- JPEG (.jpg, .jpeg): melhor escolha para fotografias e imagens com gradientes. Amplamente suportado por todos os rastreadores sociais.
- PNG (.png): melhor escolha para gráficos, logotipos e imagens com transparência. Também é universalmente suportado.
- WebP: suporte irregular entre rastreadores. Evite usar WebP em og:image mesmo que seu site use imagens WebP no resto.
- GIF: amplamente suportado, mas apenas o primeiro quadro é exibido (sem animação). Raramente é ideal para imagens de prévia.
- SVG: não é suportado pela maioria dos rastreadores sociais, incluindo o WhatsApp. Use um PNG ou JPEG rasterizado em vez disso.
Considerações sobre o tamanho do arquivo
Mantenha seu arquivo og:image abaixo de 300 KB. O rastreador do WhatsApp roda nos servidores da Meta e é otimizado para velocidade: imagens muito grandes demoram mais para serem buscadas e aumentam a chance de timeout, resultando em uma prévia sem imagem. Um JPEG bem otimizado em 1200×630 px deve ficar tranquilamente abaixo de 200 KB.
Dica
Motivos comuns de falha nas prévias
Mesmo com tags OG corretas, as prévias de link do WhatsApp às vezes não são renderizadas. Estas são as causas mais frequentes.
URL relativa em og:image
Já abordamos isso acima, mas vale repetir porque é o erro mais comum. Use sempre https://seudominio.com/caminho/para/imagem.jpg, nunca /caminho/para/imagem.jpg. Use o Validador de tags OG para detectar isso antes de compartilhar.
Tags OG geradas por JavaScript (fora do HTML renderizado no servidor)
O rastreador do WhatsApp não executa JavaScript. Se suas tags meta forem injetadas por um framework de cliente depois que a página carrega (algo comum em aplicações de página única construídas com React, Vue ou Angular sem renderização no servidor), o rastreador verá um <head> vazio e não gerará nenhuma prévia. As tags OG precisam estar na resposta HTML inicial do servidor. Use renderização no servidor (SSR) ou geração de site estático (SSG) para garantir que as tags estejam no HTML bruto.
O servidor bloqueia o rastreador do WhatsApp
Ferramentas de segurança como o Bot Fight Mode do Cloudflare, regras de WAF personalizadas ou configurações agressivas de robots.txt às vezes bloqueiam o rastreador do WhatsApp. Verifique seu robots.txt para garantir que ele não bloqueia todos os rastreadores com `User-agent: * Disallow: /`. Confira também os logs de segurança do servidor ao testar: você pode encontrar o rastreador bloqueado com um status 403 ou 429.
og:image retorna um status diferente de 200
Se a URL da imagem retornar 404, 403, um redirecionamento 301 ou qualquer resposta diferente de 200, o WhatsApp descarta a imagem da prévia silenciosamente. Verifique se a URL da sua imagem é diretamente acessível (sem redirecionamentos e sem autenticação) abrindo-a em uma janela anônima e conferindo o status. Use o Inspetor de cabeçalhos HTTP para verificar os cabeçalhos de resposta de qualquer URL de imagem.
og:image hospedada em HTTP (não HTTPS)
Rastreadores sociais geralmente exigem HTTPS por segurança. Uma imagem servida por HTTP simples costuma ser ignorada mesmo que o restante da sua página esteja em HTTPS. Garanta sempre que a URL do seu og:image comece com https://.
og:image excede o limite de tamanho ou tem formato inválido
Imagens muito grandes (acima de 5 MB) ou formatos não suportados (SVG e WebP em alguns rastreadores) são ignorados silenciosamente. Prefira JPEG ou PNG abaixo de 300 KB em 1200×630 px.
Aviso
Quebrar o cache das prévias do WhatsApp
O WhatsApp armazena as prévias de link em cache por URL. Depois que uma URL foi rastreada, a mesma prévia é servida a todos os destinatários que recebem aquele link, independentemente de você ter atualizado as tags OG desde então. O tempo de vida do cache não é documentado publicamente, mas na prática pode durar de vários dias a uma semana.
O método da query string
A solução mais confiável é acrescentar uma query string à URL quando você a compartilha. O WhatsApp trata https://seudominio.com/pagina?v=2 como uma URL distinta de https://seudominio.com/pagina, então rastreará a página do zero e gerará uma nova prévia. A query string pode ser qualquer coisa (?v=2, ?ref=wa, ?share=1), desde que seja diferente da que foi compartilhada antes.
Dica
Usar o Sharing Debugger do Facebook para preparar o cache
O Sharing Debugger do Facebook (developers.facebook.com/tools/debug) é uma ferramenta que valida suas tags OG e força um novo rastreamento da sua URL na infraestrutura da Meta. Como WhatsApp e Facebook compartilham a mesma infraestrutura Open Graph na Meta, rastrear pelo Sharing Debugger às vezes pode preparar (ou limpar) o cache de prévias do WhatsApp para a mesma URL. Vale a pena executá-lo após qualquer alteração de tag, junto com o método da query string.
Resumo: fluxo de quebra de cache
- Atualize suas tags OG no servidor e verifique se a resposta HTML bruta contém os novos valores.
- Passe sua URL pelo Validador de tags OG para confirmar que as tags estão corretas.
- Envie a URL para o Sharing Debugger do Facebook para forçar um novo rastreamento.
- Ao compartilhar no WhatsApp, acrescente uma nova query string (por exemplo, ?v=2) para garantir um rastreamento do zero.
Padrões avançados de tags OG
Depois que o básico funciona, alguns padrões avançados dão mais controle sobre como seu conteúdo aparece no WhatsApp e em outras plataformas sociais.
Várias tags og:image
A especificação Open Graph permite várias tags og:image em uma mesma página. Cada tag de imagem adicional é tratada como alternativa: os rastreadores geralmente usam a primeira imagem válida que encontram. Isso é útil para oferecer um fallback:
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />Usar og:image separadamente de twitter:image
O Twitter/X lê twitter:image primeiro e só recorre a og:image se não houver tags de Twitter Card presentes. Isso significa que você pode especificar uma imagem diferente para o Twitter sem afetar o WhatsApp. O tamanho de imagem recomendado pelo Twitter para um cartão summary_large_image é 1200×628 px (proporção 2:1) em vez de 1200×630 px. A diferença é pequena, mas se você quer renderização perfeita em pixels nas duas plataformas, especifique as duas:
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Imagens OG dinâmicas
Muitos sites modernos geram imagens OG dinamicamente (para posts de blog, páginas de produto ou perfis de usuário) usando serviços ou renderização no servidor. Se você gera imagens por código, lembre-se de que a URL ainda precisa ser absoluta e acessível publicamente. URLs de imagens OG dinâmicas costumam se parecer com: https://seudominio.com/api/og?title=Meu+Titulo+De+Post; isso é perfeitamente válido desde que o endpoint retorne uma imagem real com o cabeçalho Content-Type correto (image/jpeg ou image/png), e não uma página HTML.
Validar dados estruturados junto com as tags OG
As tags Open Graph funcionam junto com (não no lugar de) os dados estruturados JSON-LD. Para artigos, produtos e negócios locais, os dados estruturados habilitam os rich results do Google, enquanto as tags OG cuidam das prévias de compartilhamento social. Os dois sistemas são complementares: você precisa dos dois. Use o Validador de dados estruturados para checar seu schema JSON-LD enquanto o Validador de tags OG cuida da sua implementação do Open Graph. O Gerador de tags meta pode produzir uma seção <head> completa com tags OG e de Twitter Card em uma só saída.
Seção head completa recomendada
Para referência, veja uma seção <head> completa e pronta para produção, cobrindo Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card e tags meta de SEO padrão:
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Gerador de tags meta
Gere um conjunto completo de tags meta de Open Graph, Twitter Card e SEO de uma só vez, sem precisar escrever nada à mão.
Principais conclusões
- O WhatsApp lê quatro tags Open Graph para montar uma prévia de link: og:title, og:description, og:image e og:url.
- og:image precisa ser uma URL HTTPS absoluta completa: caminhos relativos falham silenciosamente no WhatsApp e em todos os outros rastreadores sociais.
- Use um JPEG ou PNG de 1200×630 px abaixo de 300 KB como og:image para o melhor resultado multiplataforma.
- Inclua as tags og:image:width e og:image:height para que os rastreadores possam montar a prévia antes de a imagem carregar.
- As tags OG precisam estar no HTML renderizado pelo servidor: tags meta injetadas por JavaScript não são lidas pelo WhatsApp.
- O WhatsApp armazena prévias em cache por URL durante dias. Acrescente uma query string (?v=2) ao compartilhar um link atualizado.
- Use o Validador de tags OG para checar todas as tags antes de compartilhar e o Sharing Debugger do Facebook para forçar um novo rastreamento após mudanças.