Meta Tags Open Graph para WhatsApp: Guia Completo

Configurar meta tags Open Graph corretamente é a diferença entre seu site aparecer como um link feio e sem contexto ou como um card atraente com imagem, título e descrição no WhatsApp. Se você já compartilhou um link e ficou frustrado ao ver que ele apareceu apenas como texto puro, sem nenhuma preview, este guia vai resolver esse problema de vez.

O WhatsApp, o Instagram, o Facebook e praticamente todas as redes sociais e aplicativos de mensagem usam o protocolo Open Graph para gerar previews de links. Sem essas tags, o aplicativo não tem como saber qual imagem exibir, qual título mostrar ou que descrição usar. O resultado é um link genérico que ninguém quer clicar.

Neste artigo, você vai aprender exatamente quais tags configurar, como testar e como corrigir os erros mais comuns. Tudo com código HTML copiável e pronto para usar.

Por que seu link aparece sem imagem no WhatsApp

Quando você cola um link no WhatsApp, o aplicativo faz uma requisição HTTP para aquela URL e analisa o HTML da página. Ele procura especificamente por meta tags Open Graph dentro do <head> do documento. Se encontrar, monta um card visual com a imagem, título e descrição definidos nessas tags.

Se não encontrar nada, o WhatsApp tenta extrair informações da página de outras formas: busca o <title>, tenta achar alguma imagem no corpo do HTML, e monta um preview genérico. Na maioria das vezes, o resultado é ruim — uma imagem cortada, um título incompleto ou simplesmente nada.

O mesmo processo acontece no Facebook, Instagram (quando você compartilha links nos stories ou DMs), LinkedIn, Telegram e Twitter/X. Todos esses serviços fazem um crawl da página e buscam as meta tags Open Graph. O Twitter também aceita suas próprias tags (twitter:card, twitter:image), mas respeita as OG tags como fallback.

Em resumo: sem Open Graph, seu site perde visibilidade em todos os canais onde links são compartilhados. E hoje, o WhatsApp é o principal canal de compartilhamento no Brasil.

O que são meta tags Open Graph

O protocolo Open Graph foi criado pelo Facebook em 2010 com um objetivo simples: permitir que qualquer página da web se torne um "objeto rico" dentro de uma rede social. Antes dele, cada plataforma tinha sua própria forma de extrair informações de links, e o resultado era inconsistente.

As meta tags Open Graph são elementos HTML colocados dentro do <head> da página. Elas não aparecem visivelmente para o usuário que acessa o site — servem exclusivamente para informar crawlers e aplicativos sobre o conteúdo da página.

A sintaxe segue o padrão:

<meta property="og:propriedade" content="valor" />

O atributo property (e não name) é importante. Alguns desenvolvedores confundem e usam name="og:title" — isso não funciona. O protocolo Open Graph exige property.

As tags Open Graph fazem parte de uma estratégia maior de otimização do seu site para buscadores e redes sociais. Se você quer entender como melhorar a presença do seu site no Google também, veja nosso guia sobre como colocar site no Google. Para ir além com marcação estruturada, confira o artigo sobre dados estruturados.

As 6 tags essenciais

Existem dezenas de propriedades Open Graph, mas na prática você precisa de apenas seis para cobrir todos os casos de uso. Aqui está cada uma delas com explicação e o código completo no final.

og:title

O título que aparece no card de preview. Deve ser curto (até 60 caracteres), descritivo e diferente do <title> da página se necessário. Enquanto o <title> é otimizado para o Google, o og:title é otimizado para redes sociais.

og:description

A descrição exibida abaixo do título no card. Mantenha entre 100 e 155 caracteres. Deve complementar o título e gerar curiosidade suficiente para o clique.

og:image

