How to Generate Dynamic OG Images with an API

Open Graph images are the single biggest lever for improving click-through rates on social media. Yet most developers still create them manually in Figma or skip them entirely. Here's how to automate the entire process with a single API call.

The Problem with Manual OG Images

Every time you publish a blog post, launch a landing page, or create a product page, you need a social preview image. This is the card that appears when someone shares your URL on Twitter, LinkedIn, Slack, or Facebook.

The standard workflow looks like this:

1. Open Figma or Canva
2. Create a 1200×630 image with your title and branding
3. Export as PNG
4. Upload to your CMS or static assets
5. Add the URL to your <meta> tags

For one page, that's fine. For a blog with 50+ posts, a docs site with hundreds of pages, or a SaaS with dynamic content—it's unsustainable.

The API Approach

Instead of creating images manually, you define them as parameters in a URL. The API generates the image on the fly and returns a PNG.

Here's what that looks like with OGPeek:

<meta property="og:image"
  content="https://ogpeek.com/api/v1/og
    ?title=How+to+Generate+Dynamic+OG+Images
    &subtitle=The+2026+Developer+Guide
    &template=gradient
    &theme=midnight
    &brandColor=%23FF7A00" />

That single line generates this image:

No Figma. No manual export. No upload step. The image is generated when the social platform requests it.

How OG Image Generation Works

Under the hood, modern OG image APIs use SVG-native rendering instead of headless browsers. Here's why that matters:

• Headless browser approach (Puppeteer/Playwright): Spin up Chrome, render HTML, take a screenshot. Slow (~2-5 seconds), resource-heavy, fragile.
• SVG-native approach (Satori + resvg): Convert a layout description directly to SVG, then rasterize to PNG with a Rust-based renderer. Fast (~150-200ms), lightweight, reliable.

OGPeek uses the SVG-native approach. Your request hits the API, Satori generates SVG from the template + parameters, resvg converts it to a 1200×630 PNG, and you get the image back in under 200ms.

Step-by-Step Integration

1. Choose Your Template

OGPeek ships with four templates designed for different use cases:

• basic — Clean, centered text on a solid background
• gradient — Eye-catching gradient backgrounds with prominent typography
• split — Two-tone layout with a colored sidebar
• hero — Bold, high-contrast design for maximum visual impact

2. Pick a Theme and Brand Color

Each template supports five built-in themes (dark, light, midnight, forest, sunset) and a custom brandColor parameter for exact brand matching.

3. Add to Your HTML

The simplest integration is a direct URL in your meta tags:

<meta property="og:image"
  content="https://ogpeek.com/api/v1/og?title=YOUR_TITLE&template=gradient&theme=dark" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

4. Dynamic Titles (Server-Side)

For blogs and dynamic pages, inject the title server-side:

// Next.js example
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://ogpeek.com/api/v1/og?title=${
        encodeURIComponent(post.title)
      }&template=gradient&theme=midnight`],
    },
  };
}

5. Use POST for Paid Features

The free GET endpoint adds a small watermark. For watermark-free images at higher volume, use the POST endpoint with an API key:

curl -X POST "https://ogpeek.com/api/v1/og" \
  -H "x-api-key: ogp_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{"title":"My Post","template":"gradient","theme":"midnight"}' \
  --output og.png

When to Use an OG Image API

An API approach makes sense when:

• You have more than 10 pages that need unique OG images
• Your content is dynamic (blog posts, user profiles, product pages)
• You want consistent branding without manual design work
• You're building a SaaS where users generate shareable content

If you have a single landing page, manual design is fine. For everything else, automate it.

OGPeek vs. Alternatives

Here's how OGPeek compares to other options in the market:

• Bannerbear ($49+/mo) — Full-featured but expensive. Enterprise-oriented with template editor.
• Placid ($29+/mo) — Visual template builder. More complex, higher price floor.
• Vercel OG (free, self-hosted) — Great if you're on Vercel. Requires your own code and hosting.
• OGPeek (free / $9 / $29) — Simple API, no setup, no hosting. Works everywhere.

Conclusion

Dynamic OG image generation removes one of the most tedious parts of shipping content. Instead of context-switching to a design tool for every page, you define your social preview as code and let the API handle rendering.

The result: consistent, branded social cards across your entire site, generated on demand, for a fraction of the cost of enterprise tools.