feat(seo): separate display headings and improve social metadata

www/src/layouts/BaseLayout.astro

@@ -8,6 +8,10 @@ import '../styles/global.css';
 import '../styles/rtl.css';
 const { title, description, image, lang = 'en', type = 'website' } = Astro.props;
 const publication = await getPublication(Astro.url.pathname);
+// Reuse alt text only for the image it describes, not a fallback banner image.
+const imageAlt = image && image === publication.entry.data.featuredImage
+  ? publication.entry.data.alt
+  : undefined;
 const dir = lang === 'ar' ? 'rtl' : 'ltr';
 const organizationSchema = {
   '@context': 'https://schema.org',
@@ -32,7 +36,7 @@ const organizationSchema = {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" href="/assets/images/favicon.svg" />
-    <Seo title={title} description={description} publication={publication} image={image} lang={lang} type={type} />
+    <Seo title={title} description={description} publication={publication} image={image} imageAlt={imageAlt} type={type} />
     <slot name="head" />
     <script type="application/ld+json" is:inline set:html={JSON.stringify(organizationSchema)} />
   </head>