Hospedagem WordPress otimizada: velocidade e alto desempenho para o seu site 🚀 Ver planos →
Novidades

Imagem de compartilhamento no Facebook e Instagram

6 de julho de 2026 · Nuvem Hospedagem

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.

Anatomia da imagem de compartilhamento: as meta tags og:image, og:title e og:description no HTML
Cada parte do cartão de pré-visualização vem de uma meta tag no HTML do site.

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 →

  1. Cole a URL da sua página e clique em Depurar.
  2. Veja o preview e confira se o título, a descrição e a imagem estão certos.
  3. 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.
  4. No WhatsApp, o cache dura de 24 a 48 horas. Um truque para forçar o preview novo é compartilhar o link com ?v=2 no 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.

Conhecer os planos da Nuvem →

Fontes e referências: The Open Graph protocol (ogp.me) · Sharing Debugger da Meta. Veja também o blog da Nuvem para mais guias.