Dynamic Open Graph Images: Complete Guide

Manually designing unique social preview images for every page on a website is unsustainable. A blog with 100 articles, an e-commerce store with 10,000 products, or a SaaS platform with dynamic dashboards all need automated OG image generation.

This guide covers every approach to generating Open Graph images dynamically, from edge rendering to template-based solutions.

---

Why Dynamic OG Images Matter

Pages shared without a custom og:image often display generic fallback graphics — or nothing at all. Research consistently shows that posts with custom, on-brand preview images achieve 2–3× higher click-through rates than those with generic or missing images.

For high-scale websites, the only practical solution is dynamic generation.

---

Approach 1: Edge-Rendered HTML-to-Image (Recommended)

The most modern approach renders HTML and CSS directly into PNG images at the CDN edge. This is how Vercel, Cloudflare, and major platforms handle OG images.

How It Works

1. You write an HTML/CSS template for your OG card.
2. When a social crawler requests the OG image URL, an edge function renders the template with dynamic data (title, author, date) and returns a PNG.
3. The response is cached at the CDN edge for subsequent requests.

Next.js Example (@vercel/og)

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export default async function Image({ params }) {
  const post = await fetchPost(params.slug);
  
  return new ImageResponse(
    <div style={{
      width: '100%', height: '100%',
      display: 'flex', flexDirection: 'column',
      backgroundColor: '#0a0d12', color: '#fff',
      padding: '80px', justifyContent: 'space-between'
    }}>
      <span style={{ fontSize: '24px', color: '#888' }}>Blog</span>
      <h1 style={{ fontSize: '56px', fontWeight: 'bold' }}>{post.title}</h1>
      <span style={{ fontSize: '20px', color: '#666' }}>opengraphgenerator.com</span>
    </div>,
    { width: 1200, height: 630 }
  );
}

See our Next.js Open Graph Metadata Guide for a complete implementation walkthrough.

---

Approach 2: Template-Based Image Generators

For sites that don’t use edge runtimes, template-based services generate images from predefined layouts with variable text fields.

Popular Services

• Cloudinary — URL-based image transformations with text overlay parameters.
• imgix — Similar to Cloudinary with real-time image processing.
• Our OG Image Builder — Create branded OG cards directly in the browser. Try the OG Image Builder.

Cloudinary URL Example

https://res.cloudinary.com/demo/image/upload/
  w_1200,h_630,c_fill,
  l_text:Arial_60_bold:Dynamic%20OG%20Images,
  co_white,g_center/
  og-template.png

---

Approach 3: Build-Time Static Generation

For static site generators (Astro, Hugo, 11ty, Gatsby), you can generate OG images during the build step using headless browser libraries.

Using Puppeteer or Playwright

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.setContent(renderTemplate(postData));
await page.screenshot({ path: `./og-images/${slug}.png` });
await browser.close();

This approach works well for sites with fewer than 1,000 pages where build time isn’t a concern.

---

Image Specifications

Regardless of generation method, all dynamic OG images should follow these specifications:

Property	Value
Width	1200 px
Height	630 px
Aspect ratio	1.91:1
Format	PNG or JPEG
File size	Under 1 MB
Color space	sRGB

For per-platform sizing details, see the Open Graph Image Size Guide.

---

Design Best Practices

1. Keep text in the center 80% — Platforms crop edges differently.
2. Use high-contrast text — White text on dark backgrounds or vice versa.
3. Include your brand logo — Builds recognition across social feeds.
4. Limit to 2 lines of title text — Longer titles become illegible at social card sizes.
5. Test at small sizes — Preview cards render as small as 300×157 px on mobile.

---

Related Resources

• Automating Dynamic Open Graph Images — Our original automation guide.
• Open Graph Image Size Guide — Platform-specific dimensions.
• Open Graph JavaScript Implementation — Framework-specific OG tag rendering.
• OG Image Builder — Create OG images in your browser.