Gerador de Open Graph Image

Open Graph image: o banner 1200×630 que todo link compartilhado merece

A Open Graph image é o banner principal que aparece quando alguém compartilha sua página no Facebook, LinkedIn, WhatsApp, Slack, Discord, X (antigo Twitter), Telegram, iMessage ou qualquer mensageiro moderno que faz preview de links. Vem do Open Graph Protocol, criado pelo Facebook em 2010 em ogp.me, e é a imagem de marketing mais impactante de uma página — um link com OG image bem feita gera tipicamente duas a três vezes mais cliques que um link sem ela. Sem og:image explícito, a plataforma raspa a primeira imagem da página, que quase sempre é um logo, um pixel de tracking ou um emoji inline.

Markup HTML

<meta property="og:image" content="https://exemplo.com/og/post.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Capa do artigo: Como construir APIs rápidas">
<meta property="og:image:type" content="image/png">

A URL do og:image precisa ser absoluta, servida em HTTPS e publicamente acessível — páginas atrás de login ou basic-auth de staging são ignoradas em silêncio. Inclua sempre og:image:width e og:image:height pra plataforma reservar o espaço antes de baixar; og:image:alt para leitores de tela; e og:image:type para crawlers antigos que não detectam o MIME sozinhos.

Dimensões recomendadas

• 1200 × 630 px (1,91:1) — o tamanho canônico. Usado por Facebook, WhatsApp, LinkedIn, X summary_large_image, Slack, Discord, Telegram, iMessage. Escolha esse se for publicar uma única imagem.
• 1200 × 627 px — a preferência publicada pelo LinkedIn, praticamente igual a 1200×630.
• 200 × 200 px mínimo — o piso do Facebook. Abaixo disso a plataforma recusa a imagem e cai num thumbnail minúsculo.
• 1:1 (quadrado) — para o twitter:card = summary do X (card pequeno), mínimo 144×144, recomendado 400×400.

Imagens significativamente maiores que 1200×630 são aceitas — o Facebook permite até 8 MB — mas a plataforma reduz para 1200 de largura, então não há benefício visual em arquivos enormes. Imagens menores são ampliadas com desfoque visível.

Área segura de texto

Clientes diferentes recortam a imagem de forma diferente. O iMessage renderiza o retângulo completo de 1,91:1, mas certos clientes do X recortam para 2:1 mais apertado, e o navegador interno do Facebook adiciona padding nas laterais. Mantenha textos críticos e logos dentro de uma safe zone centralizada de 1100×600, deixando cerca de 50 pixels de margem em cada lado. Manchetes com menos de 60 caracteres renderizam confortavelmente entre 60 e 80 pt; ajuste as linhas pra evitar viúvas na segunda linha.

Formato e peso

• JPEG — para fotos e designs com gradientes. Qualidade 80 costuma gerar arquivos de 100–300 KB.
• PNG — para designs com texto, bordas nítidas ou grandes áreas de cor chapada. Comprima com oxipng -o4 ou pngquant --quality 70-90.
• WEBP — suportado por Facebook, X, LinkedIn, WhatsApp. Menor que JPEG e PNG, mas alguns clientes antigos ainda fazem fallback. Envie um JPG de fallback se a cauda longa importar.
• SVG — não é suportado. Facebook, X, LinkedIn e WhatsApp não renderizam SVG no slot OG. Converta pra PNG antes de publicar.
• GIF animado — aceito mas raramente animado. A maioria das plataformas congela no primeiro frame, então desenhe o primeiro frame como fallback estático.

Tamanho máximo de arquivo: 8 MB no Facebook, 5 MB no LinkedIn, 3 MB no X. Uma imagem 1200×630 bem comprimida fica entre 80 e 250 KB.

Gerando OG images dinamicamente

Para sites com muitas páginas (blogs, ecommerce, dashboards SaaS), publicar uma imagem desenhada à mão por URL é impraticável. Stacks modernas geram OG images sob demanda:

• @vercel/og — renderizador no Edge usando Satori (JSX → SVG → PNG). Usado por Vercel, Next.js, Cloudflare Workers.
• satori — biblioteca JS pura, agnóstica de framework.
• Next.js ImageResponse — helper embutido que envolve o Satori para o App Router.
• Puppeteer / Playwright — renderizam uma página HTML oculta e tiram screenshot. Mais pesados mas suportam qualquer feature de CSS.
• node-canvas / <canvas> do browser — desenho direto no contexto 2D. Controle máximo, mais código.

Invalidação de cache

O Facebook cacheia metadados OG agressivamente — às vezes por semanas. Depois de editar a imagem ou qualquer tag OG, cole a URL no Facebook Sharing Debugger (developers.facebook.com/tools/debug) e clique em "Scrape Again". O LinkedIn tem um Post Inspector equivalente, e o X tem o Card Validator (descontinuado mas ainda funcional). O WhatsApp segue o cache do Facebook, então atualizar pelo debugger do FB geralmente resolve o WhatsApp também. Um truque comum pra forçar refresh em produção sem acesso ao debugger é anexar uma query string com versão na URL do OG image.

Perguntas frequentes

Precisa ser exatamente 1200×630? Na prática sim. Outras proporções sofrem corte central no X e esticam ou aparecem com letterbox no Facebook. 1200×630 é a interseção segura das dimensões preferidas em todas as grandes plataformas.

Posso usar SVG? Não. Facebook, X, LinkedIn e WhatsApp não renderizam SVG no slot OG image. Converta pra PNG ou JPEG.

O og:image pode ser um data URI? Não. Os crawlers buscam a URL com uma requisição HTTP separada e ignoram data:. A imagem precisa estar em URL HTTPS publicamente acessível.

Por que o Facebook ainda mostra a imagem antiga depois que atualizei o arquivo? Cache agressivo. Rode a página no Facebook Sharing Debugger e clique em "Scrape Again", ou renomeie o arquivo de imagem pra alterar a URL.

Devo servir uma imagem diferente para o X? Opcional. O X lê twitter:image primeiro e cai para og:image. Se quiser um enquadramento 2:1 mais apertado pra clientes do X que recortam, envie um twitter:image separado; caso contrário, deixe o X reaproveitar o asset OG.