OG images

The social-share cards shown when a page is posted to X, Slack, LinkedIn, or iMessage. Purpose-built and rendered at build time — no browser, no screenshots, nothing committed. Every card reads the brand tokens, so a re-skin recolors them for free.

How they work

A manifest (src/og/manifest.ts) is the single source of truth — it enumerates one card per page and carries each card's text. The endpoint /og/[...path].png renders each entry with Satori (a React-like vdom → SVG) then resvg (SVG → PNG). astro build writes them all to dist/og/; astro dev renders the same route on request.

Each page's og:image points at its card by URL. The pattern mirrors the route:

/                → /og/index.png
/blog/           → /og/blog.png
/blog/<slug>/    → /og/blog/<slug>.png
/resources/<s>/  → /og/resources/<s>.png
/legal/<slug>/   → /og/legal/<slug>.png
(anything else)  → /og/default.png

Templates

siteBrand mark · name · tagline

Used for

Home, blog index, and the default fallback

Anatomy

Brand mark — Accent square with the site initial (72px)
Name — The site name — 74px, bold
Tagline — The site description — 24px, muted
Domain — The bare domain, bottom-left

articleEyebrow · title · description · brand footer

Used for

Every blog post, resource page, and legal page

Anatomy

Eyebrow — Date · author — 24px, muted
Title — The page title — 56px, bold
Description — The page description — 24px, muted
Footer — Brand mark + name on the left, domain on the right

Specs

Dimensions: 1200 × 630 px (1.91:1)
Format: PNG
Rendered: Build-time — Satori (vdom → SVG) → resvg (SVG → PNG)
Committed: Nothing — emitted to dist/og/ on build; dev renders on request
Title cap: 90 chars (truncated with … — cards have no line-clamp)
Description cap: 140 chars
Colors: From the brand tokens — a re-skin recolors the cards automatically

Where to change it

src/og/manifest.ts — which pages get a card + each card's text
src/og/card.ts — the article / site layouts (Satori nodes)
src/og/theme.ts — card colors (from tokens) + dimensions
src/og/fonts.ts — the card font (separate from the site fonts)

Full workflow: the /og-images skill.