Og Image Generator

OG Image Generator

Generate Open Graph images — the 1200x630px preview cards that appear when links are shared on social platforms. Pages with unique, well-designed OG images get 2–3x more clicks than bare URL links.

This skill's core is content-aware generation: extracting meaning from the page, matching a visual style, and producing an image that reflects the actual content — not just filling a template with a title.

When to Use

• User needs 1200×630px (1.91:1) images for Facebook, LinkedIn, Slack, Discord, WhatsApp, Telegram, Pinterest, iMessage, or QQ
• User mentions og:image, Open Graph, social share image, link preview image, or dynamic/programmatic OG generation
• User wants Satori JSX templates, AI image generation, or a content-aware workflow that extracts page meaning into a visual card
• User needs one of the six visual styles (Terminal, Magazine, Swiss, Pixel, Brutalist, Newspaper)

When NOT to Use

• Twitter/X Card images (1200×675, 2:1) — use twitter-card-image-generator instead
• Only setting HTML meta tags (not creating the image file) — use open-graph from marketing-skills
• No-code visual editor or hosted API — use Oginify instead of running an agent pipeline

When invoking: On first use, open with 1–2 sentences on what this skill covers and why it matters, then go directly to the generation approach that best fits the user's needs. On subsequent use or when the user asks to skip, go directly to the main output.

1. Six Generation Approaches

These are six fundamentally different ways to produce an OG image. They answer "how does an image get made?" — orthogonal to "what does the image look like?" (which §3 Style System answers).

