Add different meta descriptions for each page.

Rem0o · Oct 24, 2024 · 2d77264 · 2d77264
1 parent 7214d2b
commit 2d77264
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/src/layouts/baseLayout.astro b/src/layouts/baseLayout.astro
@@ -8,9 +8,10 @@ import "../styles/global.css";
 interface Props {
   title: string;
   navTitle: string;
+  metaDescription?: string
 }
 
-const { title, navTitle } = Astro.props;
+const { title, navTitle, metaDescription } = Astro.props;
 
 ---
 
@@ -19,7 +20,7 @@ const { title, navTitle } = Astro.props;
     <!-- Google tag (gtag.js) -->
     <GoogleAnalytics />
     <!-- SEO -->
-    <SEO title={title} />
+    <SEO title={title} description={metaDescription} />
 
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta charset="UTF-8" />

diff --git a/src/layouts/seo.astro b/src/layouts/seo.astro
@@ -3,13 +3,14 @@ import seo from "./../common/seo";
 
 interface Props {
   title: string;
+  description?: string
 }
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <title>Fan Control - {title}</title>
-<meta name="description" content={seo.description} />
+<meta name="description" content={ description ?? seo.description} />
 <meta name="image" content={seo.image} />
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content={seo.title} />

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -2,6 +2,6 @@
 import BaseLayout from "../layouts/baseLayout.astro";
 ---
 
-<BaseLayout title="404">
-  <p class="text-lg">404</p>
+<BaseLayout title="404" navTitle="404">
+  <p class="text-lg m-4"><span>404</span></p>
 </BaseLayout>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,8 +1,10 @@
 ---
 import BaseLayout from "../layouts/baseLayout.astro";
 import { AboutPage } from "../reactPages/about";
+
+const description = "Open-source references for the FanControl software.";
 ---
 
-<BaseLayout title="About" navTitle="About">
+<BaseLayout title="About" navTitle="About" metaDescription={description}>
   <AboutPage client:load />
 </BaseLayout>
diff --git a/src/pages/docs.astro b/src/pages/docs.astro
@@ -1,8 +1,9 @@
 ---
 import BaseLayout from "../layouts/baseLayout.astro";
 import { DocsPage } from "../reactPages/docs";
----
 
-<BaseLayout title="Detailed Documentation" navTitle="Docs">
+const description = "Detailled documentation for the FanControl software.";
+---
+<BaseLayout title="Detailed Documentation" navTitle="Docs" metaDescription={description}>
   <DocsPage client:load />
 </BaseLayout>