Open Graph WhatsApp: por que o link fica cinza

O link chega cinza no WhatsApp porque a página não tem as tags de Open Graph, ou tem e o robô não conseguiu ler a imagem. WhatsApp não inventa a prévia: ele lê quatro tags no código da sua página. Sem elas, sobra a URL crua. Com elas, aparece imagem, título e descrição.

Parece assunto de programador, e é por isso que fica anos sem conserto. Só que quem paga a conta é o vendedor. Ele manda a proposta às sete da noite, o cliente recebe um retângulo cinza com um endereço dentro, e a primeira impressão da sua empresa naquele dia foi essa. Ninguém perde venda por isso sozinho. Isso soma no lugar errado, todo dia.

O que acontece quando alguém cola o seu link

No instante em que a URL entra na caixa de mensagem, um robô sai do outro lado e visita a sua página. Ele não lê a página como uma pessoa lê. Ele procura umas linhas específicas dentro do código, no trecho de cabeçalho, e monta o cartão com o que achar.

É a mesma família de tags que o Facebook e o LinkedIn usam. Esse padrão se chama Open Graph, e é ele que virou a língua comum de prévia de link na internet. Quando o pessoal fala de Open Graph no WhatsApp, é disso que está falando: as mesmas quatro linhas, lidas pelo robô do aplicativo.

Três coisas podem dar errado nesse caminho, e cada uma tem um sintoma diferente:

• A página não tem as tags. Sintoma: retângulo cinza com a URL, sem nada mais. É o caso mais comum e o mais fácil de resolver.
• A página tem as tags e a imagem não carrega. Sintoma: aparece título e descrição, e a imagem fica em branco ou nem aparece. Aqui o problema é o arquivo de imagem, não a tag.
• Está tudo certo e continua vindo o antigo. Sintoma: a prévia mostra o título ou a imagem de três meses atrás. Isso é cache, e tem seção própria mais abaixo.

As quatro tags que resolvem a maioria dos casos

Você não precisa saber escrever isso. Precisa saber pedir, e precisa saber conferir se foi feito. São quatro:

• og:title é o título que aparece em negrito no cartão. Não é o mesmo campo do título de SEO, e em muito site os dois brigam.
• og:description é a linha de baixo. Curta, porque o aplicativo corta.
• og:image é o endereço da imagem. Endereço público, que qualquer robô consegue abrir sem senha.
• og:url é a versão canônica do endereço da própria página, pra prévia não se perder quando o link chega com parâmetro pendurado.

Duas armadilhas de gestor aqui. A primeira: página protegida por login não gera prévia, porque o robô não entra. A segunda: imagem hospedada num Drive com link restrito também não, pelo mesmo motivo. Se a imagem não abre numa aba anônima, ela não abre pro robô.

Os requisitos de imagem, com fonte

Aqui é onde a maioria dos textos sobre o assunto chuta número. A documentação da Meta pra imagem em compartilhamento de link (Meta for Developers) é explícita, então vou ficar nela:

• A dimensão mínima aceita é 200 por 200 pixels.
• O arquivo não pode passar de 8 MB.
• O recomendado é usar imagem de pelo menos 1200 por 630 pixels, pra ficar boa em tela de alta resolução. O mínimo prático pra sair no formato grande é 600 por 315.
• Abaixo de 600 por 315, a imagem ainda aparece, mas bem menor.
• A proporção deve ficar o mais perto possível de 1.91 pra 1, pra não cortar nada.
• Existe também um detalhe de servidor: o robô da Meta aceita só compressão gzip e deflate.

Traduzindo pro seu dia: peça uma imagem de 1200 por 630, leve, com o logo e o texto longe das bordas. Guarde essa medida, porque ela é a mesma da imagem de capa do seu blog e da sua landing. Um arquivo resolve os três lugares.

Uma observação de honestidade. Circula muito na internet um limite específico de peso de arquivo pro WhatsApp. Eu não achei esse número em documentação primária, então não vou repetir. A régua segura é a de cima, que está documentada, mais o bom senso de manter o arquivo leve.

Consertou e continua vindo o antigo: isso é cache

Esse é o ponto que faz o time achar que o conserto não funcionou, e quase sempre funcionou.

A Meta documenta que a prévia é guardada em cache, e que o cache é indexado pelo endereço da imagem. A consequência prática está escrita lá: se você trocar a imagem, use um endereço novo, senão ela não atualiza. Trocar o arquivo mantendo o mesmo nome é a receita pra continuar vendo a imagem velha por tempo indeterminado.

