OG Images & Social Cards

Generating dynamic Open Graph images for social previews.

OG images are the previews that show up when someone pastes your URL into Slack, iMessage, X, LinkedIn, Discord, etc. Dynamic OG images make every page look intentional.

Generation libraries

★ Satori (Vercel) — render JSX → SVG → PNG, no headless browser. The engine behind everything below. Tailwind-style props supported.
★ @vercel/og — Satori + WASM PNG encoding; works on Vercel Edge, Cloudflare Workers, Bun, Node. Default for new Next.js projects.
og-img — Satori-based, framework-agnostic.
@cloudflare/og — first-class on Cloudflare Workers.
og-edge — Workers-compatible Satori wrapper.
react-satori — wraps Satori for non-Next React apps.

When Satori isn't enough

Puppeteer / Playwright — full HTML + CSS + custom fonts + JS-driven canvas. Slow (~1s/image) and needs a Chromium runtime; not edge-friendly.
Browserless — hosted Puppeteer; pay-per-render.
Sharp + custom compositing — when you have a fixed template and just need to overlay text.
Skia / @napi-rs/canvas — server-side canvas API; closest to "native canvas, server-side."

Hosted services

Bannerbear — programmatic image generation as a service; templates, paid.
Placid — same niche.
Cloudinary with text overlays — generous free tier.
OG-IMG.dev, og.tailgraph.com — quick template-based OG image services.

Cache / delivery

Generate at build time when content is static (Next.js generateImageMetadata).
Cache at the CDN edge (Cache-Control: public, max-age=31536000, immutable) when the OG params hash uniquely.
Bust cache by changing the URL hash, not the content.

Tooling around OG

open-graph-protocol — npm helpers to generate <meta> tags.
next/og — built into Next.js, exposes ImageResponse.
unfurl.js — parse OG tags from arbitrary URLs (for link previews in your app).
Slack / Discord OG validators — paste a URL into their previewers to verify.

Pick this if…

Default Next.js / Vercel: next/og (which is @vercel/og).
Cloudflare Workers: @cloudflare/og or @vercel/og.
Full HTML/CSS rendering required: Puppeteer + Browserless.
Marketing wants to design templates: Bannerbear or Placid.
Static at build time only: generate during your build with Satori.