og-images

Installation
SKILL.md

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

Installs
3
GitHub Stars
3
First Seen
Jul 6, 2026
og-images — karero/website-builder