Criador de Imagens OG

O que Criador de Imagens OG faz?

Gere imagens Open Graph autênticas e alinhadas à marca, entendendo primeiro seu código-fonte e depois criando imagens contextualmente apropriadas para cada rota usando Playwright e seus componentes existentes.

Filosofia: Autêntico acima de Template

Antes de gerar imagens OG, pergunte:

• Qual é a identidade visual do site (cores, fontes, logotipo, linguagem de design)?
• Quais rotas/páginas existem e quais são seus propósitos?
• Quais componentes e assets podem ser reutilizados para consistência?
• Que tipos de página precisam de tratamentos visuais diferentes?

Princípios fundamentais:

1. Estude antes de gerar: Entenda a estrutura do código, roteamento e marca antes de criar algo
2. Autenticidade acima de templates: Use cores, fontes e componentes reais da marca — não templates genéricos de cartão social
3. Design consciente do contexto: Landing pages, artigos, produtos e documentação precisam de abordagens visuais diferentes
4. Automação inteligente: Detecte rotas automaticamente e extraia a marca, mas permita personalização do usuário

Fluxo de Trabalho

1. Descobrir e Analisar

Descoberta de rotas:

• Analise a estrutura do projeto para determinar o framework (Next.js, Astro, React, etc.)
• Detecte automaticamente as rotas com base nas convenções do framework:
  • Next.js: app/*/page.tsx ou pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: Analise a configuração de rotas
• Extraia metadados das páginas (título, descrição)
• Categorize os tipos de página (landing, artigo, produto, sobre, etc.)

Extração da marca:

• Encontre arquivos de logotipo/ícone (SVG preferencialmente)
• Extraia a paleta de cores do CSS/configuração do Tailwind
• Identifique as fontes primárias das folhas de estilo ou configuração
• Capture padrões de design dos componentes existentes

Use scripts/analyze_codebase.py para automatizar a descoberta.

2. Estratégia de Design

Determine layouts apropriados por tipo de página:

• Landing pages: Negrito, minimalista, enfatize a proposta de valor
• Artigos/Posts de blog: Título + trecho, data/autor se relevante
• Páginas de produto: Nome do produto, recurso principal, visual se disponível
• Documentação: Tópico + descrição, sensação organizada/estruturada
• Sobre/Empresa: Foco na marca, profissional

Princípios de layout:

• Espaçamento generoso (evite poluição visual)
• Alto contraste para legibilidade quando compartilhado
• Cores da marca como acentos, não avassaladoras
• Hierarquia tipográfica que corresponda ao site
• 1200x630px (dimensões padrão OG)

3. Gerar Imagens

Geração baseada em componentes:

• Reutilize componentes React quando possível para consistência
• Use Playwright para renderizar componentes em imagens
• Aplique cores, fontes e assets da marca
• Injete metadados reais da página (não placeholders)

Abordagem técnica:

1. Crie um template HTML mínimo com estilos da marca
2. Para cada rota, gere marcação específica da página
3. Use Playwright para capturar uma screenshot em 1200x630
4. Salve em public/og/ ou diretório estático apropriado
5. Atualize os metadados da página para referenciar a imagem OG

Use scripts/generate_og_images.py para automação.

4. Verificar e Otimizar

• Valide os metadados da imagem OG no HTML
• Teste com ferramentas de pré-visualização OG (opengraph.xyz, linkedin inspector)
• Garanta que os tamanhos dos arquivos sejam razoáveis (<200KB preferencialmente)
• Verifique a aparência da imagem em diferentes escalas

Diretrizes Específicas por Framework

Next.js

App Router:

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router:

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

Imagens OG dinâmicas: Considere a Geração de Imagens OG do Next.js (@vercel/og) para conteúdo dinâmico, mas use geração estática para consistência da marca.

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPAs

Adicione tags OG ao public/index.html ou use react-helmet:

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

Anti-Padrões a Evitar

❌ Templates genéricos: Não use modelos de cartão social prontos que ignoram a marca do site

• Por que é ruim: Cria uma desconexão entre o site e a experiência de compartilhamento social
• Melhor: Extraia cores, fontes reais da marca e use-as consistentemente

❌ Tamanho único: Não use o mesmo design de imagem OG para todos os tipos de página

• Por que é ruim: Perde a oportunidade de uma apresentação contextualmente apropriada
• Melhor: Layouts diferentes para landing, artigos, produtos, etc.

❌ Conteúdo placeholder: Não use "Lorem ipsum" ou texto genérico

• Por que é ruim: Anula o propósito das imagens de pré-visualização
• Melhor: Use títulos e descrições reais das páginas obtidos dos metadados

❌ Superlotação: Não amontoe muito texto, muitas imagens ou layouts complexos

• Por que é ruim: Ilegível quando reduzido em feeds sociais
• Melhor: Foco em 1-2 elementos-chave com espaçamento generoso

❌ Ignorar componentes: Não crie imagens OG do zero se existirem componentes

• Por que é ruim: Quebra a consistência visual com o site
• Melhor: Reutilize estilos de botão, layouts de cartão, tipografia dos componentes

❌ Geração manual: Não crie imagens OG uma a uma manualmente

• Por que é ruim: Não escalável, difícil manter consistência
• Melhor: Automatize o processo de geração para lidar com todas as rotas

Diretrizes de Variação

IMPORTANTE: As imagens OG devem variar com base no contexto da página, e não convergir para um único design.

Dimensões a variar:

• Layout: Centralizado vs alinhado à esquerda, coluna única vs dividida, foco em texto vs visual
• Ênfase de cor: Cor primária da marca vs neutra, gradiente vs sólida
• Hierarquia de conteúdo: Título grande vs título+descrição balanceados
• Elementos visuais: Tamanho/posição do logotipo, elementos decorativos, ícones
• Tipografia: Proporções de tamanho, distribuição de peso, combinação de fontes

Evite convergir para:

• Mesmo fundo gradiente para tudo
• Layout idêntico de "título + logotipo"
• Proporção única de tamanho de fonte
• Posição fixa do logotipo

O contexto dita a variação:

• Documentação técnica → Limpo, organizado, baseado em ícones
• Landing de marketing → Negrito, colorido, foco no valor
• Artigos de blog → Amigável ao leitor, contexto de autor/data
• Páginas de produto → Ênfase visual no produto

Requisitos Técnicos

Dependências (instale conforme necessário):

npm install playwright sharp
# ou
pip install playwright Pillow

Configuração do Playwright:

playwright install chromium

Estrutura de arquivos:

projeto/
├── public/og/          # Imagens OG geradas
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # Scripts de geração
    ├── analyze_codebase.py
    └── generate_og_images.py

Lembre-se

Imagens OG são uma extensão da sua marca, não cartões sociais genéricos.

Estude o código para entender a linguagem de design. Extraia a identidade da marca. Use componentes e conteúdo reais. Crie imagens contextualmente apropriadas que pareçam nativas do site.

Quando alguém compartilhar sua página, a imagem OG deve parecer uma prévia natural — não um template aplicado por cima.

Você é capaz de criar imagens OG sofisticadas e alinhadas à marca que melhoram, em vez de prejudicar, a identidade do site.