A tag mais importante para previews visuais. Define a URL da imagem que será exibida no card. Deve ser uma URL absoluta (com https://). Imagens relativas não funcionam.

og:url

A URL canônica da página. Serve para consolidar compartilhamentos de URLs diferentes (com e sem www, com e sem trailing slash) em uma única referência.

og:type

Define o tipo de conteúdo. Os valores mais comuns são website (para páginas gerais) e article (para blog posts). Essa tag influencia como a plataforma categoriza e exibe o conteúdo.

og:site_name

O nome do site ou marca. Aparece como texto secundário em alguns previews, ajudando o usuário a identificar a origem do conteúdo.

Aqui está o bloco completo de código HTML que você pode copiar e colar no <head> do seu site:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Minha Pagina — Meu Site</title>
  <meta name="description" content="Descricao da pagina para o Google." />

  <!-- Open Graph -->
  <meta property="og:title" content="Minha Pagina — Titulo para Redes Sociais" />
  <meta property="og:description" content="Descricao atraente que aparece no WhatsApp e Facebook." />
  <meta property="og:image" content="https://meusite.com.br/imagens/og-cover.jpg" />
  <meta property="og:url" content="https://meusite.com.br/minha-pagina/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Meu Site" />

  <!-- Twitter Card (fallback para X/Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Minha Pagina — Titulo para Redes Sociais" />
  <meta name="twitter:description" content="Descricao atraente que aparece no Twitter/X." />
  <meta name="twitter:image" content="https://meusite.com.br/imagens/og-cover.jpg" />
</head>

Note que incluímos também as Twitter Cards como bônus. O Twitter/X prioriza suas próprias tags, mas usa as OG como fallback. Incluir ambas garante compatibilidade total.

A tabela abaixo resume cada tag e suas especificações:

Tag	Obrigatória?	Limite de caracteres	Observação
og:title	Sim	60-70 chars	Pode diferir do `<title>`
og:description	Sim	100-155 chars	Complementa o título
og:image	Sim	URL absoluta	Mínimo 1200x630px
og:url	Recomendada	URL completa	Deve ser a URL canônica
og:type	Recomendada	`website` ou `article`	Default: `website`
og:site_name	Recomendada	Nome da marca	Aparece como label secundário

Tamanho ideal da imagem OG

A imagem Open Graph é o elemento mais visível do preview. Uma imagem mal dimensionada pode ser cortada, distorcida ou simplesmente ignorada. Siga estas especificações:

Dimensões recomendadas: 1200 x 630 pixels. Essa proporção (1.91:1) é o padrão aceito pelo WhatsApp, Facebook, LinkedIn e Twitter. Imagens menores que 600x315px podem não gerar preview em algumas plataformas.

Formato: JPEG ou PNG. O JPEG é melhor para fotos (menor tamanho de arquivo), enquanto o PNG é ideal para imagens com texto e gráficos (melhor nitidez). Evite WebP para OG images — alguns crawlers ainda não suportam.

Peso máximo: Mantenha abaixo de 300KB. Imagens acima de 1MB podem não ser carregadas pelo crawler do WhatsApp, que tem timeout curto. O Facebook aceita até 8MB, mas não há razão para imagens tão pesadas.

Texto na imagem: Se a imagem contém texto, mantenha o conteúdo principal centralizado. O WhatsApp e o Facebook cortam as bordas de formas diferentes dependendo do dispositivo. Deixe uma margem segura de pelo menos 100px em cada lado.

URL da imagem: Deve ser absoluta e usar HTTPS. URLs relativas (como /imagens/cover.jpg) não funcionam. O crawler precisa de uma URL completa para buscar a imagem.

Exemplo de tag com imagem correta:

<meta property="og:image" content="https://meusite.com.br/imagens/og-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />

As tags og:image:width e og:image:height são opcionais, mas ajudam os crawlers a renderizar o preview mais rápido sem precisar baixar a imagem inteira para descobrir as dimensões.

Como testar seu preview

Configurar as tags é só metade do trabalho. Você precisa testar se o preview está aparecendo corretamente antes de compartilhar o link publicamente. Aqui estão as formas mais confiáveis:

1. OpenGraph.xyz

Acesse opengraph.xyz e cole a URL do seu site. A ferramenta mostra exatamente como o link vai aparecer no Facebook, Twitter, LinkedIn e WhatsApp. É a forma mais rápida de validar.

2. WhatsApp Web (enviar para si mesmo)

Abra o WhatsApp Web, crie um grupo com você mesmo (ou envie para "Mensagens salvas"), e cole o link. Você verá o preview real. Se a imagem não aparecer, espere alguns segundos — o WhatsApp faz o crawl de forma assíncrona.

3. Facebook Sharing Debugger

Acesse developers.facebook.com/tools/debug/ e cole a URL. Essa ferramenta mostra todas as tags OG que o crawler do Facebook encontrou, alerta sobre erros e permite forçar um re-scrape da página (útil quando você atualizou as tags mas o cache antigo ainda aparece).

4. Twitter Card Validator

Acesse cards-dev.twitter.com/validator para verificar como o link aparece no Twitter/X. Valida tanto as Twitter Cards quanto as OG tags usadas como fallback.

Se você quer uma forma prática de gerar todas essas tags sem escrever código manualmente, use nosso Gerador de Meta Tags gratuito. Basta preencher os campos e copiar o código pronto.

Erros comuns e como resolver

Mesmo com as tags configuradas, alguns problemas podem impedir o preview de funcionar. Aqui estão os erros mais frequentes e suas soluções:

Imagem pequena demais

O WhatsApp ignora imagens menores que 300x200px. O Facebook exige no mínimo 200x200px, mas recomenda 1200x630px. Se a imagem é menor que o mínimo, o preview aparece sem imagem ou com uma miniatura genérica.

Solução: Use sempre 1200x630px. Crie uma imagem padrão para o site e imagens específicas para páginas importantes.

URL da imagem sem HTTPS

Crawlers modernos (WhatsApp, Facebook) rejeitam ou ignoram imagens servidas via HTTP. A URL precisa começar com https://.

Solução: Certifique-se de que seu site tem SSL ativo. Se você está usando uma hospedagem de sites que fornece SSL automático, como o Htmly, esse problema não existe.

Cache do WhatsApp mostrando preview antigo

O WhatsApp cacheia previews agressivamente. Mesmo depois de atualizar as tags, o preview antigo pode persistir por dias. O Facebook tem o mesmo comportamento.

Solução: Adicione um parâmetro de versão na URL da imagem para forçar o re-cache:

<!-- Antes -->
<meta property="og:image" content="https://meusite.com.br/imagens/og-cover.jpg" />

<!-- Depois (forca re-cache) -->
<meta property="og:image" content="https://meusite.com.br/imagens/og-cover.jpg?v=2" />

Incremente o número (?v=3, ?v=4) cada vez que atualizar a imagem. Para o Facebook, use o Sharing Debugger e clique em "Scrape Again" para forçar a atualização.

URL da imagem relativa em vez de absoluta

Este é o erro mais comum. URLs relativas como /imagens/cover.jpg ou imagens/cover.jpg não funcionam em meta tags OG. O crawler precisa de uma URL completa para buscar a imagem, pois ele não está no contexto do seu site.

Solução: Sempre use a URL completa com domínio:

<!-- Errado -->
<meta property="og:image" content="/imagens/cover.jpg" />

<!-- Correto -->
<meta property="og:image" content="https://meusite.com.br/imagens/cover.jpg" />

Tags dentro do `<body>` em vez do `<head>`

Meta tags só são lidas quando estão dentro do <head>. Se estiverem no <body>, os crawlers ignoram. Verifique seu HTML e garanta que todas as tags OG estejam antes do fechamento </head>.

Múltiplas tags og:image conflitantes

Algumas ferramentas de CMS inserem mais de uma og:image. O crawler pode pegar a primeira ou a última, dependendo da implementação. Mantenha apenas uma tag og:image por página.

Servidor bloqueando crawlers

Se o servidor retorna 403 ou demora mais de 5 segundos para responder, o crawler desiste e o preview não é gerado. Verifique se o User-Agent do WhatsApp (WhatsApp/2.x) e do Facebook (facebookexternalhit) não estão bloqueados no firewall ou no Cloudflare.

Conclusão

As meta tags Open Graph são uma configuração simples que faz uma diferença enorme na forma como seu site é percebido quando compartilhado. Com as 6 tags essenciais configuradas e uma imagem de 1200x630px, seu link vai aparecer profissional no WhatsApp, Facebook, Instagram e qualquer outra plataforma.

Se você está criando um site HTML e quer publicar rapidamente, saiba que no Htmly as meta tags Open Graph são injetadas automaticamente em todo site hospedado — você define o título, descrição e imagem no painel, e nós cuidamos do resto. É um passo a menos entre criar e compartilhar.

Para gerar suas tags agora mesmo, use o Gerador de Meta Tags. E se você quer aprender a publicar seu site do zero, confira o guia como publicar site HTML.