Added some extra metadata to the website

3 files changed, 28 insertions, 16 deletions

diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..d532d80
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+
+    <meta property="og:title" content={title} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://kyren.codes/" />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content="https://kyren.codes/favicon.svg">
+    <meta property="og:image:alt" content="">
+</head>
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
index 62f66bc..7394ac1 100644
--- a/src/layouts/Blog.astro
+++ b/src/layouts/Blog.astro
@@ -1,5 +1,6 @@
 ---
 import Markdown from "@components/Markdown.astro";
+import Head from "@components/Head.astro";
 
 interface Props {
     title: string;
@@ -10,14 +11,7 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="description" content="Astro description" />
-        <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
-    </head>
+    <Head title={title} description={title} />
     <body>
         <main class="w-[70%] m-auto py-16">
             <Markdown>
diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro
index 927b3e6..890d798 100644
--- a/src/layouts/Terminal.astro
+++ b/src/layouts/Terminal.astro
@@ -1,6 +1,7 @@
 ---
 import "@styles/terminal.css";
 import Nav from "@components/Nav.astro";
+import Head from "@components/Head.astro";
 
 interface Props {
     path: string;
@@ -11,14 +12,7 @@ const { path: title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="description" content="Astro description" />
-        <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <meta name="generator" content={Astro.generator} />
-        <title>/home/kyren/{title}</title>
-    </head>
+    <Head title=`/home/kyren/${title}` description="My personal website" />
     <body>
         <main>
             <Nav path={title} />