From 7a022cc190a2036e85f32e150a54e4099ff672f3 Mon Sep 17 00:00:00 2001
From: "David V. Kimball" <accounts@davidvkimball.com>
Date: Mon, 16 Sep 2024 22:35:58 -0700
Subject: [PATCH] feat: set `og:type` to `article` for posts (#183)

* New prop setOGTypeArticle sets og:type to "article" for posts, and "website" for every other page.

* Fixed error where I declared setOGTypeArticle twice.
---
 src/layouts/Layout.astro         | 8 +++++++-
 src/layouts/MainGridLayout.astro | 5 +++--
 src/pages/posts/[...slug].astro  | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index da61680..4ce6ffe 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -22,9 +22,10 @@ interface Props {
   banner?: string
   description?: string
   lang?: string
+  setOGTypeArticle?: boolean
 }
 
-let { title, banner, description, lang } = Astro.props
+let { title, banner, description, lang, setOGTypeArticle } = Astro.props
 
 // apply a class to the body element to decide the height of the banner, only used for initial page load
 // Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change
@@ -82,6 +83,11 @@ const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'cente
 		<meta property="og:url" content={Astro.url}>
 		<meta property="og:title" content={pageTitle}>
 		<meta property="og:description" content={description || pageTitle}>
+		{setOGTypeArticle ? (
+        <meta property="og:type" content="article" />
+        ) : (
+        <meta property="og:type" content="website" />
+        )}
 
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:url" content={Astro.url}>
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 74c0268..dacd8b4 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -12,15 +12,16 @@ interface Props {
   banner?: string
   description?: string
   lang?: string
+  setOGTypeArticle?: boolean;
 }
 
-const { title, banner, description, lang } = Astro.props
+const { title, banner, description, lang, setOGTypeArticle } = Astro.props
 const hasBannerCredit =
   siteConfig.banner.enable && siteConfig.banner.credit.enable
 const hasBannerLink = !!siteConfig.banner.credit.url
 ---
 
-<Layout title={title} banner={banner} description={description} lang={lang}>
+<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
 <slot slot="head" name="head"></slot>
 <div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" class:list={[""]}>
     <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 34815a5..b84642a 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -45,7 +45,7 @@ const jsonLd = {
   // TODO include cover image here
 }
 ---
-<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang}>
+<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true}>
     <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",