Facebook · LinkedIn · WhatsApp · X · diagnóstico OG

Open Graph Preview

Veja como sua página aparece ao ser compartilhada no LinkedIn, Facebook, WhatsApp e X. Diagnóstico completo de Open Graph + sugestões priorizadas.

A análise busca o HTML público da URL via proxy CORS. Funciona com qualquer site no ar.

Guia completo

Open Graph: a primeira impressão do seu link

Por que Open Graph importa

Quando alguém compartilha seu link no LinkedIn, WhatsApp, Slack ou Telegram, o que aparece na conversa: um card bonito com imagem, título e descrição — ou uma URL nua que ninguém clica?

A resposta depende 100% de você ter configurado Open Graph. Estudo da Buffer mostra que posts com OG image têm em média 2.3x mais cliques que posts sem imagem. Em WhatsApp e Telegram, o impacto é ainda maior — sem OG, parece que a URL é spam.

As 5 tags essenciais

  • og:title: o título do card. Até 60 chars no Facebook/LinkedIn, 70 no X.
  • og:description: a descrição abaixo do título. 110–200 chars é o sweet spot.
  • og:image: URL absoluta da imagem. 1200x630px (proporção 1.91:1) é o padrão de ouro.
  • og:url: URL canônica da página (com https).
  • og:type: tipo do conteúdo — website, article, product, profile.

Tags complementares recomendadas

  • og:site_name: nome do site (ex: "ciaweb").
  • og:locale: idioma (ex: "pt_BR").
  • og:image:alt: descrição da imagem para acessibilidade.
  • og:image:width e og:image:height: dimensões em pixels — acelera o render do card.
  • article:published_time e article:author: para conteúdo do tipo article.

Twitter Card: como funciona em paralelo

O X (ex-Twitter) usa tags próprias que sobrescrevem o OG quando presentes:

  • twitter:card: sempre summary_large_image para card grande (recomendado em 2026).
  • twitter:title, twitter:description, twitter:image: se ausentes, o X usa og:* equivalentes.
  • twitter:site e twitter:creator: handles @ da conta.

Recomendação prática: deixe og:* completo e adicione twitter:card="summary_large_image" sozinho. O X usa as OG tags para preencher o resto.

Como cada plataforma renderiza

Mesma tag, visuais diferentes:

  • Facebook / LinkedIn: imagem cobre a largura do card. Título em negrito, descrição cinza, domínio em cima.
  • X (com summary_large_image): imagem grande similar ao Facebook. Título, descrição e link em cinza.
  • WhatsApp / Telegram: card vertical compacto. Imagem em cima, título embaixo, descrição em uma linha.
  • Slack / Discord: tira "tira" lateral com a imagem em pequeno. Foco no texto.
  • Google Discover: usa og:image em alta resolução. Mínimo 1200px de largura.

