Imagem de compartilhamento no Facebook e Instagram
Você caprichou no site, mandou o link pra um cliente no WhatsApp e… apareceu só o endereço sem graça, ou uma imagem aleatória que não tem nada a ver. Isso acontece porque falta (ou está errada) a imagem de compartilhamento do seu site — a figura que o Facebook, o Instagram e o WhatsApp mostram automaticamente quando alguém envia o seu link. Neste guia você vai entender o que é essa imagem, como ajustá-la direto no código e como testar tudo no depurador da Meta.
O que é a imagem de compartilhamento (Open Graph)
Quando você compartilha um link, as redes sociais não abrem a página inteira: elas leem umas etiquetas escondidas no HTML chamadas meta tags Open Graph (o famoso og:). São essas tags que dizem qual título, qual descrição e — o mais importante — qual imagem deve aparecer no cartão de pré-visualização. O padrão foi criado pelo Facebook e hoje é lido por praticamente todo mundo: Facebook, Instagram, WhatsApp, LinkedIn, Telegram, Discord e por aí vai.
As quatro etiquetas que mais importam são:
og:image— a imagem do cartão (a estrela do artigo);og:title— o título que aparece em negrito;og:description— a frase curta abaixo do título;og:url— o endereço oficial da página.
Por que às vezes aparece a imagem errada (ou nenhuma)
Se o preview vem quebrado, quase sempre é por um destes motivos:
- As tags não existem no HTML — aí a rede social “chuta” uma imagem qualquer da página.
- A imagem é grande demais para o WhatsApp. O WhatsApp costuma descartar a imagem quando o arquivo passa de ~300 KB — e sem aviso nenhum. A dica é manter o arquivo abaixo de 250 KB.
- O caminho da imagem não é HTTPS ou não é uma URL absoluta. Precisa ser o endereço completo, começando com
https://. - As tags são inseridas por JavaScript. O robô do WhatsApp e do Facebook não executa JavaScript — as tags têm que estar no HTML que vem do servidor.
- Cache. A rede social guardou a versão antiga do seu link e ainda mostra o preview velho (já já resolvemos isso).
As meta tags que você precisa no HTML
O bloco abaixo vai dentro do <head> da página. Troque os textos e o endereço da imagem pelos seus:
<!-- Open Graph: Facebook, Instagram e WhatsApp -->
<meta property="og:title" content="O título que aparece no card">
<meta property="og:description" content="Uma descrição curta e chamativa">
<meta property="og:image" content="https://seusite.com.br/imagem-compartilhamento.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://seusite.com.br/">
<meta property="og:type" content="website">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://seusite.com.br/imagem-compartilhamento.jpg">
Sobre a imagem em si, o tamanho ideal para 2026 é simples de decorar:
- 1200 × 630 pixels (proporção 1.91:1) — funciona bem em todas as redes de uma vez só;
- formato JPG ou PNG, servido por HTTPS;
- até ~250 KB de peso, para o WhatsApp exibir sem falhar;
- deixe o texto importante mais ao centro, porque as bordas podem ser cortadas em telas menores.
Onde ajustar: no código do site (Claude, Lovable ou Gemini)
Se o seu site foi feito à mão ou com ajuda de uma IA como o Claude, o Lovable ou o Gemini, dá pra colocar essas tags direto no código, ainda na criação. Na prática, é só pedir para a ferramenta. Um exemplo de comando que funciona bem:
“Adicione as meta tags Open Graph no <head> da página, com og:title, og:description, og:image (1200×630, URL absoluta https), og:url e og:type, além de twitter:card summary_large_image. Deixe as tags no HTML estático, sem depender de JavaScript.”
Esse último detalhe é o que mais escapa: como o robô das redes sociais não roda JavaScript, as tags precisam estar no HTML que o servidor entrega. Sites feitos em WordPress têm um atalho — plugins de SEO como o Yoast já geram essas tags e deixam você escolher a imagem numa aba visual, sem mexer no código.
Como testar no depurador de compartilhamento da Meta
Depois de publicar, não confie no “achismo”: teste. A própria Meta tem uma ferramenta gratuita que mostra exatamente o que o Facebook, o Instagram e o WhatsApp enxergam do seu link (todos usam o mesmo robô). Acesse:
Abrir o Depurador de Compartilhamento →
- Cole a URL da sua página e clique em Depurar.
- Veja o preview e confira se o título, a descrição e a imagem estão certos.
- Alterou as tags depois? Clique em “Extrair novamente” (Scrape Again) para o Facebook atualizar o cache — sem isso, ele continua mostrando a versão antiga.
- No WhatsApp, o cache dura de 24 a 48 horas. Um truque para forçar o preview novo é compartilhar o link com
?v=2no final (ex.:seusite.com.br/?v=2).
Uma observação sobre o Instagram: nas legendas do feed os links não são clicáveis, então o preview não aparece ali. Mas quando alguém manda o seu link no Direct (ou no WhatsApp), é a imagem de compartilhamento que entra em cena — por isso vale configurar direitinho.
Veja na prática: um site criado com Claude e com Lovable
Se você usa (ou quer usar) uma dessas ferramentas de IA para montar o site, vale acompanhar o processo do começo ao fim — é bem no momento da criação que você aproveita para já deixar as meta tags Open Graph no lugar certo. Separamos dois vídeos do nosso canal:
Criando um site com o Claude
Criando um projeto com o Lovable
Perguntas frequentes
Qual o tamanho ideal da imagem de compartilhamento?
1200 × 630 pixels, em JPG ou PNG, com no máximo cerca de 250 KB de peso para não falhar no WhatsApp.
Mudei a imagem e o preview antigo continua aparecendo. O que faço?
É o cache. Use o Depurador de Compartilhamento da Meta e clique em “Extrair novamente”. No WhatsApp, adicione ?v=2 ao final do link para forçar um preview novo.
Preciso de uma imagem diferente para cada rede social?
Não. Uma única imagem de 1200 × 630 funciona bem no Facebook, Instagram, WhatsApp, LinkedIn e na maioria das plataformas. Só o X (Twitter) tem um formato um pouco diferente, mas ele também aceita a mesma imagem.
O WhatsApp não mostra minha imagem. Por quê?
Na maioria das vezes é porque o arquivo passou de ~300 KB, ou porque a URL da imagem não é HTTPS. Comprima a imagem e confirme que o endereço começa com https://.
Quer um site rápido, seguro e já otimizado para aparecer bonito quando compartilhado? Fale com a gente e hospede o seu projeto em servidores brasileiros com NVMe e suporte humano pelo WhatsApp.
Fontes e referências: The Open Graph protocol (ogp.me) · Sharing Debugger da Meta. Veja também o blog da Nuvem para mais guias.