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

The Evolution of OG Image Generation

You can design Open Graph images manually, render them with a library you host, or create them through a hosted API. The right workflow depends on your design requirements, publishing volume, and where you want to maintain rendering code.

With OGMagic, an authenticated creation request returns a saved public image URL. Use that URL in your metadata so page views and social shares do not trigger a new render.

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
• ❌ Manual exports need a publishing workflow

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
• ❌ You manage rendering and delivery in your chosen environment

API-First Generation (OGMagic approach)

• ✅ Publish a saved public URL after creating the image
• ✅ Framework-agnostic (same URL works everywhere)
• ✅ Professional templates without CSS debugging
• ✅ Create at publication time or in a build script
• ✅ Saved images can be cached separately from creation requests
• ✅ No dependencies to install or maintain

How API-Based OG Image Generation Works

Send your title, description, and template as JSON to the authenticated creation endpoint from your server or publishing script. Save the returned image.url with the content. Social crawlers later fetch that public URL without your API key.

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

The API handles template rendering and image storage. Your integration creates the image before publishing and keeps the returned URL alongside the page. Keep OGMAGIC_API_KEY in a private environment variable.

Use Cases

Blog Posts

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

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

SaaS Product Pages

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

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

Documentation Sites

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

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

E-commerce / Marketplaces

Product pages, category pages, and public profiles can have their own saved previews. Create a new image when the content changes and update the page metadata to its returned URL.

Implementation Guide

Here is the create, save, and publish workflow:

Step 1: Choose a Template

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

Step 2: Create and Save an Image

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

Step 3: Add Meta Tags

<meta property="og:image" content={image.url} />
<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={image.url} />

Performance & Caching

Separate the time spent creating an image from the requests that deliver it:

• Saved delivery: Social crawlers retrieve a stored image instead of invoking authenticated generation.
• Stable URLs: Reuse the returned URL for the saved image. A changed design should be published with its newly returned URL.
• Independent caches: Platforms may keep their own preview cache. Inspect your published page after changing metadata rather than relying on a promised crawler timeout.

Conclusion

A hosted API is useful when ready-made templates fit your design and you want to keep image rendering outside your application. You still need to handle creation failures, save returned URLs, and update metadata when content changes. See the hosted-image documentation for errors and image allowances.

Get started with OGMagic — 55+ templates, free tier with 50 new images per 30 days, €10 / US $12 one-time Pro.