OG Image API for dynamic social cards

Open Graph images drive click-through on every share, but generating them dynamically is annoying: @vercel/og runs on the Edge with a hard bundle-size limit and Satori’s CSS subset, and rolling your own Chromium bloats your functions. Shotpane flips it: design your card as a normal page (any HTML/CSS/fonts you want), then render it to a 1200×630 PNG with one call.

How it works

Build a route that renders your card (e.g. /og/[slug]), then point the OG API at it and use the result as your og:image.

// in your <head> / Next.js metadata
openGraph: {
  images: [
    "https://www.shotpane.com/api/v1/og" +
    "?url=" + encodeURIComponent("https://myapp.com/og/" + slug) +
    "&key=" + process.env.SHOTPANE_KEY,
  ],
}

Why not @vercel/og?

• No Edge bundle-size ceiling — your card is just a page, no 1-2MB asset cap.
• Full CSS + any web font, not Satori’s subset.
• Nothing heavy in your own deploy — Chromium runs on our side.
• Same endpoint does full screenshots and PDFs when you need them.

Free key, 100 renders/mo, no card. Works from REST or the MCP server.

Get a free key →