Tem um segundo efeito de cache, e esse é sorrateiro. A documentação diz que o robô precisa ter visto a imagem pelo menos uma vez pra conseguir renderizar, o que significa que a primeira pessoa que compartilha aquele link pode não ver a imagem. Se essa primeira pessoa for você testando a proposta, você conclui que está quebrado. Se for o seu cliente, pior.

A saída documentada tem duas formas. Rodar a URL no depurador de compartilhamento da Meta antes de o link circular, o que força o robô a buscar e guardar. Ou declarar as dimensões da imagem nas tags de largura e altura, pra ele conseguir montar o cartão na hora sem precisar baixar e processar depois.

Repare no padrão: nas três causas, o conserto é técnico e a decisão é sua. Isso vale pra quase tudo que a sua marca precisa entregar pra uma máquina, e é a tese do post sobre a marca que não existe pra IA.

Como testar antes de mandar pro cliente

Cinco minutos, e vale virar rotina antes de qualquer landing nova entrar no ar.

• Abra a imagem sozinha, em aba anônima. Se ela pedir login ou der erro, o robô também não vai conseguir. Esse teste sozinho pega metade dos casos.
• Rode a URL no depurador de compartilhamento da Meta. Ele mostra o que o robô está lendo, aponta erro e serve pra forçar a releitura depois do conserto.
• Mande o link pra você mesmo, num grupo de teste. Espere a prévia carregar antes de apertar enviar, porque o aplicativo busca a página enquanto você digita.
• Confira no celular, não só no computador. É onde o cliente vai abrir.

Guarde o print do antes e do depois. Serve pra fechar a discussão com quem cuida do site, e serve pra você lembrar que o problema existia.

Quem arruma isso, e por que não é o vendedor

Quem mexe é quem cuida do site. Em WordPress, os plugins de SEO já têm campo pra isso e o serviço é de minutos. Em site feito em plataforma, costuma ser uma tela de configuração. Em site próprio, é o desenvolvedor.

O que trava não é dificuldade, é o pedido nunca ter sido feito com clareza. Então faça assim: mande a lista das quatro tags, mande a medida de 1200 por 630, mande o link da documentação da Meta e peça o print do depurador como comprovação. Pedido com critério volta resolvido.

E tem um lado de escala nisso. Se a sua operação manda link pelo WhatsApp em volume, seja pelo time ou por automação, cada link é uma vitrine. Vale ler o que dá e o que não dá pra automatizar nesse canal no post sobre agente de IA no WhatsApp, e o desenho geral de onde a IA entra na operação está no guia de IA para vendas do gestor.

A conta do link cinza

Uma proposta de cinquenta mil reais chegando como retângulo cinza não derruba a venda. Ela só faz o cliente reparar, por meio segundo, que a sua empresa não cuida do detalhe. Depois disso ele te ouve com meio grau menos de confiança, e você nunca vai saber que aquilo pesou.

O comprador B2B compra a pessoa antes de comprar a solução. Cuidar da prévia do link é uma das coisas mais baratas que existem pra parecer o que você é. Uma hora de trabalho de quem cuida do site, e o conserto vale pra todo link que a sua empresa mandar de hoje em diante. Simbora resolver.

Perguntas frequentes

Por que meu link não mostra imagem no WhatsApp?

Por um de três motivos. A página não tem as tags de Open Graph, a imagem indicada na tag não está acessível publicamente, ou a prévia antiga está em cache. O primeiro teste é abrir a imagem sozinha numa aba anônima: se ela não abrir pra você, não abre pro robô.

Qual o tamanho ideal da imagem de Open Graph?

A Meta recomenda pelo menos 1200 por 630 pixels, com proporção próxima de 1.91 pra 1, dimensão mínima de 200 por 200 e arquivo de até 8 MB. Na prática, 1200 por 630 resolve prévia de link, capa de blog e imagem de landing com o mesmo arquivo.

Troquei a imagem e o WhatsApp continua mostrando a antiga. O que fazer?

É cache, e ele é indexado pelo endereço da imagem. A própria documentação da Meta orienta a publicar a imagem nova num endereço novo em vez de substituir o arquivo antigo. Depois, rode a URL no depurador de compartilhamento pra forçar a releitura.

Open Graph serve só pro WhatsApp?

Não. É o mesmo conjunto de tags que o Facebook, o LinkedIn e a maioria dos aplicativos de mensagem leem pra montar prévia de link. Consertar uma vez arruma o cartão em todos eles, o que é o motivo de o trabalho valer a pena.

Isso é trabalho de marketing ou de tecnologia?

A execução é de quem cuida do site. A decisão e a cobrança são da gestão, porque o prejuízo aparece na proposta que o vendedor manda, não no painel de quem programa. É por isso que o pedido precisa sair com a especificação pronta.