DEV Community

Mukul Dutt
Mukul Dutt

Posted on • Originally published at propzapi.com

Open Graph Image API: generate dynamic og:image URLs in one call

Originally published on propzapi.com — cross-posted here.

Every one of your blog posts shares the same flat OG image. That's a thousand links on X and LinkedIn that all look identical, and forgettable. An Open Graph image API fixes that: one template, a per-page image.

What it does

You store one 1200×630 layout with {{variables}}, then sign a URL per post from that post's title. Drop the URL into <meta property="og:image">. The image renders the first time a crawler fetches it, then every refetch is cached and free.

Why not @vercel/og?

It's great if you're on Next.js and your card is simple. But it renders with Satori, a flexbox-only subset of CSS: no grid, no media queries, no pseudo-elements, and fonts limited to ttf/otf/woff with no ligatures. The day your design needs a font it won't load or a layout it won't do, you're rewriting. A full-Chromium API renders the CSS you already wrote.

The cost trap people miss

Facebook, Slack, LinkedIn and X hammer your og:image on every share and re-share. If you paid per fetch, a viral post would be a surprise bill. Sign the URL for free, render once on first fetch (one credit), and cache serves every share after. Cost tracks how many distinct images you make, not how popular they get.

Why isn't my og:image updating?

Almost always platform caching, not your API. Facebook and LinkedIn scrape once and hold it — force a re-scrape in their debugger. And the URL has to be absolute; a relative path works in your browser but not for an external crawler.

Full guide — sizes, the four ways to generate them, and the debugger workflow — in the Open Graph Image API guide, built on propzapi, which also does HTML-to-image, screenshots, and one-page PDFs.

Top comments (0)