A pré-visualização de link do WhatsApp não aparece? Corrija o og:image

Uma pré-visualização de link do WhatsApp que não aparece quase sempre se deve a uma de cinco causas: a página não tem uma tag og:image, o URL da imagem não é publicamente acessível, a imagem tem o formato errado e o WhatsApp a corta, o corte está correto mas a pré-visualização está desatualizada, ou o plugin de SEO da loja está a imprimir uma tag concorrente. Este guia aborda cada causa, porque não pode forçar o WhatsApp a atualizar, e o que alterar numa loja WooCommerce.

Resposta curta

O WhatsApp constrói a pré-visualização do link a partir das tags Open Graph da página. Se og:image estiver em falta, inacessível ou não tiver o formato de um cartão 1200×630, a partilha chega como um link simples, um bloco cinzento ou uma foto de produto mal cortada. A maioria das lojas WooCommerce nunca define um og:image para as páginas de produto — o plugin de SEO recorre à imagem destacada estática, e uma foto de produto quadrada ou alta fica com os lados ou o topo cortados.

1. Não existe nenhuma tag og:image na página

Esta é a causa mais comum numa loja. O WordPress e o WooCommerce não emitem uma og:image para páginas de produto, categoria ou loja por predefinição, e um tema que não trate do Open Graph deixará a tag completamente ausente.

