Anúncios incomodam? Ir Sem anúncios Hoje 

Geração Automática de Imagens OG Crie cartões sociais dinâmicos com uma API de captura de tela

Publicado em 2 de fev de 2026

Pare de criar manualmente imagens de visualização social. Aprenda a gerar belas imagens OG dinamicamente usando modelos HTML e uma API de captura de tela. Tutoria em código com exemplos reais.

Geração Automática de Imagens OG: Crie Cartões Sociais Dinâmicos com uma API de Captura de Tela

ANÚNCIO · REMOVER?

Você passa horas elaborando o post de blog perfeito, publica e o compartilha no Twitter. E então… uma caixa cinza sem graça. Sem pré-visualização. Sem imagem. Apenas um link triste e desprotegido que ninguém quer clicar.

Parece familiar? Imagens OG (Open Graph) são os heróis anônimos do compartilhamento social. Elas são literalmente a diferença entre seu conteúdo ser ignorado ou clicado. E se você ainda as cria manualmente no Figma para cada página, precisamos conversar.

O que São Imagens OG (E Por Que Você Deveria Se Importar)?

Imagens OG são os cartões de pré-visualização que aparecem quando você compartilha um link em mídias sociais, Slack, Discord ou em qualquer lugar que desdobre URLs. Elas são definidas nas tags <meta> do seu HTML:

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:title" content="Your Awesome Title" />
<meta property="og:description" content="A compelling description" />

O problema? Criar essas imagens manualmente não escala. Tem 100 posts de blog? São 100 imagens. Tem páginas de produtos dinâmicas? Boa sorte para acompanhar.

A Solução: Gere Imagens OG Dinamicamente

Aqui está a jogada: em vez de pré-gerar imagens, renderizaremos um modelo HTML e tiraremos uma captura de tela em tempo real usando uma API de captura de tela. O fluxo é o seguinte:

Crie um modelo HTML para seu cartão OG
Hospede-o com parâmetros dinâmicos (título, autor, etc.)
Aponte sua tag og:image meta para a API de captura de tela
Pronto. Cada página terá um cartão de pré-visualização único e bonito.

Passo 1: Crie Seu Modelo OG

Primeiro, crie uma página HTML simples que renderize seu cartão social. Isso pode ser uma rota dedicada em seu aplicativo ou um arquivo HTML estático.

<!-- /og-template?title=Hello%20World&author=John -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .author {
      font-size: 28px;
      opacity: 0.9;
    }
    .logo {
      position: absolute;
      bottom: 40px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1 id="title">Your Title Here</h1>
  <p class="author">by <span id="author">Author Name</span></p>
  <div class="logo">yoursite.com</div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('author').textContent = params.get('author') || 'Anonymous';
  </script>
</body>
</html>

A chave aqui: 1200×630 pixels. Esse é o tamanho mágico para imagens OG. Twitter, Facebook, LinkedIn — todos funcionam bem com essa dimensão.

Passo 2: Capture-o com uma API

Agora, a parte divertida. Em vez de configurar o Puppeteer em seu servidor (e lidar com toda aquela confusão do Chrome headless), use uma API de captura de tela para renderizar seu modelo.

Aqui está um exemplo de Node.js mostrando o padrão geral:

// Generate OG image URL using a screenshot API
function getOgImageUrl(title, author) {
  const templateUrl = encodeURIComponent(
    `https://yoursite.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`
  );
  
  // Most screenshot APIs follow this pattern:
  // Pass your template URL + dimensions, get back an image
  return `https://your-screenshot-api.com/capture?` +
    `url=${templateUrl}` +
    `&width=1200` +
    `&height=630` +
    `&format=png`;
}

Passo 3: Integre em Suas Tags Meta

No <head>da sua página, defina dinamicamente a imagem OG:

// Next.js example (pages/_app.js or layout.tsx)
import Head from 'next/head';

export default function BlogPost({ post }) {
  const ogImage = getOgImageUrl(post.title, post.author);
  
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:title" content={post.title} />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your content */}</article>
    </>
  );
}

Passo 4: Adicione Cache (Importante!)

Você não quer acionar a API toda vez que o rastreador do Twitter verificar sua página. Configure uma camada de cache:

// Edge function example (Vercel/Cloudflare)
export default async function handler(req) {
  const { title, author } = req.query;
  
  // Call your screenshot API
  const screenshotUrl = buildScreenshotUrl({
    url: `https://yoursite.com/og-template?title=${title}&author=${author}`,
    width: 1200,
    height: 630,
    format: 'png'
  });
  
  const response = await fetch(screenshotUrl);
  const imageBuffer = await response.arrayBuffer();
  
  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=604800', // Cache for a week
    },
  });
}

Agora sua tag meta aponta para seu próprio endpoint, que armazena o resultado em cache:

<meta property="og:image" content="https://yoursite.com/api/og?title=My%20Post&author=John" />

Dicas Profissionais 🔥

Use fontes da web: Google Fonts funcionam muito bem. Apenas certifique-se de que elas sejam carregadas antes que a captura de tela seja acionada.
Adicione sua marca: Logotipos, gradientes, padrões — torne-o reconhecível em um feed.
Mantenha o texto grande: Cartões sociais são frequentemente vistos como miniaturas. 48px+ para títulos.
Teste com validadores: Use o Validador de Cartões do Twitter e o Depurador do Facebook para pré-visualizar.

Exemplos do Mundo Real

Este padrão é usado por alguns dos melhores blogs de desenvolvimento:

Vercel/Next.js: Suas imagens OG incluem o título do post, data e tempo de leitura
GitHub: Cartões de repositório mostram estrelas, forks e descrição
Dev.to: Cartões de artigo com avatar do autor e contagem de reações

Você pode fazer a mesma coisa em 20 minutos com uma API de captura de tela. Nenhuma infraestrutura para manter, nenhum binário do Chromium para lidar.

O Fluxo Completo

// Full working example with error handling
async function generateOgImage(title, author, category) {
  const templateParams = new URLSearchParams({
    title: title.slice(0, 60), // Truncate long titles
    author,
    category: category || 'Blog'
  });
  
  const templateUrl = `https://yoursite.com/og-template?${templateParams}`;
  
  try {
    // Adapt this to your screenshot API of choice
    const response = await fetch(SCREENSHOT_API_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
      },
      body: JSON.stringify({
        url: templateUrl,
        viewport: { width: 1200, height: 630 },
        format: 'png',
        waitUntil: 'networkidle' // Wait for fonts/images to load
      })
    });
    
    if (!response.ok) throw new Error('Screenshot failed');
    
    return await response.arrayBuffer();
  } catch (error) {
    console.error('OG generation failed:', error);
    // Return a fallback image
    return fetch('https://yoursite.com/default-og.png').then(r => r.arrayBuffer());
  }
}

Por Que Usar uma API de Captura de Tela em Vez de Auto-Hospedagem?

Você poderia executar o Puppeteer você mesmo. Mas veja como isso se parece:

Imagens Docker de 600MB+ com Chromium
Picos de memória que travam seu servidor
Processos zumbis assombrando seus contêineres
Problemas de renderização de fontes em diferentes ambientes

Ou você poderia simplesmente... não. Uma API de captura de tela lida com tudo isso, e você paga por captura de tela em vez de por hora de servidor. Para a maioria dos sites, isso é dramaticamente mais barato.

Começar

Pronto para tornar seus compartilhamentos sociais mais profissionais? Confira o Snapopa para uma API de captura de tela criada especificamente para este caso de uso. Você terá imagens OG dinâmicas funcionando em menos de 30 minutos.

Seu jogo no Twitter está prestes a subir de nível. 📈