OG Image Generator Boilerplate: Build vs Buy Guide

Every page on your site gets shared somewhere — Slack, X, LinkedIn, a Discord channel — and if there is no per-page preview image, the link card either falls back to a generic logo or shows nothing at all. That is a quiet tax on every share: lower click-through, a link that looks unfinished next to competitors whose previews show the actual headline. Fixing it properly means giving every page, or at least every page type, its own rendered preview image, generated automatically instead of designed by hand one at a time.

What does an OG image generator actually do?

An OG image generator is a small API route that renders a PNG for a page's Open Graph tag at request time, using that page's own title, description, or other params, instead of pointing every page at one static banner file. The route usually lives at something like /api/og?title=..., and the page's <meta property="og:image"> tag points straight at it. Every image comes back as a 1200×630 PNG, the standard Open Graph preview size that Facebook, X, LinkedIn, and Slack all expect.

In the Next.js world this is almost always built on @vercel/og, which renders React/JSX to a PNG through a library called Satori. You write the preview as a component, pass in props from the URL query string, and the route returns an image instead of HTML.

What does it take to build one yourself?

The API route itself is short. The work is everything around it: getting the rendering engine's quirks right, hosting fonts correctly, and building enough templates that the result looks designed rather than thrown together.

1. Install @vercel/og (or the equivalent ImageResponse export in the Next.js App Router) and write a single JSX template.
2. Learn Satori's supported CSS subset — it is flexbox-only, with no CSS grid, no float, and no arbitrary DOM nesting — and rewrite your first layout attempt once you hit the first unsupported property.
3. Load and embed a font file manually, since Satori cannot use system fonts or the CSS font-family stack the way a browser does.
4. Set cache-control headers on the route so the same title does not get re-rendered on every social crawler hit.
5. Decide between the edge runtime and the Node.js runtime, since some hosts outside Vercel do not support edge functions the same way.
6. Build a second page just to preview the output, because you cannot see a Discord or X card render locally without pasting the URL into an actual client.
7. Repeat steps 1–3 for every distinct page type — a blog post card looks different from a product card or a docs card.

Build vs buy at a glance

None of the individual steps above are hard on their own. What adds up is doing all of them correctly before you have a single template you would actually ship, and then doing steps 2 and 3 again for every additional page type your site needs a distinct look for.

That is the point where a finished set of templates stops being a nice-to-have and starts being the faster path: the OG Image Generator Boilerplate on BuyCoded ships 50 designed templates on top of a working Next.js 15 route, so you start from a catalog instead of a blank JSX file.

Is the Satori CSS subset really that limiting?

Yes, in a specific and predictable way. Vercel's OG image generation docs confirm that the underlying renderer supports a constrained CSS subset centered on flexbox, without CSS grid, float, or most positioning tricks a normal web layout would use. A template that leans on flexbox rows and columns works fine; one ported directly from a grid-based design will need a rewrite before it renders.

This matters for planning, not just execution: any custom template you add later — for a new content type, a seasonal campaign, a client's brand refresh — inherits the same constraint. A boilerplate built entirely inside that subset from the start means your working examples double as the reference for how to stay inside the lines, instead of you discovering the limits mid-build.

How much does it cost to build this yourself?

There is no license fee for rolling your own — @vercel/og is free, and Satori is open source. The cost is time: a realistic first template, done carefully with font handling and cache headers, runs half a day to a day for someone who has not used Satori before. Each additional template after the first is faster, usually under an hour once the font and layout patterns are established, but a site with five or six distinct page types is still several hours of focused work before OG images stop being a gap in the launch checklist.

The OG Image Generator Boilerplate is a one-time $29 purchase with a commercial license that covers unlimited personal and client or agency projects — the only restriction is reselling the boilerplate or its templates as a competing starter pack. At that price, the calculation is mostly about your own hourly cost against the hours in the table above, not about whether $29 is affordable. For a solo project that math can go either way; for a client engagement billed by the deliverable, the boilerplate usually wins on its own.

Will this work if I do not deploy on Vercel?

It does not require Vercel specifically. The route in the boilerplate runs on runtime: 'nodejs', so it works on any host that supports Next.js 15 — Render, Railway, Fly, a plain VPS, an ECS task, a Docker container. Vercel is the easiest target and gets a ready-made vercel.json with the right caching headers and region set, but the setup guide covers both paths, so the hosting decision does not lock you out of using it.

The honest tradeoff

If you only need one OG image template, ever, for a single small site, building it yourself is the right call — the code is short, and $29 buys you nothing you could not write in an afternoon. The boilerplate earns its price once you need more than one or two distinct page types, you are shipping OG images for a client project on a deadline, or you would rather spend the build afternoon on the product itself. It is also worth knowing before you start: the font handling and cache-header setup are the two steps people underestimate, not the JSX template writing.

Get every page a real preview image

Browse the full catalog of production-ready packages at BuyCoded's products page — the OG image generator is one of several boilerplates built for developers shipping fast with AI coding tools, and every purchase is an instant download with a 14-day refund if it does not work as described.