og-imageslisted

# OG images — per-page share cards When a URL is shared (WhatsApp, Slack, iMessage, X, LinkedIn, Discord), the `og:image` is the preview. Get it wrong and the link shares with **no picture** or a badly cropped one — a silent conversion leak. This skill makes every page render a consistent, on-brand **1200×630 JPEG ≤300 KB**, generated by a committed script and enforced by the test gate. ## The three hard rules (messengers enforce them) 1. **1200×630, exactly** (1.91:1). Square images get cropped on X/Teams; off-ratio ones letterbox. The starter's `Base.astro` already emits `og:image:width/height` = 1200×630. 2. **≤300 KB.** WhatsApp silently **drops** previews heavier than ~300 KB — the link then shares with no image at all. Encode JPEG and compress to fit. 3. **Extension matches the bytes.** A PNG renamed `.jpg` trips strict scrapers. Use JPEG for photographic cards, PNG only for flat logo/gradient cards that still come ≤300 KB. ## How it's wired in the Astro starter - **`scripts/generate_og_cards.py`** — the generator. Renders one card per page you list, plus a `default.jpg`. Run it with **`npm run og`**. Idempotent; commit the output. - **`src/layouts/Base.astro`** — `image` prop defaults to `/images/og/default.jpg`. A page gets its own card by passing `image="/images/og/<slug>.jpg"`; a page with no `image=` falls back to the default — which only **exempt utility pages** should do (the test below enforces it). `og:image` + `twitter:image` are derived