Dynamic OG Images via API: The Modern Approach to Social Previews

The Evolution of OG Image Generation

Open Graph images have gone through three eras. First, manual design — creating each image in Figma or Canva. Then, build-time generation using tools like Puppeteer or Satori to render images during CI/CD. Now, the modern approach: API-first dynamic generation.

The API approach is winning because it eliminates the two biggest pain points: build complexity and maintenance burden.

Comparing Approaches

Manual Design (Canva, Figma)

• ✅ Full creative control
• ❌ Doesn't scale (1 image = 5-10 min of work)
• ❌ Inconsistent if multiple people create images
• ❌ No automation possible

Build-Time Generation (Puppeteer, Satori, @vercel/og)

• ✅ Automated and consistent
• ❌ Adds build complexity and time
• ❌ Requires maintaining JSX/HTML templates in code
• ❌ Font loading and rendering quirks
• ❌ Framework-specific (each framework needs different setup)

API-First Generation (OGMagic approach)

• ✅ Zero build complexity — just a URL
• ✅ Framework-agnostic (same URL works everywhere)
• ✅ Professional templates without CSS debugging
• ✅ Instant — no build step needed
• ✅ Edge-cached globally for fast delivery
• ✅ No dependencies to install or maintain

How API-Based OG Image Generation Works

The concept is simple: instead of generating images yourself, you construct a URL with parameters (title, description, template), and the API returns a PNG image. Social media crawlers fetch this URL when someone shares your link.

<!-- Your HTML -->
<meta property="og:image" 
  content="https://ogmagic.dev/api/og?title=My+Blog+Post&template=minimal-dark&domain=myblog.dev" />

<!-- The API returns a 1200×630 PNG image -->
<!-- Cached globally, served from the edge -->

The API handles all the complexity: template rendering, font loading, text wrapping, image optimization, and CDN caching. You just build a URL.

Use Cases

Blog Posts

Each blog post gets a unique OG image based on its title and description. No manual work per post.

const ogImage = `https://ogmagic.dev/api/og?${new URLSearchParams({
  template: "minimal-dark",
  title: post.title,
  description: post.excerpt,
  domain: "myblog.dev",
}).toString()}`;

SaaS Product Pages

Feature pages, pricing pages, and landing pages each get branded previews:

https://ogmagic.dev/api/og?template=gradient-mesh&title=Feature+Name&description=One+line+description&domain=myapp.com

Documentation Sites

Auto-generate OG images for every docs page based on the section title:

https://ogmagic.dev/api/og?template=clean-white&title=API+Reference&description=Complete+endpoint+documentation&domain=docs.myapp.com

E-commerce / Marketplaces

Product pages, category pages, and user profiles can all have dynamic previews without storing thousands of image files.

Implementation Guide

Here's how to add dynamic OG images to any website in under 5 minutes:

Step 1: Choose a Template

Browse templates at ogmagic.dev/editor or check the docs. Free tier includes 5 templates.

Step 2: Build Your URL Pattern

function ogImageUrl(title: string, description?: string) {
  const params = new URLSearchParams({
    template: "gradient-mesh",
    title,
  });
  if (description) params.set("description", description);
  params.set("domain", "yoursite.dev");
  return `https://ogmagic.dev/api/og?${params.toString()}`;
}

Step 3: Add Meta Tags

<meta property="og:image" content={ogImageUrl("Page Title", "Page description")} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={ogImageUrl("Page Title", "Page description")} />

Performance & Caching

A common concern with API-generated images: "Won't it be slow?" No — and here's why:

• Edge caching: Images are cached at Vercel's global edge network. After the first request, subsequent fetches are served from cache in <50ms.
• Immutable URLs: The same URL always produces the same image, so CDN caching is maximally effective.
• Social crawlers are patient: Twitter, Facebook, and LinkedIn crawlers wait several seconds for og:image. Even uncached requests (200-500ms) are well within their timeout.

Conclusion

API-first OG image generation is the modern approach because it's simpler, faster to implement, framework-agnostic, and zero-maintenance. If you're still manually creating OG images or fighting with build-time generation, it's time to switch.

Get started with OGMagic — 55+ templates, free tier with 50 images/month, $12 one-time Pro.