Add fuller social metadata tags (#1056)

Supplement Starlight's default head output with Twitter title, description, URL, and domain tags plus extra image metadata so social crawlers have a more complete card payload.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

website/src/components/Head.astro

@@ -1,9 +1,49 @@
 ---
 import Default from '@astrojs/starlight/components/Head.astro';
+const { head, entry } = Astro.locals.starlightRoute;
 const basePath = import.meta.env.BASE_URL;
+
+const getMetaContent = (key: string, attribute: 'name' | 'property' = 'name') =>
+  head.find((tag) => tag.tag === 'meta' && tag.attrs?.[attribute] === key)?.attrs?.content;
+
+const getLinkHref = (rel: string) =>
+  head.find((tag) => tag.tag === 'link' && tag.attrs?.rel === rel)?.attrs?.href;
+
+const twitterTitle = entry.data.title;
+const description =
+  entry.data.description ??
+  getMetaContent('description') ??
+  getMetaContent('og:description', 'property');
+const canonicalUrl =
+  getLinkHref('canonical') ?? getMetaContent('og:url', 'property');
+const socialImageUrl =
+  getMetaContent('twitter:image') ?? getMetaContent('og:image', 'property');
+const socialImageAlt =
+  getMetaContent('twitter:image:alt') ??
+  getMetaContent('og:image:alt', 'property') ??
+  description;
+const socialImageType = socialImageUrl?.endsWith('.png')
+  ? 'image/png'
+  : socialImageUrl?.endsWith('.jpg') || socialImageUrl?.endsWith('.jpeg')
+    ? 'image/jpeg'
+    : socialImageUrl?.endsWith('.webp')
+      ? 'image/webp'
+      : undefined;
+
+const twitterDomain =
+  canonicalUrl && URL.canParse(canonicalUrl)
+    ? new URL(canonicalUrl).hostname
+    : undefined;
 ---
 
 <Default><slot /></Default>
+{twitterTitle && <meta name="twitter:title" content={twitterTitle} />}
+{description && <meta name="twitter:description" content={description} />}
+{canonicalUrl && <meta property="twitter:url" content={canonicalUrl} />}
+{twitterDomain && <meta property="twitter:domain" content={twitterDomain} />}
+{socialImageUrl && <meta property="og:image:secure_url" content={socialImageUrl} />}
+{socialImageType && <meta property="og:image:type" content={socialImageType} />}
+{socialImageAlt && <meta name="twitter:image:alt" content={socialImageAlt} />}
 <script is:inline define:vars={{ basePath }}>
   document.addEventListener('DOMContentLoaded', () => {
     document.body.dataset.basePath = basePath;