Dynamic OG images for plain HTML

Paste the tags into the <head> of each page and URL-encode the title. The API returns a 1200×630 PNG, cached at the edge.

<meta property="og:title" content="How we cut CI time by 60%">
<meta property="og:image" content="https://og.sadana.app/api/og?title=How%20we%20cut%20CI%20time%20by%2060%25&site=yourblog.dev">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Use encodeURIComponent (JS) or any URL encoder for the title.

Preview

Parameters

title     required, up to 200 chars
subtitle  optional
site      optional footer text
theme     light | dark (Pro)
key       Pro license key (removes watermark)

Check it

After deploying, paste a URL into a card validator (e.g. opengraph.xyz) or share it in a private Slack/Discord channel. Social crawlers cache images, so change the URL (e.g. add &v=2) to force a refresh.

Try the generator

Other frameworks

Next.js · Astro · Hugo · WordPress · Ghost · SvelteKit · Nuxt · Eleventy (11ty) · Jekyll · Docusaurus · plain HTML