Add og:image when blog post has header image

bensaufley · bensaufley · commit 98c545fe97af · 2025-12-28T15:07:54.000-05:00
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -19,6 +19,7 @@ type ConditionalProps = (
 ) & {
   title: string;
   description?: string | undefined;
+  image?: string | undefined;
 };
 
 export type Props = ConditionalProps & {
@@ -27,7 +28,7 @@ export type Props = ConditionalProps & {
 
 let pathname: string;
 const { class: className } = Astro.props;
-const { title, description } = Astro.props;
+const { title, description, image } = Astro.props;
 if ('url' in Astro.props) {
   ({ url: pathname } = Astro.props);
 } else if (Astro.props.request) {
@@ -66,6 +67,7 @@ if ('url' in Astro.props) {
       content={description ??
         'Personal website for Ben Saufley, a software engineer and illustrator from Portland, Maine.'}
     />
+    {image && <meta name="og:image" content={image} />}
   </head>
   <body class={clsx(className)}>
     <Header currentPath={pathname} />
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -36,7 +36,7 @@ const published = dayjs.utc(date).startOf('day');
 const { Content } = await post.render();
 ---
 
-<BaseLayout title={title}>
+<BaseLayout title={title} image={img?.url}>
   <Post title={title} posted={published} headerImage={img}>
     <Content />
   </Post>
