Generate OG images for Features and Gallery
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.jsreuses 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 topsrc/routes/og/[...path]/+server.jscollects opted-in pages, lists them inentries()and rasterises the SVG withsharpgetPageInfo()returnsogImagefor opted-in pages;Meta.svelteprefers it over the raw cover- Text is drawn by the rasteriser with system fonts, so CI installs
fonts-interbefore building to match the site typeface
Tasks
- Add the
ogflag toPageMeta - 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
Read next
