Dynamic OG images for Astro

Build the URL in your base layout from the page props. The API returns a 1200×630 PNG, cached at the edge.

---
// src/layouts/Base.astro
const { title, description } = Astro.props
const og = 'https://og.sadana.app/api/og?' + new URLSearchParams({ title, subtitle: description ?? '', site: Astro.site.host })
---
<meta property="og:image" content={og} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Astro’s own docs use astro-og-canvas to render at build time; a URL API avoids the build step and font files.

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