Add share previews for the index and the Green Man page

Index gets a front-page card as og.png. The Green Man page gets a
description, canonical link and Open Graph tags with its own image.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GrX9qMoNihcWLX3xoJhabw

CLAUDE.md

@@ -11,7 +11,7 @@ Kestrel's Builds is a static site of craft build write-ups. Builds vary (foam an
 ## File Structure
 
 - `index.html` - Site index (HTML/CSS in one file, no JavaScript). One `<a class="build">` card per build, newest first; the newest also has class `first` (full-width card).
-- `og-image.jpg` - OpenGraph image for the index, 1200 x 630
+- `og.png` - OpenGraph image for the index, 1200 x 630
 - `deploy` - Rsync deployment script
 - `<build>/` - One folder per build, self-contained: `index.html`, `img/`, `dl/`
   - `greenman/` - Green Man mask
@@ -22,7 +22,8 @@ Kestrel's Builds is a static site of craft build write-ups. Builds vary (foam an
 - The index is a sister page to Kestrel's Hall (gamehall.kestrelsnest.social): the same dark ink / bone / gold tokens, the same serif stack, the same card and section structure. Keep them in step.
 - Every build page links back to the index with `<a href="../">` at its top and bottom (`.home` in `greenman/index.html`).
 - Downloads live in `<build>/dl/`. Zip files there are part of the site, so `*.zip` is deliberately NOT in `.gitignore`.
-- `greenman/index.html` is generated from the mask kit's own source (not in this repo). Hand edits to it are lost when the kit is regenerated; change the source and re-copy, then re-add the two `.home` back links, their CSS and the `<link rel="icon" href="../favicon.svg">` line.
+- `greenman/index.html` is generated from the mask kit's own source (not in this repo). Hand edits to it are lost when the kit is regenerated; change the source and re-copy, then re-add the two `.home` back links, their CSS and the `<link rel="icon" href="../favicon.svg">` line and the description, canonical and Open Graph tags in its head.
+- Share previews: `og.png` at the root is a 1200x630 screenshot of the top of the index, so retake it when the index's first card changes. Each build has its own `og-image.jpg` (1200x630) in its folder and its own description and Open Graph tags.
 
 ## Adding a build
 
@@ -54,4 +55,4 @@ The `deploy` script uses rsync to push to YunoHost (a My Webapp static app, like
 
 ## OpenGraph
 
-Meta tags in the index `<head>` point to `https://builds.kestrelsnest.social/og-image.jpg`. If the URL changes, update `og:image`, `og:url` and `twitter:image`.
+Meta tags in the index `<head>` point to `https://builds.kestrelsnest.social/og.png`, and each build page points to its own `og-image.jpg`. If the URL changes, update `og:image`, `og:url` and `canonical` on every page.

README.md

@@ -10,7 +10,7 @@ A static site with no build step. Each build is a self-contained folder; the top
 
 ```
 index.html        - Site index: one card per build
-og-image.jpg      - OpenGraph image for the index (1200 x 630)
+og.png            - OpenGraph image for the index (1200 x 630); each build keeps its own og-image.jpg
 deploy            - Deployment script (rsync to server)
 greenman/         - Green Man mask
   index.html      - The build and painting guides as one page

greenman/index.html

@@ -5,6 +5,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Green Man Mask Kit</title>
 <link rel="icon" href="../favicon.svg">
+<meta name="description" content="A half-mask of oak leaves, acorns and bark, built to be worn with glasses. Full-size templates, print files, a build guide and a painting guide, free to download.">
+<link rel="canonical" href="https://builds.kestrelsnest.social/greenman/">
+<meta property="og:type" content="article">
+<meta property="og:site_name" content="Kestrel's Builds">
+<meta property="og:title" content="Green Man mask">
+<meta property="og:description" content="A half-mask of oak leaves, acorns and bark, built to be worn with glasses. Everything you need to make your own.">
+<meta property="og:url" content="https://builds.kestrelsnest.social/greenman/">
+<meta property="og:image" content="https://builds.kestrelsnest.social/greenman/og-image.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="A Green Man half-mask worn with glasses: a crown of painted oak leaves above a bark brow ridge, with acorns at the temples and a leaf over the nose.">
+<meta name="twitter:card" content="summary_large_image">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Inter:wght@400;600;700&display=swap">
 <style>
 /* layout: one reading column of guide text; each step is a drawing beside its instructions, stacking on phones */

index.html

@@ -11,7 +11,9 @@
 <meta property="og:title" content="Kestrel's Builds">
 <meta property="og:description" content="Things I've made, written up so you can make them too.">
 <meta property="og:url" content="https://builds.kestrelsnest.social/">
-<meta property="og:image" content="https://builds.kestrelsnest.social/og-image.jpg">
+<meta property="og:site_name" content="Kestrel's Builds">
+<meta property="og:image" content="https://builds.kestrelsnest.social/og.png">
+<meta property="og:image:alt" content="The Kestrel's Builds front page: the site name over a card for the Green Man mask, a half-mask of painted oak leaves worn with glasses.">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
 <meta name="twitter:card" content="summary_large_image">