Add OGP metadata for posts

2025-12-05 23:16:45 -06:00 · 2024-02-01 02:33:59 -06:00
parent b7b5143b39
commit a2fb261232
6 changed files with 150 additions and 3 deletions
--- a/public/img/bt-console-ogp.png
+++ b/public/img/bt-console-ogp.png
--- a/public/img/default.png
+++ b/public/img/default.png
--- a/src/content/blog/bluetooth-pairing-while-dual-booting.mdx
+++ b/src/content/blog/bluetooth-pairing-while-dual-booting.mdx
@@ -3,6 +3,7 @@ title:  "Bluetooth Pairing While Dual Booting"
 pubDate:   2024-01-31 19:43:59 -0600
 tags: ["dual boot", "bluetooth", "registry", "windows", "linux"]
 description: "When both your Windows and Linux machine use the same MAC address, it requires a special trick to maintain pairing on both installations"
+preview_image: "/img/bt-console-ogp.png"
 ---
 import { Image } from 'astro:assets';

--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -2,10 +2,13 @@
 import "@styles/global.scss";
 import "@styles/fonts.scss";
 import { ViewTransitions } from "astro:transitions";
+import { SEO, type Props as SEOProps } from "astro-seo";
+import OpenGraphArticleTags from "node_modules/astro-seo/src/components/OpenGraphArticleTags.astro";

 interface Props {
  title?: string;
  build_revision?: string;
+  ogp?: SEOProps;
 }

 const { title: titleProp, build_revision } = Astro.props;
@@ -13,6 +16,77 @@ const title =
  titleProp != undefined
    ? `${titleProp} | undefined.behavio.rs`
    : "undefined.behavio.rs";
+const linkedData = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "WebSite",
+      "@id": "https://undefined.behavio.rs/#website",
+      url: "https://undefined.behavio.rs",
+      name: "undefined behaviors",
+      publisher: { "@id": "https://undefined.behavio.rs/#organization" },
+      inLanguage: "en-US"
+    },
+    // {
+    //   "@type": "ImageObject",
+    //   "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png",
+    //   url: "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png",
+    //   width: "200",
+    //   height: "200",
+    //   inLanguage: "en-US"
+    // },
+    {
+      "@type": "WebPage",
+      "@id": Astro.props.ogp?.canonical,
+      url: Astro.props.ogp?.canonical,
+      name: {title},
+      // datePublished: "2020-07-21T07:47:00-07:00",
+      // dateModified: "2020-09-07T10:59:21-07:00",
+      isPartOf: { "@id": "https://undefined.behavio.rs/#website" },
+      // primaryImageOfPage: {
+      //   "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png"
+      // },
+      inLanguage: "en-US"
+    },
+    {
+      "@type": "Person",
+      "@id": "https://xevion.dev",
+      name: "Ryan Walters",
+      url: "https://xevion.dev",
+      image: {
+        "@type": "ImageObject",
+        // "@id": "https://secure.gravatar.com/avatar/13d11a314fe4096840a13b4ae4eb1796?s=96&amp;d=retro&amp;r=pg",
+        // url: "https://secure.gravatar.com/avatar/13d11a314fe4096840a13b4ae4eb1796?s=96&amp;d=retro&amp;r=pg",
+        caption: "Ryan Walters",
+        inLanguage: "en-US"
+      },
+      worksFor: { "@id": "https://undefined.behavio.rs/#organization" }
+    },
+    {
+      "@type": "BlogPosting",
+      headline: title,
+      datePublished: "2020-07-21T07:47:00-07:00",
+      dateModified: "2020-09-07T10:59:21-07:00",
+      author: { "@id": "https://xevion.dev" },
+      // publisher: { "@id": "https://undefined.behavio.rs/#organization" },
+      description: Astro.props.ogp?.description,
+      name: title,
+      // "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#richSnippet",
+      isPartOf: {
+        // "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#webpage"
+      },
+      image: {
+        // "@id": "https://undefined.behavio.rs/wp-content/uploads/2020/07/calendar-month-view-previous-past-months-1024x682.png"
+      },
+      inLanguage: "en-US",
+      mainEntityOfPage: {
+        // "@id": "https://undefined.behavio.rs/how-to-make-a-monthly-calendar-with-real-data/#webpage"
+      }
+    }
+  ]
+}
+
+const linkedDataTag = "<script type='application/ld+json'>" + JSON.stringify(linkedData) + "</script>"
 ---

 <!doctype html>
@@ -22,6 +96,8 @@ const title =
    <meta content="width=device-width" name="viewport" />
    <meta name="build-commit-id" content={build_revision} />
    <title>{title}</title>
+    <SEO {...Astro.props.ogp} />
+    <Fragment set:html={linkedDataTag} />
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
    <link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />
--- a/src/layouts/General.astro
+++ b/src/layouts/General.astro
@@ -1,6 +1,7 @@
 ---
 import Base from "@layouts/Base.astro";
 import Header from "@components/Header.astro";
+import type { Props as SEOProps } from "astro-seo";

 const repository_url = `https://github.com/${
  import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER
@@ -9,12 +10,13 @@ const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;

 interface Props {
  title?: string;
+  ogp?: SEOProps
 }

-const { title } = Astro.props;
+const { title, ogp } = Astro.props;
 ---

-<Base title={title}>
+<Base title={title} ogp={ogp}>
  <Header className="mt-5 mb-3" />
  <nav
    class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none"
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -2,15 +2,83 @@
 import General from "@layouts/General.astro";
 import Time from "@components/Time.tsx";
 import { type CollectionEntry } from "astro:content";
+import type { Props as SEOProps } from "astro-seo";
+
 interface Props {
  post: CollectionEntry<"blog">;
 }
+
 const { post } = Astro.props;
 const { title, pubDate, tags } = post.data;
 const tagCount = tags.length;
+const ogp: SEOProps = {
+  title,
+  description: post.data.description,
+  canonical: `${Astro.site}posts/${post.slug}`,
+  openGraph: {
+    optional: {
+      siteName: "undefined behaviors",
+
+      locale: "en_US",
+    },
+    basic: {
+      title,
+      type: "article",
+      image: post.data.preview_image ?? "/img/default.png",
+    },
+    article: {
+      tags,
+      section: "Article",
+    },
+  },
+  twitter: {
+    site: "@xevioni",
+    creator: "@xevioni",
+    description: post.data.description,
+    card: "summary_large_image",
+    image: post.data.preview_image ?? "/img/default.png",
+    title: title,
+
+  },
+  extend: {
+    meta: [
+      { content: "Written by", name: "twitter:label1" },
+      { content: "Ryan Walters", name: "twitter:data1" },
+    ],
+  },
+};
+
+/**
+ * 
+ * title={title}
+    description="A heavily optimized description full of well-researched keywords."
+    openGraph={{
+      basic: {
+        title: "A Very Descriptive Title",
+        type: "A type.",
+        image: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
+      }
+    }}
+    twitter={{
+      creator: "@xevioni"
+    }}
+    extend={{
+      // extending the default link tags
+      link: [{ rel: "icon", href: "/favicon.ico" }],
+      // extending the default meta tags
+      meta: [
+        {
+          name: "twitter:image",
+          content: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
+        },
+        { name: "twitter:title", content: "Tinker Tailor Soldier Spy" },
+        { name: "twitter:description", content: "Agent" },
+      ],
+    }}
+ */
 ---

-<General title={title}>
+<General title={title} ogp={ogp}>
  <div class="max-w-3xl mx-4">
    <h1>
      <a href={post.slug}>