feat(seo): Add SEO element + refactor head outlet

- Added a new SEO component to improve search engine optimization. - Refactored the head outlet in BaseHead and Layout components to use slots for better code organization and reusability.
Nodsoft · Jun 27, 2024 · 216e232 · 216e232
1 parent 802b991
commit 216e232
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 38 deletions.
diff --git a/nodsoft_moltenobsidian_web/src/components/BaseHead.astro b/nodsoft_moltenobsidian_web/src/components/BaseHead.astro
@@ -1,15 +1,5 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-
-
-// const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
-const defaultProps = {
-  title: "MoltenObsidian",
-  description: ".NET 6+ Library for Obsidian-flavoured Markdown parsing for Blazor with Vault mapping support."
-}
-
-const { title, description } = defaultProps;
 const base = import.meta.env.BASE_URL ?? "/";
 ---
 
@@ -26,7 +16,6 @@ const base = import.meta.env.BASE_URL ?? "/";
 <link rel="manifest" href={base + "site.webmanifest"} />
 <link rel="sitemap" href={base + "sitemap-index.xml"} />
 <meta name="msapplication-TileColor" content="#da532c" />
-<meta name="theme-color" content="#ffffff" />
 <meta name="generator" content={Astro.generator} />
 
 <ViewTransitions />
@@ -47,25 +36,5 @@ const base = import.meta.env.BASE_URL ?? "/";
   " 
 />
 
-<!-- Canonical URL -->
-<!--<link rel="canonical" href={canonicalURL} />-->
-
-<!-- Primary Meta Tags -->
-<title>{title}</title>
-<base href={base} />
-<meta name="title" content={title} />
-<meta name="description" content={description} />
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content="website" />
-<meta property="og:url" content={Astro.url} />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-<meta property="og:image" content={base + "android-chrome-192x192.png"} />
-
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
-<meta property="twitter:description" content={description} />
+<!-- Outlet -->
+<slot />
diff --git a/nodsoft_moltenobsidian_web/src/layouts/Layout.astro b/nodsoft_moltenobsidian_web/src/layouts/Layout.astro
@@ -5,7 +5,6 @@ import Sidebar from "../components/Sidebar.astro";
 import { SITE_TITLE } from "../consts";
 import { ViewTransitions } from "astro:transitions";
 
-
 interface Props {
 	title: string;
 	description: string;
@@ -20,7 +19,9 @@ const baseHeadTitle = title ? `${title} - ${SITE_TITLE}` : SITE_TITLE;
 <html lang="en" transition:animate="none">
 	<!--suppress HtmlRequiredTitleElement, included in BaseHead -->
 	<head>
-		<BaseHead title={baseHeadTitle} description={description} />
+		<BaseHead>
+			<slot name="head" />
+		</BaseHead>
 	</head>
 
 	<body class="flex-row-lg">

diff --git a/nodsoft_moltenobsidian_web/src/pages/404.astro b/nodsoft_moltenobsidian_web/src/pages/404.astro
@@ -2,11 +2,28 @@
 import { Image } from 'astro:assets';
 import logo from '../../public/android-chrome-512x512.png'
 import Layout from "../layouts/Layout.astro";
+import { Seo } from "astro-seo-meta";
 
 const path = Astro.url
 ---
 
 <Layout>
+    <Seo
+      slot="head"
+      title="MoltenObsidian"
+      description=".NET 6+ CLI Tool & Blazor Library for Obsidian-flavoured Markdown parsing with Vault mapping support."
+      keywords={["MoltenObsidian", "Obsidian", "Markdown", "Vault", "Blazor", "CLI", ".NET"]}
+      themeColor="#883AEB"
+      colorScheme="dark"
+      facebook={{
+          image: "/android-chrome-512x512.png",
+          type: "website"
+      }}
+
+      twitter.image="/android-chrome-512x512.png"
+      twitter.card="summary_large_image"
+    />
+
     <article class="cover-center">
         <div class="title">
             <h1>404</h1>

diff --git a/nodsoft_moltenobsidian_web/src/pages/[...path].astro b/nodsoft_moltenobsidian_web/src/pages/[...path].astro
@@ -2,10 +2,10 @@
 import Layout from '../layouts/Layout.astro';
 import { cast, toRelativeVaultPath } from '../vault-utils';
 import { VaultManifestClient } from 'moltenobsidian-ssg-client/manifest-client';
-import { VaultManifest, VaultFile, VaultFileMetadata } from 'moltenobsidian-ssg-client/vault-manifest';
+import type { VaultManifest, VaultFile, VaultFileMetadata } from 'moltenobsidian-ssg-client/vault-manifest';
 import manifest from '../../public/vault/moltenobsidian.manifest.json';
 import fs from 'node:fs/promises';
-import * as console from "console";
+import { Seo } from "astro-seo-meta";
 
 
 export const manifestClient = VaultManifestClient.fromManifest(manifest as VaultManifest);
@@ -39,7 +39,24 @@ const { path } = Astro.params;
 const { content, cssclasses } = Astro.props;
 ---
 
-<Layout>    
+<Layout>   
+    <Seo 
+      slot="head"
+      title="MoltenObsidian"
+      description=".NET 6+ CLI Tool & Blazor Library for Obsidian-flavoured Markdown parsing with Vault mapping support."
+      keywords={["MoltenObsidian", "Obsidian", "Markdown", "Vault", "Blazor", "CLI", ".NET"]}
+      icon="/favicon.ico"
+      themeColor="#883AEB"
+      colorScheme="dark"
+      facebook={{
+          image: "/android-chrome-512x512.png",
+          type: "website"
+      }}
+
+      twitter.image="/android-chrome-512x512.png"
+      twitter.card="summary_large_image"
+    />
+
     <article style="margin-top: 4rem; margin-bottom: 4rem;" class:list={cssclasses}>
         <Fragment set:html={content} />
     </article>