diff --git a/src/lib/types.ts b/src/lib/types.ts
index 797762f..d080142 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -8,6 +8,7 @@ export type Post = {
 	categories: Categories[]
 	published: boolean
     readTime: number
+    socialPreview?: string
 }
 
 export type WorkEntry = {
diff --git a/src/posts/2024-03-07_apple-vision-pro.md b/src/posts/2024-03-07_apple-vision-pro.md
index d92d411..ebe2b46 100644
--- a/src/posts/2024-03-07_apple-vision-pro.md
+++ b/src/posts/2024-03-07_apple-vision-pro.md
@@ -8,6 +8,7 @@ categories:
   - XR
   - Apple
 published: true
+socialPreview: /apple-vision-pro/apple-vision-pro.webp
 ---
 
 ![Apple Vision Pro](/apple-vision-pro/apple-vision-pro.webp)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fbf7fe1..06f6ff1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,10 @@
 	export let data;
 </script>
 
+<svelte:head>
+	<meta property="og:url" content={`https://candrewlee14.github.io${data.pathname}`} />
+</svelte:head>
+
 <div class="flex flex-row min-w-screen h-2">
 	{#each ['bg-red-400 dark:bg-red-600', 'bg-yellow-400 dark:bg-yellow-600', 'bg-green-400 dark:bg-green-600', 'bg-violet-400 dark:bg-violet-600'] as color}
 		<div class={`flex-grow ${color}`}>&nbsp;</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2e61c84..80f9dcc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,11 +4,18 @@
 </script>
 
 <svelte:head>
+	<title>About Me - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. Learn more about me!"
+		content="Hello, I'm Andrew Lee! Learn more about me here."
 	/>
-	<title>About Me - Andrew Lee</title>
+	<meta property="og:title" content="About Me - Andrew Lee" />
+	<meta property="og:description" content="Hello, I'm Andrew Lee! Learn more about me here." />
+	<meta property="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="profile" />
+	<meta property="og:profile:first_name" content="Andrew" />
+	<meta property="og:profile:last_name" content="Lee" />
+	<meta property="og:profile:username" content="candrewlee14" />
 </svelte:head>
 
 <div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 4abe3fc..0a8f288 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -4,7 +4,7 @@
 	import utc from 'dayjs/plugin/utc';
 	import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
 	import { andrewTz } from '$lib/posts';
-	
+
 	dayjs.extend(utc);
 	dayjs.extend(timezone);
 
@@ -15,8 +15,12 @@
 	<title>Blog - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. Check out my blog!"
+		content="Hello, I'm Andrew Lee! Check out my blog!"
 	/>
+	<meta property="og:title" content="Blog - Andrew Lee" />
+	<meta property="og:description" content="Hello, I'm Andrew Lee! Check out my blog!" />
+	<meta property="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="w-full h-full flex justify-center pb-6">
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 3ab25d7..243db84 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -2,17 +2,24 @@
 	import dayjs from 'dayjs';
 	import utc from 'dayjs/plugin/utc';
 	import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
+	import { andrewTz } from '$lib/posts';
 	dayjs.extend(utc);
 	dayjs.extend(timezone);
 
-	const andrewTz = 'America/Denver';
-
 	export let data;
 </script>
 
 <svelte:head>
 	<title>{data.meta.title} - Andrew Lee</title>
-	<meta name="description" content={data.meta.description} />
+	<meta property="og:title" content={data.meta.title} />
+	<meta property="og:description" content={`${data.meta.description} - Written by Andrew Lee`}/>
+	<meta
+		property="og:image"
+		content={data.meta.socialPreview
+			? `https://candrewlee14.github.io${data.meta.socialPreview}`
+			: 'https://candrewlee14.github.io/candrewlee14-social-preview.png'}
+	/>
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="flex flex-col items-center">
diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte
index 369f3e4..b0a00ec 100644
--- a/src/routes/work/+page.svelte
+++ b/src/routes/work/+page.svelte
@@ -124,11 +124,18 @@
 </script>
 
 <svelte:head>
+	<title>Work - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. View my work experience here."
+		content="Hello, I'm Andrew Lee! View my work experience here."
 	/>
-	<title>Work - Andrew Lee</title>
+	<meta property="og:title" content="Work - Andrew Lee" />
+	<meta
+		property="og:description"
+		content="Hello, I'm Andrew Lee! View my work experience here."
+	/>
+	<meta name="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="flex flex-col items-center -ml-2">
diff --git a/static/candrewlee14-social-preview.png b/static/candrewlee14-social-preview.png
new file mode 100644
index 0000000..5b3f235
Binary files /dev/null and b/static/candrewlee14-social-preview.png differ