Erros comuns que matam o preview

  1. OG image inválida: arquivo não encontrado, redirect quebrado, HTTPS quebrado. Sempre teste em modo anônimo.
  2. Tamanho errado: imagens muito pequenas (menos que 600x315px) são ignoradas pelo Facebook.
  3. Imagem por JavaScript: bots não executam JS. og:image precisa estar no HTML inicial.
  4. Cache antigo: depois de mudar a OG, Facebook segura cache por dias. Use o Sharing Debugger pra forçar refresh.
  5. URL relativa: og:image precisa ser ABSOLUTA (com https://). Relativo (/img.jpg) quebra.
  6. Tag inline: og: tags têm que estar no <head>. Em <body> algumas plataformas ignoram.
  7. Imagem em WebP/AVIF: nem todas as plataformas suportam. Use JPG ou PNG para OG.

Ferramentas oficiais para testar

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug — força refresh do cache do Facebook.
  • LinkedIn Post Inspector: linkedin.com/post-inspector — mostra o que o LinkedIn vê.
  • X Card Validator: cards-dev.twitter.com/validator — preview do card no X.
  • WhatsApp: não tem debugger oficial. Teste mandando pra você mesmo numa conversa.

Tamanhos ideais por plataforma (2026)

  • Facebook + LinkedIn + X (large card): 1200x630px (1.91:1).
  • WhatsApp + Telegram: aceitam o mesmo 1200x630, mas exibem em formato quadrado ~400x400 — coloque o foco no centro da imagem.
  • Pinterest: 1000x1500px (2:3) — vertical, prefere imagens de receita/produto.
  • Discord: 1200x630 funciona. Compacto demais para detalhes — use cores fortes.

OG dinâmico: imagens geradas automaticamente

Para sites com muito conteúdo (blogs, e-commerces), gerar uma OG image manual pra cada post é inviável. Use OG dinâmico:

  • Vercel OG: gera imagem on-the-fly a partir de JSX.
  • Cloudinary: overlay automático de texto sobre template.
  • WordPress + plugins (RankMath, Yoast): oferecem geração automática.
  • Astro Image Service: gera no build a partir de template.

Resultado: cada artigo, produto ou case tem uma OG image única com o título e marca — sem trabalho manual.

Perguntas frequentes

Dúvidas sobre open graph preview

Se sua dúvida não está aqui, é só falar com a gente.

Falar no WhatsApp
O que é Open Graph?
Open Graph (OG) é um protocolo criado pelo Facebook em 2010 que padroniza como uma página é exibida quando compartilhada em redes sociais e apps de mensagem. As tags og:title, og:description, og:image e og:url ditam o card que aparece no LinkedIn, Facebook, WhatsApp, Telegram, Discord, Slack e dezenas de outros serviços.
Por que o preview do LinkedIn é diferente do Facebook?
Cada plataforma aplica regras visuais próprias: tamanhos de imagem, comprimento de título, fonte. Mas TODAS leem as mesmas tags og:* na origem. Se você acerta o Open Graph, todos os previews funcionam — só varia o estilo.
Qual a imagem ideal para Open Graph?
1200x630 pixels (proporção 1.91:1). Funciona perfeitamente em Facebook, LinkedIn, X com card large, WhatsApp e Telegram. Formato JPG ou PNG, máximo 8MB. Evite WebP (algumas plataformas não suportam) e GIF/SVG (não suportados em OG).
Por que o WhatsApp não mostra meu preview?
Causas comuns: (1) imagem maior que 600KB — WhatsApp pula. (2) Sem og:image OU og:image apontando para HTTPS quebrado. (3) Site bloqueia o bot do WhatsApp. (4) Cache antigo — peça pra alguém compartilhar pela primeira vez ou force refresh com debugger. (5) Imagem com lazy load ou JS — OG image precisa estar no HTML estático.
Posso ter previews diferentes por plataforma?
Sim. Use as tags específicas: twitter:image e twitter:title sobrescrevem og:* no X. Para LinkedIn e Facebook, use og:* normal. Para Pinterest, use article:* adicionalmente. Mas mantenha tudo coerente — o esforço de ter previews diferentes raramente compensa.
Como fazer o Facebook re-cachear minha imagem?
Use o Facebook Debugger (developers.facebook.com/tools/debug). Cole a URL, clique em "Buscar novas informações" e o cache é renovado em segundos. Mesma coisa: LinkedIn Post Inspector e X Card Validator.
O Google usa Open Graph?
Indiretamente. O Google prefere title e meta description normais para o SERP. Mas Open Graph é usado por Google Discover, recomendações no Chrome mobile, e quando alguém compartilha seu site no Google Chat / Gmail. Vale ter sempre.
Posso testar antes de publicar?
Sim, esta ferramenta. Mas o preview real só rola depois que a página estiver online — porque os bots das redes sociais precisam fazer fetch da URL pública. Para sites locais (localhost), use ferramentas como ngrok pra expor temporariamente.
Mais ferramentas

Outras ferramentas gratuitas

Ver todas

Velocidade do site

Analise Core Web Vitals, FCP, LCP, CLS e descubra como o Google vê a performance do seu site.

Usar agora

Whois

Consulte o registro de qualquer domínio: titular, datas, servidores DNS e contatos.

Usar agora

Descubra seu IP

Veja seu endereço IP público, provedor, localização aproximada e tipo de conexão.

Usar agora

Meta tags

Gere meta tags SEO completas: title, description, Open Graph e Twitter Cards prontos pra colar.

Usar agora

Schema.org JSON-LD

Crie marcações Schema.org (Organization, Article, FAQ, LocalBusiness) prontas em JSON-LD.

Usar agora

Sitemap XML

Gere um sitemap.xml a partir de uma lista de URLs ou crawl automático do seu site.

Usar agora
A Cia pode ajudar

Quer um site com Open Graph perfeito nascendo pronto?

A Cia desenvolve sites com OG, Twitter Card, schemas e tudo o que faz seu link bombar nas redes.

Ver criação de sites Falar no WhatsApp

Já sabe o que precisa? Peça uma proposta gratuita — resposta em até 24h úteis.