diff --git a/src/public/og-image.jpg b/src/public/og-image.jpg
new file mode 100644
index 0000000..2ec5a04
Binary files /dev/null and b/src/public/og-image.jpg differ
diff --git a/src/src/layouts/content.astro b/src/src/layouts/content.astro
index 08f7b46..ed61ebb 100644
--- a/src/src/layouts/content.astro
+++ b/src/src/layouts/content.astro
@@ -8,19 +8,30 @@ import Background from "@/components/background";
 export interface Props {
   title: string;
   description: string;
-  permalink: string;
-  current?: string;
 }
 
-const { title, description, permalink, current } = Astro.props;
+const { title, description } = Astro.props;
+const ogImage = "https://timmypidashev.dev/og-image.jpg";
 ---
 
 <html lang="en">
   <head>
+    <title>{title}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <!-- OpenGraph -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:description" content={description} />
+    <!-- Basic meta description for search engines -->
+    <meta name="description" content={description} />
+    <!-- Also used in OpenGraph for social media sharing -->
+    <meta property="og:description" content={description} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <title>{title}</title>
     <ClientRouter 
       defaultTransition={false}
       handleFocus={false}
diff --git a/src/src/layouts/index.astro b/src/src/layouts/index.astro
index df1bda1..a70ca54 100644
--- a/src/src/layouts/index.astro
+++ b/src/src/layouts/index.astro
@@ -8,15 +8,35 @@ import { ClientRouter } from "astro:transitions";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import Background from "@/components/background";
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+const ogImage = "https://timmypidashev.dev/og-image.jpg";
 ---
 
 <html lang="en">
-	<head>
+  <head>
+    <title>{title}</title>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width" />
+    <!-- OpenGraph -->
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImage} />
+    <meta name="twitter:description" content={description} />
+    <!-- Basic meta description for search engines -->
+    <meta name="description" content={description} />
+    <!-- Also used in OpenGraph for social media sharing -->
+    <meta property="og:description" content={description} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="sitemap" href="/sitemap-index.xml" />
-    <title>{content.title}</title>
     <ClientRouter />
 	</head>
   <body class="bg-background text-foreground">
diff --git a/src/src/pages/about.astro b/src/src/pages/about.astro
index b36bb7b..7bfe895 100644
--- a/src/src/pages/about.astro
+++ b/src/src/pages/about.astro
@@ -6,7 +6,10 @@ import Timeline from "@/components/about/timeline";
 import CurrentFocus from "@/components/about/current-focus";
 import OutsideCoding from "@/components/about/outside-coding";
 ---
-<ContentLayout title="About | Timothy Pidashev">
+<ContentLayout 
+  title="About | Timothy Pidashev"
+  description="A software engineer passionate about the web, open source, and building innovative solutions."
+>
   <div class="min-h-screen">
     <section class="h-screen flex items-center justify-center">
       <Intro client:load />
diff --git a/src/src/pages/blog/index.astro b/src/src/pages/blog/index.astro
index 75f26a1..139802c 100644
--- a/src/src/pages/blog/index.astro
+++ b/src/src/pages/blog/index.astro
@@ -11,6 +11,9 @@ const posts = (await getCollection("blog", ({ data }) => {
 );
 ---
 
-<ContentLayout title="Blog | Timothy Pidashev">
+<ContentLayout 
+  title="Blog | Timothy Pidashev"
+  description="My experiences and technical insights into software development and the ever-evolving world of programming."
+>
   <BlogPostList posts={posts} client:load />
 </ContentLayout>
diff --git a/src/src/pages/index.astro b/src/src/pages/index.astro
index 7741b9b..e943cb4 100644
--- a/src/src/pages/index.astro
+++ b/src/src/pages/index.astro
@@ -5,6 +5,9 @@ import IndexLayout from "@/layouts/index.astro";
 import Hero from "@/components/hero";
 ---
 
-<IndexLayout content={{ title: "Timothy Pidashev" }}>
+<IndexLayout 
+  title="Timothy Pidashev" 
+  description="Turning coffee into code since 2018."
+>
   <Hero client:load />
 </IndexLayout>
diff --git a/src/src/pages/projects/index.astro b/src/src/pages/projects/index.astro
index 7a5475a..9d700b0 100644
--- a/src/src/pages/projects/index.astro
+++ b/src/src/pages/projects/index.astro
@@ -10,6 +10,9 @@ const projects = (await getCollection("projects", ({ data }) => {
 );
 ---
 
-<ContentLayout title="Projects | Timothy Pidashev">
+<ContentLayout 
+  title="Projects | Timothy Pidashev"
+  description="My portfolio of software, including web apps, dev tools, and passion projects."
+>
   <ProjectList projects={projects} client:load />
 </ContentLayout>
diff --git a/src/src/pages/resume.astro b/src/src/pages/resume.astro
index 68c549b..8ff5d09 100644
--- a/src/src/pages/resume.astro
+++ b/src/src/pages/resume.astro
@@ -5,7 +5,10 @@ import ContentLayout from "@/layouts/content.astro";
 import Resume from "@/components/resume";
 ---
 
-<ContentLayout title="Resume | Timothy Pidashev">
+<ContentLayout 
+  title="Resume | Timothy Pidashev"
+  description = "My professional experience, skills, and development journey in software engineering."
+>
   <div class="flex items-center justify-center w-full">
     <Resume client:load />
   </div>
