The Features index and the Gallery page are the first two pages with a generated Open Graph image. A page opts in with og: 'generated' in its meta; the build then emits og/<path>.png and Meta points og:image and twitter:image at it. The declared 1200x630 PNG in the meta tags is finally true.

Approach

  • src/lib/og-image.js reuses the generative background from the todo covers, seeded by the page path with a hue derived from it, and sets the title (wrapped, up to three lines), description and site name on top
  • src/routes/og/[...path]/+server.js collects opted-in pages, lists them in entries() and rasterises the SVG with sharp
  • getPageInfo() returns ogImage for opted-in pages; Meta.svelte prefers it over the raw cover
  • Text is drawn by the rasteriser with system fonts, so CI installs fonts-inter before building to match the site typeface

Tasks

  • Add the og flag to PageMeta
  • Add the SVG builder with tests and the PNG route
  • Wire the image URL through page info into Meta
  • Opt in /features/ and /features/gallery/
  • Install Inter on CI

Previews that say something

A social card built from the page meta

A static site template built with SvelteKit.

Sveleton, 2025