diff --git a/src/components/helper/head/Meta.astro b/src/components/helper/head/Meta.astro
new file mode 100644
index 0000000..771fcb4
--- /dev/null
+++ b/src/components/helper/head/Meta.astro
@@ -0,0 +1,21 @@
+---
+const { title, description, ogImage = "" } = Astro.props
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+---
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+{/* Open Graph / Facebook */}
+<meta name="og:title" content={title} />
+<meta name="og:description" content={description} />
+{ogImage && <meta name="og:image" content={ogImage} />}
+<meta property="og:locale" content="en_US"/>
+<meta property="og:type" content="website" />
+<meta property="og:url" content={canonicalURL} />
+{/* Twitter */}
+<meta name="twitter:card" content="summary"></meta>
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+{ogImage && <meta name="twitter:image" content={ogImage} />}
+
+
diff --git a/src/config.ts b/src/config.ts
index 0ac23a7..8239181 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,9 @@
 export const siteConfig = {
+    // site meta info
     title: '/var/log/mercury',
     description: 'A blog about software development, technology, and life.',
+    homepageOgImage: '',
+    // site components
     navBarItems: [
         // additional items in the navbar
         // the order of the items will be the same as the order in the array
@@ -8,6 +11,8 @@ export const siteConfig = {
         { text: "RSS", link: "/rss.xml" },
         { text: "GitHub", link: "https://github.com/GrassBlock1/mercury" },
     ],
+    // footer
+    // yes you can write html safely here
     customFooter: '<i>I have no mouth, and I must SCREAM</i>',
     comments: {
         type: 'fediverse', // 'artalk','giscus','fediverse','hatsu'
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 130f335..cc88648 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,9 +4,11 @@ import Search from '../components/Search.astro';
 import ThemeSwitcher from '../components/ThemeSwitcher.astro';
 import BackToTop from "../components/BackToTop.astro";
 import { siteConfig } from "../config";
+import Meta from "../components/helper/head/Meta.astro";
 
 interface Props {
   title: string;
+  description: string;
   path?: string;
 }
 
@@ -16,7 +18,7 @@ const formattedPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
 const navBarItems = siteConfig.navBarItems
 const customFooter = siteConfig.customFooter
 
-const { title, path = formattedPath } = Astro.props;
+const { title, path = formattedPath, description = siteConfig.description } = Astro.props;
 // TODO: make the path dynamic
 ---
 
@@ -27,6 +29,7 @@ const { title, path = formattedPath } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
+    <Meta title={title} description={description}/>
     <title>{title}</title>
   </head>
   <body>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index ced400d..b9deb1e 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -13,7 +13,7 @@ const { Content } = await entry.render();
 
 ---
 
-<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`}>
+<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`} description={entry.data.description} >
     <h1 class="post-title">{entry.data.title}</h1>
     <div class="post-content">
         <Content/>
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index aa8a993..7589b87 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -19,6 +19,7 @@ const slug = Astro.params.slug;
 <Layout
   title={entry.data.title}
   path={`~/grassblock/micr0blog/blog/${slug}`}
+  description={entry.data.description}
 >
       <h1 class="post-title">{entry.data.title}</h1>
       <span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
