diff --git a/src/lib/components/post/PostHead.svelte b/src/lib/components/post/PostHead.svelte
index 6f65ba3..cdbdcb1 100644
--- a/src/lib/components/post/PostHead.svelte
+++ b/src/lib/components/post/PostHead.svelte
@@ -25,7 +25,7 @@
     />
     <meta property="og:description" content={post.excerpt} />
     <meta property="og:site_name" content="Blog - Ewan's Corner" />
-    <meta property="og:image" content={$page.url.origin + "/api/og/" + post.rkey} />
+    <meta property="og:image" content={`${$page.url.origin}/api/og/blog/${post.rkey}.png`} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta
@@ -47,7 +47,7 @@
       content={`${post.title} - Blog - Ewan's Corner`}
     />
     <meta name="twitter:description" content={post.excerpt} />
-    <meta name="twitter:image" content={$page.url.origin + "/api/og/blog/" + post.rkey} />
+    <meta name="twitter:image" content={`${$page.url.origin}/api/og/blog/${post.rkey}.png`} />
   {:else}
     <title>Post Not Found - Blog - Ewan's Corner</title>
     <meta
@@ -55,4 +55,4 @@
       content="The requested blog post could not be found."
     />
   {/if}
-</svelte:head>
+</svelte:head>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fa88db0..4bb9ba3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -37,7 +37,7 @@
     content="Welcome to Ewan's Corner - A personal space where I share my thoughts on coding, technology, and life."
   />
   <meta property="og:site_name" content="Ewan's Corner" />
-  <meta property="og:image" content={$page.url.origin + "/api/og/main"} />
+  <meta property="og:image" content={`${$page.url.origin}/api/og/main.png`} />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
 
@@ -49,7 +49,7 @@
     name="twitter:description"
     content="Welcome to Ewan's Corner - A personal space where I share my thoughts on coding, technology, and life."
   />
-  <meta name="twitter:image" content={$page.url.origin + "/api/og/main"} />
+  <meta name="twitter:image" content={`${$page.url.origin}/api/og/main.png`} />
 </svelte:head>
 
 <!-- Latest Blog Post section (only show if we have posts) -->
diff --git a/src/routes/api/og/blog/+server.ts b/src/routes/api/og/blog.png/+server.ts
similarity index 100%
rename from src/routes/api/og/blog/+server.ts
rename to src/routes/api/og/blog.png/+server.ts
diff --git a/src/routes/api/og/blog/[rkey]/+server.ts b/src/routes/api/og/blog/[rkey].png/+server.ts
similarity index 100%
rename from src/routes/api/og/blog/[rkey]/+server.ts
rename to src/routes/api/og/blog/[rkey].png/+server.ts
diff --git a/src/routes/api/og/main/+server.ts b/src/routes/api/og/main.png/+server.ts
similarity index 100%
rename from src/routes/api/og/main/+server.ts
rename to src/routes/api/og/main.png/+server.ts
diff --git a/src/routes/api/og/now/+server.ts b/src/routes/api/og/now.png/+server.ts
similarity index 100%
rename from src/routes/api/og/now/+server.ts
rename to src/routes/api/og/now.png/+server.ts
diff --git a/src/routes/api/og/site/meta/+server.ts b/src/routes/api/og/site/meta.png/+server.ts
similarity index 100%
rename from src/routes/api/og/site/meta/+server.ts
rename to src/routes/api/og/site/meta.png/+server.ts
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 593efff..d16bf43 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -140,7 +140,7 @@
     content="Welcome to Blog - Ewan's Corner - A personal blog where I share my thoughts on coding, technology, and life."
   />
   <meta property="og:site_name" content="Blog - Ewan's Corner" />
-  <meta property="og:image" content={$page.url.origin + "/api/og/blog"} />
+  <meta property="og:image" content={`${$page.url.origin}/api/og/blog.png`} />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
 
@@ -152,7 +152,7 @@
     name="twitter:description"
     content="Welcome to Blog - Ewan's Corner - A personal blog where I share my thoughts on coding, technology, and life."
   />
-  <meta name="twitter:image" content={$page.url.origin + "/api/og/blog"} />
+  <meta name="twitter:image" content={`${$page.url.origin}/api/og/blog.png`} />
 </svelte:head>
 
 {#if isLoading}
diff --git a/src/routes/blog/rss/+server.ts b/src/routes/blog/rss/+server.ts
index cba2649..8219670 100644
--- a/src/routes/blog/rss/+server.ts
+++ b/src/routes/blog/rss/+server.ts
@@ -62,7 +62,7 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
   <link>${baseUrl}/blog</link>
   <atom:link href="${baseUrl}/blog/rss" rel="self" type="application/rss+xml" />
   <image>
-    <url>${baseUrl}/api/og/blog</url>
+    <url>${baseUrl}/api/og/blog.png</url>
     <title>Blog - Ewan's Corner</title>
     <link>${baseUrl}/blog</link>
   </image>
@@ -80,7 +80,7 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
     <author>${profileData.displayName || profileData.handle} (${
         profileData.handle
       })</author>
-    <media:content url="${baseUrl}/api/og/" medium="image" />
+   <media:content url="${baseUrl}/api/og/blog/${post.rkey}.png" medium="image" />
   </item>`
     )
     .join("")}
diff --git a/src/routes/now/+server.ts b/src/routes/now/+server.ts
index ace99c8..f746549 100644
--- a/src/routes/now/+server.ts
+++ b/src/routes/now/+server.ts
@@ -53,7 +53,7 @@ export const GET: RequestHandler = async ({ url, fetch }: { url: URL, fetch: typ
   <link>${baseUrl}/now</link>
   <atom:link href="${baseUrl}/now/rss" rel="self" type="application/rss+xml" />
   <image>
-    <url>${baseUrl}/api/og/now</url>
+    <url>${baseUrl}/api/og/now.png</url>
     <title>Now - ${profileData.displayName || profileData.handle}'s Status Updates</title>
     <link>${baseUrl}/now</link>
   </image>
diff --git a/src/routes/site/meta/+page.svelte b/src/routes/site/meta/+page.svelte
index 81492e6..6226e1e 100644
--- a/src/routes/site/meta/+page.svelte
+++ b/src/routes/site/meta/+page.svelte
@@ -27,7 +27,7 @@
     content="Learn about Ewan's Corner - including technology stack, website purpose, and privacy information."
   />
   <meta property="og:site_name" content="Ewan's Corner" />
-  <meta property="og:image" content={$page.url.origin + "/api/og/site/meta"} />
+  <meta property="og:image" content={`${$page.url.origin}/api/og/site/meta.png`} />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
 
@@ -39,7 +39,7 @@
     name="twitter:description"
     content="Learn about Ewan's Corner - including technology stack, website purpose, and privacy information."
   />
-  <meta name="twitter:image" content={$page.url.origin + "/api/og/site/meta"} />
+  <meta name="twitter:image" content={`${$page.url.origin}/api/og/site/meta.png`} />
 </svelte:head>
 
 <div class="max-w-2xl mx-auto px-4 py-8">