How to Generate Dynamic OG Images for Every Page
A single OG image for your whole site is better than nothing — but a unique image per page is what drives real engagement. Dynamic OG image generation creates a tailored social card for every post, product, and page on your site without any manual design work.
What dynamic OG generation means
Instead of one static image set in your metadata, you generate a unique OG image for each page — typically using the page title, category, or other metadata as inputs. The image is created at build time or on demand and cached for fast serving.
Next.js: use next/og for server-rendered images
Next.js ships a built-in `ImageResponse` API in `next/og` that renders a React component to a PNG at request time. This lets you pass any page data — title, author, date — into the image at runtime.
For AI-generated visuals, pre-generate and cache
AI-generated images can't be rendered in real-time at the edge. The best approach: generate OG images when content is created (on publish) and store them on a CDN like Cloudflare R2. OGImagen follows this exact pattern.
At scale: batch generation across your entire site
For sites with hundreds of pages, you can run a batch job to generate OG images for all existing content at once. OGImagen's API supports this — pass your page titles and get back a CDN-hosted image for each one.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate dynamic OG images for your site