Attempt fixing social previews on WhatsApp

alexp-sssup · alexp-sssup · commit 165fb4f2bc73 · 2025-12-11T11:32:10.000+01:00
diff --git a/packages/astro-theme/components/BaseHead.astro b/packages/astro-theme/components/BaseHead.astro
@@ -8,6 +8,8 @@ export interface Props {
 	title: string;
 	description: string;
 	image?: string | undefined;
+	imageWidth?: number | undefined;
+	imageHeight?: number | undefined;
 }
 
 const isBlogPost =
@@ -20,7 +22,7 @@ const canonicalSite = isBlogPost
 	: Astro.site;
 const canonicalURL = new URL(Astro.url.pathname, canonicalSite);
 
-const { title, description, image = "/social/common@2x.png" } = Astro.props;
+const { title, description, image = "/social/common@2x.png", imageWidth, imageHeight } = Astro.props;
 
 const product = productFromUrl(canonicalURL);
 const favicon = product?.favicon ?? companyFavicon.src;
@@ -84,6 +86,8 @@ const localised = getLocalisedPaths(Astro.url.pathname, Astro.currentLocale);
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
+{imageWidth && <meta property="og:image:width" content={imageWidth} />}
+{imageHeight && <meta property="og:image:height" content={imageHeight} />}
 <meta property="og:site_name" content={SITE_TITLE} />
 
 <!-- Twitter -->
diff --git a/packages/astro-theme/layouts/BlogPost.astro b/packages/astro-theme/layouts/BlogPost.astro
@@ -35,7 +35,13 @@ if (subtitle) {
 }
 ---
 
-<Shell title={titleAndSubtitle} {description} image={heroImage?.src}>
+<Shell
+	title={titleAndSubtitle}
+	{description}
+	image={heroImage?.src}
+	imageWidth={heroImage?.width}
+	imageHeight={heroImage?.height}
+>
 	{product && <ProductNav {product} />}
 	<main class="px-6 py-10 w-full max-w-screen-xl mx-auto">
 		<a
diff --git a/packages/astro-theme/layouts/Shell.astro b/packages/astro-theme/layouts/Shell.astro
@@ -7,9 +7,11 @@ interface Props {
 	title?: string;
 	description?: string | undefined;
 	image?: string | undefined;
+	imageWidth?: number | undefined;
+	imageHeight?: number | undefined;
 }
 
-const { title, description, image } = Astro.props;
+const { title, description, image, imageWidth, imageHeight } = Astro.props;
 ---
 
 <!doctype html>
@@ -19,6 +21,8 @@ const { title, description, image } = Astro.props;
 			title={title || SITE_TITLE}
 			description={description || SITE_DESCRIPTION}
 			{image}
+			{imageWidth}
+			{imageHeight}
 		/>
 		<style is:global>
 			.dark {