Correção: veja o código-fonte da página e confirme que uma tag og:image está presente, é absoluta (um URL https://… completo, nunca um caminho relativo) e é renderizada no servidor — não injetada por JavaScript após o carregamento. O WhatsApp não executa o seu JavaScript.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Um resultado vazio é a sua resposta: o WhatsApp não tem nenhuma imagem para mostrar.

2. O URL da imagem não é publicamente acessível

O crawler do WhatsApp obtém a imagem da mesma forma que qualquer cliente anónimo. Um URL protegido por login, em localhost, num endereço IP puro, ou num caminho bloqueado por robots.txt irá falhar.

Correção: confirme que o URL devolve uma imagem sem exigir credenciais.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Pretende 200 OK e um Content-Type de image/png ou image/jpeg.

A armadilha do robots.txt. Os crawlers de redes sociais respeitam robots.txt, pelo que uma regra que bloqueie o caminho que aloja as suas imagens quebra a pré-visualização — e quebra-a de uma forma fácil de diagnosticar erradamente. O depurador da Meta reporta então "could not be processed as an image. It may be corrupted or may have an invalid format", o que parece exatamente um render corrompido. curl nunca reproduz este problema, porque curl ignora robots.txt. Se as suas imagens forem servidas a partir de um caminho coberto por uma regra de Disallow:, a pré-visualização irá falhar independentemente de o ficheiro ser válido. Encontrámos este problema no próprio caminho de render do FastOG e resolvemo-lo com uma sobreposição de Allow: de correspondência mais longa.

3. O WhatsApp corta a imagem do seu produto — e editar a foto não vai resolver

Este é o sintoma que os comerciantes descrevem como "as minhas imagens de produto aparecem cortadas no WhatsApp", e é o que vale a pena compreender devidamente.

A plataforma corta qualquer imagem que receba para um enquadramento de 1200×630. Uma foto de produto quadrada ou alta fica com os lados ou o topo cortados; um bloco de logótipo fica esticado. Cortar manualmente a foto original no Photoshop é uma batalha perdida, porque o WhatsApp decide o corte com base na proporção do cartão, e não na composição que escolheu — e a próxima foto de produto tem novamente uma forma diferente.

A solução é alterar a imagem que serve, não a foto que possui. Envie um cartão já composto a 1200×630, com a foto do produto ajustada dentro dele. Assim, a plataforma não tem mais nada para cortar.

4. O tamanho certo da imagem de pré-visualização de links no WhatsApp

O tamanho padrão das imagens Open Graph é 1200×630 píxeis — uma proporção de 1.91:1 — e é o formato que todas as grandes plataformas, incluindo o WhatsApp, esperam. Se servir 1200×630, a pré-visualização é renderizada como pretendido; se servir um quadrado de 1000×1000, o WhatsApp vai recortar a imagem para preencher o enquadramento.

Mantenha o ficheiro abaixo dos 5 MB. Um cartão de texto-e-produto de 1200×630 normalmente fica entre 200 KB e 500 KB em PNG.

Consulte Tamanho da Imagem OG: 1200×630 Explicado para perceber por que razão essa proporção se tornou o padrão.

5. A pré-visualização está desatualizada — e não é possível forçar o WhatsApp a atualizá-la

Se a etiqueta, o URL e a estrutura estiverem corretos e a pré-visualização continuar errada, está a olhar para uma cache.

O WhatsApp coloca a pré-visualização em cache. Esta fica guardada na aplicação do destinatário, o que significa que nenhuma ferramenta pode pedir ao WhatsApp para a atualizar — nem um depurador, nem uma API, nem nós. O WhatsApp não expõe qualquer atualização programática, por isso não há botão para carregar. Quem afirmar o contrário está a descrever o comportamento do Facebook, não o do WhatsApp.

O que pode fazer é garantir que a imagem correta está à espera da próxima vez que o WhatsApp ler a página. É por isso que os URLs de capa da FastOG são endereçados por conteúdo: altere o título, o preço ou a imagem do produto e o URL muda com eles, para que a próxima leitura não possa apanhar o cartão antigo. Quando essa leitura acontece, depende do WhatsApp.

Duas plataformas relacionadas comportam-se da mesma forma — o LinkedIn e o X também não expõem uma API de invalidação e normalmente relêem no prazo de cerca de uma semana. Os seus próprios inspetores podem ajudar a acelerar o processo se tiver pressa:

Usar o depurador do Facebook para um problema do WhatsApp. Ainda assim, vale a pena colar o URL no Sharing Debugger, mesmo que não consiga atualizar o WhatsApp, porque ele obtém a página da mesma forma que o WhatsApp fará e reporta o que realmente encontrou — etiquetas em falta, imagens inacessíveis, formatos inválidos. Trate-o como um validador das etiquetas, não como uma correção para a cache do WhatsApp.

6. Como corrigir isto numa loja WooCommerce

No WooCommerce, vale a pena explicar o fluxo de trabalho com precisão, porque o modo de falha costuma ser o plugin de SEO, não o tema:

• A tag não existe por predefinição. O WooCommerce não inclui nenhuma og:image para product, product_cat ou para a página da loja.
• O seu plugin de SEO preenche essa lacuna mal. O Yoast, Rank Math, All in One SEO e SEOPress imprimem uma og:image — mas, para um produto, recorrem à imagem destacada estática. Essa é uma foto quadrada ou vertical, que é exatamente a imagem que o WhatsApp depois corta.
• Atenção a tags duplicadas. Se dois plugins imprimirem ambos a og:image, a plataforma escolhe uma, e pode não ser a que espera. Veja o código-fonte e conte quantas tags og:image a página emite.

O FastOG para WooCommerce segue um caminho diferente: gera um cartão de 1200×630 a partir de dados de catálogo em tempo real (título, preço, selo de promoção, classificação, fotografias do produto) no seu próprio serviço de renderização e, em seguida, entrega essa capa ao plugin de SEO que já utiliza, em vez de imprimir uma tag concorrente. Assim, mantém apenas uma og:image na página, e esta é um cartão composto para o formato 1.91:1, em vez de uma fotografia de produto em bruto.

Como as capas são geradas a partir de dados de catálogo em tempo real, o preço no cartão corresponde ao preço na página, e um produto com desconto recebe um selo de promoção. Quando guarda um produto, o plugin também pede ao Facebook para reler a página — o Facebook é a única plataforma que oferece uma atualização programática. O WhatsApp, LinkedIn e X seguem o seu próprio calendário, e o plugin afirma isso claramente, em vez de prometer uma atualização que não pode garantir.

• Instalação: FastOG para WooCommerce no WordPress.org
• Detalhes e FAQ: Página de integração com WooCommerce

Verifique o que o WhatsApp verá realmente

Antes de alterar qualquer coisa, observe a página da mesma forma que um crawler o faz. Cole o URL de qualquer produto em Veja os Seus Links Como os Compradores Veem — a ferramenta obtém a página, lê as suas etiquetas Open Graph atuais e mostra a pré-visualização resultante tal como o WhatsApp, o X e o Messenger a apresentam, ao lado de uma capa FastOG construída a partir dos mesmos dados do produto. Não é necessário registo.

Prefere inspecionar as etiquetas em bruto? Utilize o Gerador de Etiquetas Meta Open Graph para ver o markup, ou consulte a referência em A imagem og:image não aparece? Como corrigir.

FAQ

Porque é que a imagem do meu produto aparece cortada no WhatsApp?

O WhatsApp corta qualquer imagem que recebe para um formato de 1200×630. Uma foto de produto quadrada ou vertical perde os lados ou o topo. Se servir um cartão já composto em 1200×630 — com a foto do produto ajustada dentro do cartão — a plataforma não tem nada para cortar.

Posso forçar o WhatsApp a atualizar a pré-visualização de um link?

Não. O WhatsApp não expõe nenhuma API de atualização nem ferramenta de depuração, e a pré-visualização em cache vive na aplicação do destinatário. Só pode garantir que a imagem correta está disponível para a próxima leitura. O Facebook é a exceção e oferece uma re-leitura programática.

Porque é que o Facebook Sharing Debugger mostra a minha imagem, mas o WhatsApp não mostra nada?

Porque são caches separadas, e o debugger está a reportar as tags da página, que ambas as plataformas leem. Se o debugger mostra uma imagem correta mas o WhatsApp não mostra nenhuma, as tags estão bem e está a ver uma cache do WhatsApp não atualizada. Se o debugger também não mostra nada, a tag está em falta ou a imagem está inacessível — verifique as causas 1 e 2.

O WhatsApp usa og:image ou twitter:image?

og:image. Defina as tags Open Graph. twitter:image é para o X.

Preciso de um plugin, ou posso simplesmente adicionar a tag eu próprio?

Pode adicionar uma tag og:image estática ao seu tema — funciona, e é muito melhor do que nada. O que não consegue fazer é produzir um cartão distinto por produto sem criar manualmente uma imagem por produto, e ficará desatualizada sempre que um preço mudar. É nesse ponto que uma capa dinâmica vale a pena.

O meu site não está no FastOG. Isto vai ajudar na mesma?

Sim — as cinco causas são comportamento da plataforma, não comportamento do FastOG. Verifique-as por ordem com curl, o código-fonte da página e o debugger.

Relacionados

• A imagem og:image não aparece? Como corrigir
• Atualização instantânea da imagem do WhatsApp para WooCommerce
• Sincronização de preços do WooCommerce na pré-visualização do WhatsApp
• Forçar uma atualização da cache do Open Graph do Facebook
• Tamanho da imagem OG: 1200×630 explicado
• Como colocar imagens OG em cache
• URLs de imagem OG assinadas
• Gerador de meta tags Open Graph