Generate OG Images Programmatically 2026 — Code Guide + API

Open Graph (OG) images are the 1200x630 thumbnails that appear when someone shares your link on Twitter, Facebook, LinkedIn, Slack, WhatsApp, or iMessage. In 2026, the bar for OG images is high — every blog and SaaS now generates them dynamically per page. This guide covers the three production approaches and when to use each.

Why programmatic OG images matter

Static OG images (one shared image for the whole site) are dead. Search engines and social platforms reward sites that generate per-page OG images that include the post title, the author, and the brand. The result: 2-3x higher click-through rates from social shares, and a measurable boost in branded search.

The problem: rendering 1200x630 images at request time, at scale, with custom fonts and per-post text, used to require a Node server with Puppeteer and a headless Chrome. That is slow (1-3 seconds per image) and expensive. The 2026 approach uses edge runtimes and SVG-based rendering instead.

Approach 1: Edge SVG generation (recommended)

The fastest, cheapest method: render your OG image as an SVG string on the edge (Cloudflare Workers, Vercel Edge), then optionally rasterize to PNG. SVG generation is essentially free — you are concatenating strings.

// Cloudflare Worker — pseudo-code
export default {
  async fetch(req) {
    const url = new URL(req.url);
    const title = url.searchParams.get('title');
    const svg = `<svg width="1200" height="630">...</svg>`;
    return new Response(svg, {
      headers: { 'Content-Type': 'image/svg+xml' }
    });
  }
}

Latency: 5-30ms. Cost: ~$0 on Cloudflare's free tier. Crawler compatibility: Twitter and LinkedIn render SVG OG images correctly. Facebook and iMessage occasionally do not — solve by also rasterizing to PNG.

This is exactly the approach og.hjlabs.in uses. Try the live tool and copy the URL pattern.

Approach 2: Vercel OG / Satori (React-based)

Vercel's @vercel/og library uses Satori to convert React JSX into SVG, then PNG. This is the gold standard for design flexibility — you write a React component and it becomes an OG image.

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(req) {
  const { searchParams } = new URL(req.url);
  return new ImageResponse(
    <div>{searchParams.get('title')}</div>,
    { width: 1200, height: 630 }
  );
}

Latency: 80-300ms (Satori has to load fonts and rasterize). Cost: Vercel charges per edge function invocation. Crawler compatibility: excellent — outputs PNG.

Use this when: you have a Next.js app already, you need pixel-perfect typography control, you want JSX-driven layouts.

Approach 3: Headless browser (legacy)

Puppeteer or Playwright in a serverless function takes a screenshot of an HTML page. Works fine but is slow (1-3s) and expensive (large container images). Use this only if you need full CSS3, web fonts via @font-face, or animations rendered to a static frame.

The fonts problem

Custom fonts are the hardest part of OG image generation. Edge runtimes do not have system fonts; you must ship the font as a binary asset and load it at boot.

• SVG approach: reference a Google Fonts URL — but this only works if the social crawler downloads referenced fonts (it usually doesn't, so text falls back to default sans-serif). Better: embed the font file as base64 in the SVG.
• Satori approach: ship the font as a .ttf in your assets, load it via fetch, pass to ImageResponse.

For most use cases, sticking to system fonts (Inter, system-ui, Helvetica) is the right tradeoff.

The text-overflow problem

Long titles overflow your design. Solutions:

• Truncate at character count — easy but ugly
• Auto-wrap with line-break logic — works for SVG using <tspan>
• Auto-shrink font size — best UX, complex to implement

The og.hjlabs.in templates use auto-wrap with a 3-line cap — covers 95% of cases without lookin' bad.

Caching strategy

OG images are immutable per URL. Set aggressive caching:

Cache-Control: public, max-age=31536000, immutable
CDN-Cache-Control: public, max-age=31536000

Cloudflare's edge will cache and serve subsequent requests in <5ms anywhere in the world. Even if your origin is slow, 99% of social-share traffic hits the cache.

Meta tag boilerplate

Once you have the URL, the meta tags you need on every page:

<meta property="og:image" content="https://og.hjlabs.in/api/og?title=Your+Post">
<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="https://og.hjlabs.in/api/og?title=Your+Post">

Testing your OG images

• Twitter Card Validator — cards-dev.twitter.com/validator
• Facebook Sharing Debugger — developers.facebook.com/tools/debug
• LinkedIn Post Inspector — linkedin.com/post-inspector
• opengraph.xyz — third-party multi-platform preview

Bottom line

For 95% of sites, the right answer in 2026 is: edge SVG generation with optional PNG rasterization, served via a CDN with year-long cache. Don't roll your own — use og.hjlabs.in's URL-based API and ship in 30 seconds.