OG image API comparison

Hosted OG image API vs @vercel/og vs DIY Satori

Choosing an OG image API, or rolling your own, decides how every link preview looks on Slack, X, LinkedIn, and iMessage. This guide compares three real paths teams use in 2026: a hosted OG image generator API from OG Pilot, Next.js ImageResponse with @vercel/og, and DIY Satori. No invented benchmarks. Capabilities below cite official docs. Anything unverified stays marked NEED CITE or NEED VERIFY.

Developers and product teams use this page when they are deciding how to generate Open Graph images for Next.js apps already on Vercel, for multi-framework stacks such as Rails, Astro, WordPress, and static sites, and for agent workflows that should create social images from a URL. If you only need one static card, design it once and ship a PNG. If every route needs a branded preview, you need an og image generator API or an in-app renderer.

Get an API key to sign CDN URLs, read the API docs for JWT claims and SDK install steps, or use MCP when an agent should generate the card.

Comparison matrix: hosted API vs @vercel/og vs DIY Satori

Dimension Hosted OG Pilot API @vercel/og / ImageResponse DIY Satori
Where it runs Hosted API plus a CDN URL you put in og:image Your Next.js or Vercel function, or a compatible host Your own worker or server plus a CDN
How you author layouts Ready templates such as page, blog_post, and product, plus JWT params JSX and a limited CSS subset via ImageResponse A JSX or HTML subset via Satori; you wire the PNG or SVG pipeline
Agent / MCP Public MCP at https://ogpilot.com/mcp Not productized as MCP; you would wrap your route Build your own tool surface
Latency and cost NEED VERIFY. Measure against your domains and templates. NEED CITE for public list prices. NEED VERIFY. Depends on function region, fonts, and asset fetches. NEED VERIFY. Depends on your infra, plus engineering time.

Recommended OG size: 1200 by 630 is the size Vercel documents as the recommended OG image size. Next.js documents that ImageResponse uses @vercel/og, Satori, and Resvg to turn JSX into PNG. Only flexbox and a CSS subset are supported. Layouts such as display grid will not work. The bundle, including JSX, CSS, fonts, and images, must stay under 500KB. Font formats are ttf, otf, and woff. Pages Router with the Node.js runtime does not support returning a new Response from vercel/og. App Router and Edge combinations listed in the Vercel matrix are supported.

When to pick each path

Pick a hosted OG image API when you need the same branded cards across Next.js, Rails, Astro, WordPress, or no-code pages, when you want JWT-signed URLs and SDKs instead of maintaining a renderer, and when you want MCP tools such as generate_og_image and debug_open_graph. Editors should not have to own Edge Function CSS.

Pick @vercel/og and ImageResponse when you are deep in the Next.js App Router and want layouts as JSX next to the page, when you accept Satori CSS limits and the 500KB bundle cap, and when one pipeline that deploys with the app is enough. Pick DIY Satori when you need a custom rendering pipeline or a non-Vercel runtime with full ownership, when you already operate image workers and want zero SaaS dependency, and when you will maintain fonts, PNG conversion such as Resvg, caching, and abuse protection yourself. Satori converts a limited HTML and CSS tree to SVG. A DIY path also means you choose where it runs, how SVG becomes PNG, how fonts are subset, how URLs are signed, and how you monitor crawlers that hammer a popular post. NEED VERIFY any claim that DIY is always cheaper. It depends on volume, engineering time, and failure modes.

How the OG Pilot OG image API works

Sign up and verify your domain with a DNS TXT record, create an API key, and sign a JWT locally with HS256. Claims include the verified domain, the API key prefix, a template, and a title. POST the token to https://ogpilot.com/api/v1/images. The response is a CDN image URL for og:image. SDKs include og-pilot-js, og_pilot_ruby, og-pilot for Python, and og-pilot-php. Never hardcode the API key in the browser. Sign on the server. The JavaScript SDK configure call reads the key and domain from the server environment, then createImage returns a URL you can pass into Next.js generateMetadata as openGraph and twitter images.

OG Pilot also exposes a remote MCP endpoint at https://ogpilot.com/mcp. Documented tools include generate_og_image, debug_open_graph, compress_image, and extract_color_palette. Generation takes a page URL and returns an Open Graph image. Debug, compress, and palette do not spend credits. If a client-specific connector JSON differs, follow the guide instead of inventing a config. OAuth is 2.1 with PKCE, as described on the MCP docs.

Cold versus warm latency is NEED VERIFY with your own timings for OG Pilot CDN hits, Vercel Function regions, and DIY workers. Social crawlers cache aggressively, so first-fetch latency is not what people see after a platform cache is warm. Cost per one thousand images is NEED CITE from your host pricing and from OG Pilot in-app plans after signup. Do not publish a round number without a source. DIY and heavy custom @vercel/og layouts trade SaaS fees for design-system maintenance inside Edge bundles, and you still have to watch the 500KB cap.

Decision checklist

  1. One framework on Vercel with JSX layouts you control? Start with ImageResponse.
  2. Multiple apps or a CMS and one brand system? Prefer a hosted OG image API.
  3. Need agents to generate or debug cards? Prefer a product with MCP.
  4. Extreme custom rendering and you already run image infrastructure? DIY Satori can win if you budget for operations.
  5. Always put absolute og:image URLs in HTML and re-scrape after changes.

After you choose a path, confirm the card in the Open Graph debugger, generate one image before you wire production auth, and read the Next.js OG image comparison if App Router metadata is the only surface you need. Create a signed workflow from sign up, keep @vercel/og for a single Next.js app when that fits, and use the debugger before you ship.