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>

www/src/layouts/BlogIndexLayout.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from './BaseLayout.astro';
 import PageHero from '../components/PageHero.astro';
+import { getPublication } from '../utils/publication';
 
 interface Props {
   title: string;
@@ -10,9 +11,10 @@ interface Props {
 }
 
 const { title, description, intro = [], lang = 'en' } = Astro.props;
+const { entry } = await getPublication(Astro.url.pathname);
 ---
 <BaseLayout title={title} description={description} lang={lang}>
-  <PageHero title={title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
+  <PageHero title={entry.data.displayH1 ?? title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
   <section class="library-intro">
     <div class="container">
       <h2>Library</h2>

www/src/layouts/BlogPostLayout.astro

@@ -7,7 +7,7 @@ const { entry } = Astro.props;
 <BaseLayout title={entry.data.title} description={entry.data.description} image={entry.data.featuredImage} lang={entry.data.lang} type="article">
   <article class="blog-post">
     <header class="article-header container">
-      <h1>{entry.data.title}</h1>
+      <h1>{entry.data.displayH1 ?? entry.data.title}</h1>
       <div class="article-byline">
         <img src="/assets/images/rula-diab-avatar.jpg" alt="" />
         <p><strong>Rula Diab, Clinical Director, M.Ed, BCBA, LBA</strong><br /><time datetime={entry.data.date.toISOString()}>{entry.data.date.toLocaleDateString(entry.data.lang, { day: '2-digit', month: 'long', year: 'numeric' })}</time></p>

www/src/layouts/PageLayout.astro

@@ -57,7 +57,7 @@ const heroImage = pageHeroImages[entry.data.slug];
 ---
 <BaseLayout title={entry.data.title} description={entry.data.description} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}>
   {entry.data.slug === 'contact' && <Fragment slot="head"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /></Fragment>}
-  <PageHero title={bannerTitle} subtitle={entry.data.slug === 'faqs' ? 'FAQs' : undefined} image={heroImage} constrain />
+  <PageHero title={entry.data.displayH1 ?? bannerTitle} subtitle={entry.data.slug === 'faqs' ? 'FAQs' : undefined} image={heroImage} constrain />
   {entry.data.slug === 'team' && entry.data.lang === 'en'
     ? <TeamPage />
     : entry.data.slug === 'about' && entry.data.lang === 'en'