1.1 AI Image Generation (Core #1)

Use an external AI image model to generate the OG image directly from a prompt. This is the most flexible approach — no template code, no font files, no layout engine. The model handles composition, color, and visual hierarchy in one shot.

When this is the right choice: Visual-first pages where the image's aesthetic matters more than exact text — game pages, design portfolios, brand launches, lifestyle content, event announcements. Also good for pages that need a highly specific visual mood that's hard to encode in code-based templates.

When it's NOT: When the OG image must contain precise, error-free text (product names, technical terms, Chinese characters). AI models struggle with text rendering — misspellings, garbled characters, or missing words are common.

Tools and their strengths:

| Tool | Text accuracy | Aesthetic quality | Speed | Chinese text | Best for | |------|-------------|-------------------|-------|-------------|----------| | GPT Image 2.0 (GPT-4o image) | Highest | High | 5–15s | Moderate | Text-heavy OG, complex layouts, multimodal understanding | | Flux (Black Forest Labs) | Moderate | Highest | 3–8s (API) | Weak | Visual quality priority, open-source flexibility | | Nano Banana | Low | Good | 2–5s | Weak | Fast iteration, budget-friendly, simple compositions | | DALL-E 3 | Moderate | High | 5–10s | Weak | Photorealistic scenes, illustration style | | Midjourney | N/A (no API) | Highest | 30–60s | N/A | Inspiration, one-off high-quality images |

Prompt strategy for OG images: Three-part structure:

Part 1 — Visual description: background, composition, mood, lighting
Part 2 — Text specification: EXACT text to display, in quotes, with font size hints
Part 3 — Technical constraints: "1200x630px, clean legible text, no edge clutter"

Example:

A dark navy gradient background with subtle grid lines. A bold white title reads "Best AI Image Generators 2026" centered at 60pt. Small label "alignify.co" in bottom-right corner. Clean, modern, minimal. 1200x630px social card. No decorative elements near edges.

The hybrid approach (recommended): AI generates the background/atmosphere; code-based rendering (Satori, §1.3) overlays the text. This gives you AI's visual quality + code's text precision. Especially important for Chinese text where AI models still struggle.

1.2 Agent-Native Content-Aware Workflow v3 (Core #2)

This is not a rendering technology — it's a 9-step decision-making workflow. The Agent classifies the page, determines priority (S/A/B/C), matches style using a 3D matrix, selects the right pipeline, and drives generation end-to-end.

PHASE 1 — Classify & Decide (NEW in v3)

1. CLASSIFY THE PAGE
   → Determine page type from URL pattern + content signals:
     /blog/*, /post/* → blog_post
     /pricing → pricing
     /docs/* → docs
     (Full taxonomy: references/content-strategy.md — 100+ types in 13 categories)
   
   → Detect site type:
     Has pricing/feature/SaaS → SaaS
     Has product grid/cart → eCommerce
     Has byline/reading time → Content/Media
     (Full taxonomy: references/content-strategy.md — 35 types)

2. DETERMINE PRIORITY (NEW)
   → Query content-strategy.md S/A/B/C table:
     S (Must-do): blog_post, changelog, research_report, campaign_landing...
     A (High): homepage, pricing, feature_page, comparison, event_page...
     B (Medium): about, docs, author_page, category, integration...
     C (Skip): login, cart, checkout, dashboard, privacy, terms, 404, contact...
   
   → IF C-level: STOP. Report "This page type rarely gets shared. Use one brand-default
     1200×630 image instead. Proceed anyway? [y/N]"
   → IF B-level: If >5 B pages → template batch strategy. If ≤5 → treat as A.
   → IF A/S-level: Continue to full workflow.

3. EXTRACT CONTENT WITH CONTEXT (enhanced)
   → Extract: title (1-2 lines), subtitle, THE ONE most interesting data point,
     date, author, category tags, hero image URL, brand colors, content tone
     (technical/narrative/data_heavy/playful/urgent/premium/raw)
   → Output: ContentProfile { title, subtitle, dataPoint, meta, visualCandidates, tone }

PHASE 2 — Match Style & Build Recipe (enhanced)

4. MATCH STYLE (3D multi-axis, replacing old tone-only mapping)
   → Call selectStyle(pageType, siteType, contentTone)
     Algorithm in references/style-system-v3.md §Style Selection Algorithm
   → Uses 16×100 page-type matrix + 16×35 site-type matrix
   → Output: { primary, variants[2-3], avoid[] }
   
   Example: SaaS pricing page → Swiss Minimal (score:7), Neo-Swiss Gradient (5), Bento Grid (4)
            Avoid: Grunge, Vaporwave, Pixel Retro

5. BUILD VISUAL RECIPE (NEW)
   → For the selected (style, pageType) combo, query style-system-v3.md:
     - Required elements (must_include)
     - Recommended elements (adds value)
     - Forbidden patterns (style-breaking)
     - Layout wireframe (ASCII)
     - Color preset
     - Font config
     - Agent check checklist
   → Output: VisualRecipe

6. SELECT PIPELINE (NEW — dual pipeline decision)
   → Satori pipeline (layout styles #1-10): zero cost, instant, text-perfect
   → AI pipeline (texture styles #11-16): ~$0.067/img, 5-15s, visual quality
   → Hybrid (AI bg + Satori text): best quality + perfect text accuracy
   → Decision tree: references/pipeline-guide.md

PHASE 3 — Generate & Validate

7. GENERATE
   → If Satori: copy seed template from templates/{style}.tsx, fill with ContentProfile
   → If AI: build prompt from VisualRecipe.aiPromptTemplate, call AI model
   → If Hybrid: AI generates background → Satori overlays text from ContentProfile

8. VALIDATE (enhanced)
   → Run pre_flight checks (§9): page classification, priority, pipeline choice
   → Run style-specific checks from VisualRecipe.agentChecks
   → Run standard Agent YAML checks (§9)

9. SUGGEST NEXT ACTIONS (NEW)
   → If ≥2 variants generated: "These styles differ enough for A/B testing"
   → If S-level page: "Consider regenerating when content updates"
   → Deployment path: WordPress(Featured Image), Next.js(opengraph-image.png), etc.

1.3 Satori + resvg (Code-based generation)

The most widely adopted code-based approach. JSX → Satori → SVG → resvg → PNG. Edge-compatible, 100–500ms render time.

When to use: Text must be pixel-perfect. Works on Next.js, Cloudflare Workers, Vercel Edge, any JS runtime.

Quick implementation (Next.js App Router):

// app/og/route.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default Title';

  return new ImageResponse(
    (
      
        
        {title}
        yoursite.com
      
    ),
    { width: 1200, height: 630 },
  );
}

For Satori CSS limitations, see [references/satori-constraints.md](references/satori-constraints.md).

1.4 Puppeteer / Playwright

Headless browser screenshot. Full CSS, JavaScript, Canvas, WebGL. 1–3s render, ~300MB Chromium binary. Cannot run on Edge.

When to use: CSS Grid layouts, Canvas charts, WebGL backgrounds, complex CJK font shaping.

import puppeteer from 'puppeteer';

async function generateOgImage(html: string): Promise {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1200, height: 630 });
  await page.setContent(html);
  const screenshot = await page.screenshot({ type: 'png' });
  await browser.close();
  return Buffer.from(screenshot);
}

1.5 Managed Services

API-based, no rendering pipeline to maintain:

| Service | Best for | |---------|----------| | OG Kit | Visual template editor, non-developers | | Cloudinary | Already using Cloudinary for images | | Vercel OG | Already on Vercel, wraps Satori | | imgix | Enterprise, URL-based image manipulation |

1.6 JSON Config (declarative)

Define OG images as JSON. @zyrab/domo-og is the leading library — WASM-powered, edge-compatible.

{
  "width": 1200, "height": 630,
  "background": "#1a1a2e",
  "elements": [
    { "type": "text", "content": "{{title}}", "fontSize": 60, "color": "#fff" }
  ]
}

When to use: OG config lives in a CMS, non-developers maintain, simple text-only templates.

1.7 Page Priority Decision (NEW in v3)

The FIRST question is not "what style?" but "should I generate at all?"

Decision flow:

Classify page type (100+ types, see content-strategy.md §2)
  → S-level: blog_post, changelog, research_report, campaign_landing, newsletter_issue...
  → A-level: homepage, pricing, feature_page, comparison, event_page, product_detail, waitlist...
  → B-level: about, docs, author_page, category, integration, template, tutorial, podcast...
  → C-level: login, signup, cart, checkout, dashboard, billing, privacy, terms, 404, contact...

IF C-level → STOP. Suggest one brand-default 1200×630 image for entire site.
IF B-level AND site has >5 B pages → recommend template batch strategy.
IF A/S-level → proceed with full content-aware workflow (§1.2).

Platform built-in OG check: Before generating, verify the user's platform doesn't already auto-generate adequate OG images. Platforms with built-in OG: Vercel, Next.js (ImageResponse), WordPress (Jetpack), Ghost, Substack, Medium, GitHub, Framer, Webflow, Notion, Dev.to, Hashnode. If the platform's built-in OG is good enough → skip. If not → generate.

Site-type priority modifier: Content/Media, News, DevTool, Personal/Portfolio sites → boost all B-level pages to A (their traffic relies on social sharing). Healthcare, Government, FinTech → suppress aggressive styles.

See [references/content-strategy.md](references/content-strategy.md) for the full priority framework.

1.8 Pipeline Selection (NEW in v3)

Two rendering pipelines, chosen based on the selected style:

| Pipeline | Styles | Speed | Cost | Text Accuracy | Best For | |----------|--------|-------|------|---------------|----------| | Satori | #1-10 (layout styles) | 100-500ms | $0 | 100% perfect | Swiss, Terminal, Brutalist, Neo-Brutalism, Bento, Newspaper... | | AI | #11-16 (texture styles) | 5-15s | ~$0.067/img | ~80-95% | Text Overlay, Cinematic, Collage, Risograph, Vaporwave, Grunge | | Hybrid | #11-16 recommended | 5-15s | ~$0.067/img | 100% perfect | AI generates background/texture → Satori overlays pixel-perfect text |

Decision rule: See [references/pipeline-guide.md](references/pipeline-guide.md) for the complete decision tree, AI prompt templates per style, and hybrid implementation patterns.

Hybrid is the default recommendation for all texture styles (#11-16) when CJK text or product names must be exact. AI generates the atmosphere/photo/texture; Satori renders the text — combining AI's visual quality with code's text precision.

2. Typography

See [references/typography.md](references/typography.md) for the complete OG image typography guide: font philosophy, pairing formulas, type scale (Perfect Fourth 1.333), weight assignments, CJK-specific rules, and line-length constraints.

Key constraints enforced across all styles:

• Minimum font size: 24px at 1200px canvas width
• Title: 56–128px depending on character count and style
• Body/secondary: 28–42px
• Labels/meta: 20–28px
• Chinese titles: ≤20 characters per line
• English titles: ≤15 words per line

3. Style System — 20 Visual Styles

See [references/style-system-v3.md](references/style-system-v3.md) for the complete design system with 20 styles, pipeline compatibility, style×page-type matrix (20×100), and style×site-type matrix (20×35). The legacy [references/style-system.md](references/style-system.md) is retained for reference on original 6 styles.

Layout-Type Styles (Satori-Native, #1-10)

Zero-cost, instant rendering, 100% text accuracy.

| # | Style | Template | Pipeline | Signature | |---|-------|----------|----------|-----------| | 1 | Terminal / CLI | [terminal.tsx](templates/terminal.tsx) | Satori | $> prompts, monospace, green-on-black | | 2 | Magazine Editorial | [magazine.tsx](templates/magazine.tsx) | Satori | Serif display, paper tones, pull quotes | | 3 | Swiss Minimal | [swiss.tsx](templates/swiss.tsx) | Satori | Inter light, single accent, left grid | | 4 | Pixel Retro | [pixel.tsx](templates/pixel.tsx) | Satori | Press Start 2P, 8-bit palette, HUD | | 5 | Brutalist | [brutalist.tsx](templates/brutalist.tsx) | Satori | B&W, max-bold, zero radius | | 6 | Newspaper | [newspaper.tsx](templates/newspaper.tsx) | Satori | Multi-column, serif titles, dateline | | 7 | Neo-Brutalism | [neo-brutalism.tsx](templates/neo-brutalism.tsx) | Satori | Clash colors, 6px borders, hard shadow | | 8 | Bento Grid | [bento-grid.tsx](templates/bento-grid.tsx) | Satori | Asymmetric cards, dark glow, 14px radius | | 9 | Neo-Swiss Gradient | [neo-swiss-gradient.tsx](templates/neo-swiss-gradient.tsx) | Satori | Warm gradient, Inter 200, hairline rules | | 10 | Dark Gradient+Texture | [dark-gradient-texture.tsx](templates/dark-gradient-texture.tsx) | Satori | Radial glow, dot-grid, glowing line |

Texture-Type Styles (AI/Hybrid, #11-16)

Require AI for full effect. Hybrid (AI bg + Satori text) recommended for text accuracy.

| # | Style | Template | Pipeline | Signature | |---|-------|----------|----------|-----------| | 11 | Text Overlay | [text-overlay-hybrid.tsx](templates/text-overlay-hybrid.tsx) | Hybrid | Photo bg + dark mask + bold white title | | 12 | Cinematic | [cinematic.tsx](templates/cinematic.tsx) | AI+Hybrid | Film grading, bokeh, grain, lower-third title | | 13 | Collage | [collage.tsx](templates/collage.tsx) | AI+Hybrid | Torn edges, tape, polaroids, layered panels | | 14 | Risograph | [risograph.tsx](templates/risograph.tsx) | AI+Hybrid | 2-3 colors, halftone dots, ink offset | | 15 | Vaporwave | [vaporwave.tsx](templates/vaporwave.tsx) | AI+Hybrid | Neon sunset, statues, CRT scanlines, glitch | | 16 | Grunge | [grunge.tsx](templates/grunge.tsx) | AI-Native | Noise grain, photocopy tex

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: kostja94
• Source: kostja94/social-cards-skills
• License: MIT
• Homepage: https://oginify.com

Install and usage instructions live in the source repository linked above.