How to Automate OG Image Generation with an API

Why Manual OG Image Creation Does Not Scale

Creating a single OG image in Figma or Canva takes about 5 minutes. That is fine for a homepage or a landing page. But the math stops working quickly: a blog with 100 posts means 8 hours of image work. An e-commerce store with 5,000 products would need weeks of dedicated design time. And every time you rebrand or change your template, you start over from scratch.

Beyond the time cost, manual images create maintenance problems. New team members forget to create them. Image URLs break when files get moved. Designs drift as different people create images over months. The result is inconsistent social previews that undermine your brand.

The Three Approaches to Automated OG Images

1. Headless Browsers (Puppeteer / Playwright)

The headless browser approach renders an HTML page and screenshots it. You design a template in HTML/CSS, spin up a headless Chrome instance, navigate to the template with your content injected, and capture a screenshot.

// Puppeteer approach — works but heavy
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.goto(`http://localhost:3000/og-template?title=${title}`);
const screenshot = await page.screenshot({ type: "png" });
await browser.close();

This works, but it comes with serious downsides. Chromium binaries are 100+ MB, making deployments slow. Each image generation takes 2-5 seconds. You need to manage browser instances, handle crashes, and deal with memory leaks. And serverless platforms have strict binary size limits that make headless browsers difficult or impossible to deploy.

2. Canvas / Image Libraries (Sharp, node-canvas)

You can generate images programmatically using Node.js canvas libraries. This avoids the headless browser overhead but requires you to build layouts in imperative code — positioning text pixel by pixel, loading fonts manually, and handling text wrapping yourself.

// node-canvas approach — lightweight but tedious
const canvas = createCanvas(1200, 630);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#18181b";
ctx.fillRect(0, 0, 1200, 630);
ctx.fillStyle = "#ffffff";
ctx.font = "bold 48px Inter";
ctx.fillText(title, 80, 280);
// ... more manual positioning

const buffer = canvas.toBuffer("image/png");

This approach is faster than headless browsers (50-200ms per image) but the developer experience is poor. Any design change means rewriting layout code, and font rendering quality varies across platforms.

3. OG Image API (Recommended)

An OG image API handles all the complexity for you. You construct a URL with your content as query parameters, and the API returns a perfectly rendered PNG. No infrastructure to manage, no binaries to deploy, no layout code to write.

// That's it. A URL that returns an image.
const ogImageUrl = `https://ogpix-pi.vercel.app/api/og?${new URLSearchParams({
  title: post.title,
  description: post.excerpt,
  theme: "gradient",
  key: process.env.OGPIX_KEY!,
})}`;

Using the OGPix API: Step by Step

Step 1: Get your API key

Sign up on the OGPix dashboard to get a free API key. The free tier includes 1,000 images per month — enough for most blogs and small sites.

Step 2: Construct your image URL

Build the URL using query parameters for your content, theme, and styling options:

const params = new URLSearchParams({
  title: "How to Automate OG Images",
  description: "Generate beautiful social previews with an API",
  theme: "dark",          // dark, light, gradient, or custom
  icon: "rocket",         // optional icon
  key: "og_live_xxx",     // your API key
});

const imageUrl = `https://ogpix-pi.vercel.app/api/og?${params}`;

Step 3: Add to your HTML meta tags

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

Caching and Performance

One concern with dynamic image generation is latency. If every social media crawler triggers a fresh image render, that adds load and can slow down crawling. The OGPix API solves this with aggressive edge caching:

• First request: The image is generated and cached at the edge (typically 50-150ms generation time).
• Subsequent requests: Served directly from the CDN cache with sub-10ms response times.
• Cache invalidation: Change any URL parameter and a new image is generated and cached separately.

This means social media crawlers — which typically make multiple requests to verify the image — get near-instant responses after the initial generation.

Cost Comparison

Here is how the approaches compare for a site with 500 pages that rebrands once a year:

Approach              | Setup Time | Per-Image Cost | Rebrand Cost
----------------------|------------|----------------|-------------
Manual (Figma/Canva)  | None       | ~5 min each    | Start over
Headless Browser      | 2-3 days   | ~$0.01 compute | Template only
Canvas Library        | 1-2 days   | ~$0.001        | Code changes
OG Image API (OGPix)  | 5 minutes  | Free tier avail| URL param change

The API approach wins on every dimension except total control. If you need pixel-perfect custom layouts that go beyond what templates offer, a self-hosted solution may make sense. For everyone else, an API removes the entire problem.

Real-World Integration Example

Here is a complete example for a blog built with any framework. The pattern is the same regardless of whether you use Next.js, Astro, Remix, or plain HTML:

function getOgImageUrl(title: string, description: string) {
  const url = new URL("https://ogpix-pi.vercel.app/api/og");
  url.searchParams.set("title", title);
  url.searchParams.set("description", description);
  url.searchParams.set("theme", "dark");
  url.searchParams.set("key", process.env.OGPIX_KEY!);
  return url.toString();
}

// Use it anywhere
const ogImage = getOgImageUrl(
  "My Blog Post Title",
  "A short description for social previews"
);