Add OGP metadata for posts

This commit is contained in:
2024-02-01 02:33:59 -06:00
parent b7b5143b39
commit a2fb261232
6 changed files with 150 additions and 3 deletions

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

BIN
public/img/default.png Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

View File

@@ -3,6 +3,7 @@ title: "Bluetooth Pairing While Dual Booting"
pubDate: 2024-01-31 19:43:59 -0600 pubDate: 2024-01-31 19:43:59 -0600
tags: ["dual boot", "bluetooth", "registry", "windows", "linux"] 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" 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'; import { Image } from 'astro:assets';

View File

@@ -2,10 +2,13 @@
import "@styles/global.scss"; import "@styles/global.scss";
import "@styles/fonts.scss"; import "@styles/fonts.scss";
import { ViewTransitions } from "astro:transitions"; 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 { interface Props {
title?: string; title?: string;
build_revision?: string; build_revision?: string;
ogp?: SEOProps;
} }
const { title: titleProp, build_revision } = Astro.props; const { title: titleProp, build_revision } = Astro.props;
@@ -13,6 +16,77 @@ const title =
titleProp != undefined titleProp != undefined
? `${titleProp} | undefined.behavio.rs` ? `${titleProp} | undefined.behavio.rs`
: "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&d=retro&r=pg",
// url: "https://secure.gravatar.com/avatar/13d11a314fe4096840a13b4ae4eb1796?s=96&d=retro&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> <!doctype html>
@@ -22,6 +96,8 @@ const title =
<meta content="width=device-width" name="viewport" /> <meta content="width=device-width" name="viewport" />
<meta name="build-commit-id" content={build_revision} /> <meta name="build-commit-id" content={build_revision} />
<title>{title}</title> <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-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" /> <link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />

View File

@@ -1,6 +1,7 @@
--- ---
import Base from "@layouts/Base.astro"; import Base from "@layouts/Base.astro";
import Header from "@components/Header.astro"; import Header from "@components/Header.astro";
import type { Props as SEOProps } from "astro-seo";
const repository_url = `https://github.com/${ const repository_url = `https://github.com/${
import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER 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 { interface Props {
title?: string; 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" /> <Header className="mt-5 mb-3" />
<nav <nav
class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none" class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none"

View File

@@ -2,15 +2,83 @@
import General from "@layouts/General.astro"; import General from "@layouts/General.astro";
import Time from "@components/Time.tsx"; import Time from "@components/Time.tsx";
import { type CollectionEntry } from "astro:content"; import { type CollectionEntry } from "astro:content";
import type { Props as SEOProps } from "astro-seo";
interface Props { interface Props {
post: CollectionEntry<"blog">; post: CollectionEntry<"blog">;
} }
const { post } = Astro.props; const { post } = Astro.props;
const { title, pubDate, tags } = post.data; const { title, pubDate, tags } = post.data;
const tagCount = tags.length; 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"> <div class="max-w-3xl mx-4">
<h1> <h1>
<a href={post.slug}> <a href={post.slug}>