Guides › Guides

Dynamic OG images: generate one per page automatically

A unique image per page (with the title on it) noticeably improves how shares look. Common approaches:

• Next.js: add opengraph-image.tsx next to a route and return an ImageResponse from next/og.
• Satori + resvg (any JS runtime): render JSX/HTML to SVG, then PNG. This is what Next's ImageResponse uses under the hood.
• Edge function / Worker: an endpoint like /og?title=… that renders and caches PNGs.
• Build time: generate PNGs for every page during your static build (Astro, Hugo and Eleventy have plugins).

Rules

• Output PNG or JPEG at 1200×630, not SVG.
• Cache aggressively, since crawlers fetch images often.
• Keep the image URL stable per page; changing it on every request defeats platform caches and can look like spam.
• Escape and length-limit any user-supplied text.

Related