@autobusal/common 1.33.1 → 1.33.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.33.2
+
+### Added
+
+- **`Meta` now defaults `og:image`/`twitter:image` to the label's own homepage hero photo** (`{settings.url}/home/background-light.jpg`) when a page doesn't pass its own `image`. Most of the ~136 call sites never had a share-preview image at all, so a link pasted into a chat assistant or social post previewed with nothing. A page with something more specific (an operator's logo, a blog post's own photo) still passes its own `image` and wins - this only fills the gap.
 
 ## 1.33.1
 

package/Meta.tsx

@@ -237,11 +237,38 @@ const useAlternates = (noIndex: boolean, explicitUrl?: string): { locale: string
   ];
 };
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-11
+ *
+ * A default og:image/twitter:image for whichever of Meta's ~136 call
+ * sites never passes one - route detail, Help, blog index, and most
+ * static pages had NO share-preview image at all, so a link pasted into
+ * a chat assistant or social post previewed with nothing. Rather than
+ * hunt down every call site individually, the fallback lives here: the
+ * same hero photo the homepage itself uses (`home/background-light.jpg`,
+ * already uploaded per-label - see RoutesOrder.tsx's identical asset
+ * path), which every label already has. The DARK variant is deliberately
+ * not used here regardless of the visitor's own theme - a share preview
+ * is generated by whatever unpacks the URL server-side, not by this
+ * visitor's browser, so there is no "current theme" to match; picking
+ * one consistently is more correct than guessing.
+ *
+ * A page with something more specific to show (an operator's logo, a
+ * blog post's own photo) still passes its own `image` and wins - this
+ * only fills the gap when nothing more specific exists.
+ */
+const useDefaultImage = (explicit?: string): (string | undefined) => {
+  const { data: settings } = useGetSettings();
+
+  return explicit ?? (settings ? `${ settings.url }/home/background-light.jpg` : undefined);
+};
+
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {
   const fullTitle = withBrand(title);
   const canonicalUrl = useCanonicalUrl(url);
   const location = useLocation();
   const robots = noIndex ? 'noindex, nofollow' : 'index, follow';
+  const resolvedImage = useDefaultImage(image);
 
   const alternates = useAlternates(noIndex, url);
 
@@ -255,13 +282,13 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
     { selector: 'meta[property="og:type"]', attr: 'content', value: type },
     { selector: 'meta[property="og:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[property="og:description"]', attr: 'content', value: description },
-    { selector: 'meta[property="og:image"]', attr: 'content', value: image },
+    { selector: 'meta[property="og:image"]', attr: 'content', value: resolvedImage },
     { selector: 'meta[property="og:url"]', attr: 'content', value: canonicalUrl },
     { selector: 'meta[property="og:site_name"]', attr: 'content', value: brand },
     { selector: 'meta[name="twitter:card"]', attr: 'content', value: 'summary_large_image' },
     { selector: 'meta[name="twitter:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[name="twitter:description"]', attr: 'content', value: description },
-    { selector: 'meta[name="twitter:image"]', attr: 'content', value: image }
+    { selector: 'meta[name="twitter:image"]', attr: 'content', value: resolvedImage }
   ]);
   usePageviewTracking(location.pathname + location.search, fullTitle);
 
@@ -284,7 +311,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta property="og:type" content={ type } />
       <meta property="og:title" content={ fullTitle } />
       { description && <meta property="og:description" content={ description } /> }
-      { image && <meta property="og:image" content={ image } /> }
+      { resolvedImage && <meta property="og:image" content={ resolvedImage } /> }
       <meta property="og:url" content={ canonicalUrl } />
       { brand && <meta property="og:site_name" content={ brand } /> }
 
@@ -292,7 +319,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content={ fullTitle } />
       { description && <meta name="twitter:description" content={ description } /> }
-      { image && <meta name="twitter:image" content={ image } /> }
+      { resolvedImage && <meta name="twitter:image" content={ resolvedImage } /> }
 
       { children }
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.33.1",
+  "version": "1.33.2",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"