Dynamic OG Images: How to Generate Social Previews Automatically

A dynamic OG image is a social preview image generated programmatically from page data, rather than manually designed in a tool like Figma or Canva.

Instead of creating a unique image for every blog post, product page, or documentation page, you define a template once and generate images on the fly from the page title, description, author, date, or any other data.

This is essential for sites with dozens or hundreds of pages where manual design doesn't scale.

1. API-Based Generation (Recommended)

Send your data to an API endpoint and receive a PNG image. No infrastructure to manage, no server-side rendering.

// Just set your og:image meta tag to:
https://ogimg.xyz/api/og?title=My+Blog+Post&template=gradient&pattern=dots

Pros: Fastest setup (minutes), no dependencies, edge-rendered in <200ms
Cons: Less customization than self-hosted solutions
Best for: Blogs, landing pages, SaaS products, documentation sites

2. Satori + @vercel/og (Self-Hosted)

Vercel's open-source library renders React/JSX components to SVG, then converts to PNG. Runs on Edge Runtime.

import { ImageResponse } from '@vercel/og';

export async function GET(request: Request) {
  return new ImageResponse(
    <div style={{ display: 'flex' }}>Hello World</div>,
    { width: 1200, height: 630 }
  );
}

Pros: Full control over design, free, open source
Cons: Limited CSS support (no box-shadow, no position:absolute), must self-host
Best for: Developers who want full control and are already on Vercel

3. Headless Chrome / Puppeteer

Render a full HTML page in a headless browser and take a screenshot.

Pros: Any CSS/HTML works, pixel-perfect rendering
Cons: Slow (1-5 seconds per image), heavy infrastructure, expensive at scale
Best for: Complex designs that require full CSS support

The fastest way to add dynamic OG images to your site:

1. Sign up at ogimg.xyz (free, no credit card)
2. Get your API key from the dashboard
3. Set your og:image meta tag to point to the API with your page data
4. Test with Twitter Card Validator or Facebook Sharing Debugger

That's it — no npm packages, no build steps, no server infrastructure. Your OG images are generated on Vercel's Edge Network in under 200ms worldwide.