Open Graph: como personalizar a prévia dos seus links

Open Graph é o protocolo que define a imagem, o título e a descrição que aparecem quando um link é compartilhado no WhatsApp, Instagram, Facebook ou X. Sem ele configurado, a rede social mostra o que conseguir encontrar sozinha na página de destino, às vezes nada. Com ele, você decide exatamente o que a pessoa vê antes de clicar.

O que é Open Graph, na prática

Open Graph é um conjunto de meta tags (propriedades og: no <head> da página) criado originalmente pelo Facebook para descrever como um conteúdo deve aparecer quando compartilhado. WhatsApp, Instagram, Facebook, LinkedIn, Slack, Discord e Telegram leem as mesmas tags: configure uma vez e a prévia funciona em todos esses lugares, sem precisar repetir o trabalho para cada rede.

Por que a prévia decide o clique antes da página carregar

Para quem compartilha links de afiliado, infoproduto ou qualquer oferta, a prévia é a primeira (e às vezes única) chance de convencer alguém a clicar. Ela aparece no chat antes de a pessoa sair do aplicativo, então uma imagem genérica, cortada ou um título truncado reduzem o clique mesmo quando a página de destino em si é ótima. É julgamento antes do produto.

Os 4 campos que toda prévia precisa

Diagrama de um card de prévia com os 4 campos do Open Graph numerados: imagem, título, descrição e URL
São quatro tags obrigatórias: og:title (o título mostrado), og:description (a descrição curta abaixo do título), og:image (a imagem de capa) e og:url (a URL canônica do conteúdo). Para a imagem, o tamanho recomendado é 1200x630px, proporção 1.91:1: é o formato que WhatsApp, Instagram e Facebook cortam com menos distorção.

O erro mais comum: deixar a prévia depender da página de destino

WhatsApp e a maioria dos apps de mensagem não executam JavaScript ao gerar a prévia: eles leem apenas o HTML que o servidor entrega na primeira resposta. Se as tags Open Graph só aparecem depois que um script roda no navegador, o crawler nunca as vê e a prévia fica genérica ou em branco. É por isso que o Migly resolve e injeta as tags de cada link diretamente no servidor, antes de qualquer JavaScript rodar.

E o X (antigo Twitter)?

O X tem suas próprias tags (twitter:card, twitter:title, entre outras), mas quando elas não existem na página, ele usa as tags og: como alternativa. Na prática, configurar bem o Open Graph já cobre a esmagadora maioria dos casos, sem precisar duplicar a configuração para o X separadamente.

Por que a prévia às vezes não muda na hora

WhatsApp e Facebook guardam a prévia em cache no servidor deles assim que alguém compartilha um link pela primeira vez. Se você editar a imagem ou o título depois disso, quem já viu aquele link continua vendo a versão antiga até o cache expirar, o que pode levar de algumas horas a alguns dias. Isso é comportamento normal da rede social, não um erro de configuração.

Como personalizar no Migly

Fluxo mostrando um link sendo editado com campos de imagem, título e resumo, gerando uma prévia ao vivo
No editor de cada link encurtado, defina a imagem, o título e um resumo curto, com uma prévia ao vivo do resultado antes de salvar, sem mexer em código, sem configurar meta tag manualmente e sem acessar a página de destino. Veja o recurso de prévia de link do Migly.

Perguntas frequentes

O que acontece se eu não configurar o Open Graph do meu link?

A rede social tenta adivinhar usando o que encontrar na página de destino. Se a página não tiver suas próprias tags, a prévia some ou mostra algo genérico, e isso reduz o clique.

A prévia funciona igual no WhatsApp e no Instagram?

Sim. As duas leem as mesmas tags og:, então uma única configuração vale para ambos, além de Facebook, LinkedIn, Slack, Discord e Telegram.

Qual o tamanho ideal da imagem de capa?

1200x630px, proporção 1.91:1. É o formato recomendado pela maioria das redes e o que menos sofre corte automático.

Troquei a imagem e a prévia antiga continua aparecendo. Por quê?

A rede social guardou a versão anterior em cache. Isso se resolve sozinho depois de um tempo, sem precisar mexer em nada de novo.

Preciso saber programar para personalizar isso?

Não. No Migly é um formulário com três campos (imagem, título e resumo) e uma prévia ao vivo, sem precisar editar meta tag ou acessar código.