Add Open Graph meta tags 🌐.

README.md

@@ -13,7 +13,6 @@ Adapted from [tailwind-astro-starting-blog](https://github.com/wanoo21/tailwind-
 - Change the titles font.
 - Refactor apps and talks pages to use the same code.
 - For post titles, try to use the cover image as a dimmed background for the title.
-- Restore OG meta data.
 - Restore the estimated reading time feature.
 - Implement a service worker strategy.
 - Use local avatar instead of gravatar.

src/components/BaseHead.astro

@@ -1,5 +1,6 @@
 ---
 import { type CollectionEntry, getEntry } from 'astro:content'
+import { getImage } from 'astro:assets'
 import { SEO } from 'astro-seo'
 import Analytics from './Analytics.astro'
 import ViewTransitionsLogic from './ViewTransitionsLogic.astro'
@@ -29,14 +30,35 @@ const {
   title,
   description,
   robots = SITE_METADATA.robots,
-  // article,
+  article,
   titleTemplate,
 } = Astro.props
 
 // The default author is the site creator.
 const author = await getEntry('authors', 'default')
 const fediverse = author.data.mastodon || author.data.pixelfed
 
+const locale = t('siteMetadata.language')
+
+// Open graph image.
+let openGraphImage
+if (article?.cover) {
+  openGraphImage = await getImage({
+    src: article.cover,
+    width: 1200,
+    height: 630,
+  })
+} else {
+  const importedOgImage = await import(`../assets/og-default.jpg`).then(
+    (m) => m.default
+  )
+  openGraphImage = await getImage({
+    src: importedOgImage,
+    width: 1200,
+    height: 630,
+  })
+}
+
 const isProduction = import.meta.env.PROD
 ---
 
@@ -77,6 +99,32 @@ const isProduction = import.meta.env.PROD
         { rel: 'alternate', href: '/rss.xml', type: 'application/rss+xml' },
       ],
     }}
+    openGraph={{
+      basic: {
+        type: 'website',
+        url: Astro.url,
+        title,
+        image: openGraphImage.src,
+      },
+      image: {
+        url: openGraphImage.src,
+        type: `image/${openGraphImage.options.format}`,
+        width: openGraphImage.options.width,
+        height: openGraphImage.options.height,
+        alt: title,
+      },
+      optional: {
+        locale,
+        description,
+      },
+      ...(article && {
+        article: {
+          publishedTime: article.publishedTime.toISOString(),
+          modifiedTime: article.modifiedTime?.toISOString(),
+          authors: article.authors,
+        },
+      }),
+    }}
   />
   {isProduction && <Analytics />}
   {ENABLE_VIEW_TRANSITIONS && <ViewTransitionsLogic />}