diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index c2770ca..4bad68e 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -18,7 +18,7 @@ const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } =
 
 const { Content } = await post.render();
 
-const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
+const ogUrl = new URL(ogImage ? ogImage : `${post.slug}.png`, Astro.url.origin)
   .href;
 ---
 
diff --git a/src/pages/[ogImage].png.ts b/src/pages/[ogImage].png.ts
new file mode 100644
index 0000000..a1c8af1
--- /dev/null
+++ b/src/pages/[ogImage].png.ts
@@ -0,0 +1,8 @@
+import generateOgImages from "@utils/generateOgImages";
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = async () => new Response(await generateOgImages());
+
+export const getStaticPaths = () => [
+  { params: { ogImage: "generating images with " } },
+];
diff --git a/src/pages/[ogTitle].svg.ts b/src/pages/[ogTitle].svg.ts
deleted file mode 100644
index ea67f55..0000000
--- a/src/pages/[ogTitle].svg.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getCollection } from "astro:content";
-import generateOgImage from "@utils/generateOgImage";
-import type { APIRoute } from "astro";
-
-export const GET: APIRoute = async ({ params }) =>
-  new Response(await generateOgImage(params.ogTitle));
-
-const postImportResult = await getCollection("blog", ({ data }) => !data.draft);
-const posts = Object.values(postImportResult);
-
-export function getStaticPaths() {
-  return posts
-    .filter(({ data }) => !data.ogImage)
-    .map(({ data }) => ({
-      params: { ogTitle: data.title },
-    }));
-}
diff --git a/src/utils/generateOgImage.tsx b/src/utils/generateOgImages.tsx
similarity index 74%
rename from src/utils/generateOgImage.tsx
rename to src/utils/generateOgImages.tsx
index d33d122..328ab38 100644
--- a/src/utils/generateOgImage.tsx
+++ b/src/utils/generateOgImages.tsx
@@ -2,6 +2,7 @@ import satori, { type SatoriOptions } from "satori";
 import { SITE } from "@config";
 import { writeFile } from "node:fs/promises";
 import { Resvg } from "@resvg/resvg-js";
+import { getCollection } from "astro:content";
 
 const fetchFonts = async () => {
   // Regular Font
@@ -135,21 +136,42 @@ const options: SatoriOptions = {
   ],
 };
 
-const generateOgImage = async (mytext = SITE.title) => {
-  const svg = await satori(ogImage(mytext), options);
+const generateOgImages = async () => {
+  const postImportResult = await getCollection(
+    "blog",
+    ({ data }) => !data.draft
+  );
+  const posts = Object.values(postImportResult).filter(
+    ({ data }) => !data.ogImage
+  );
 
-  // render png in production mode
-  if (import.meta.env.MODE === "production") {
-    const resvg = new Resvg(svg);
-    const pngData = resvg.render();
-    const pngBuffer = pngData.asPng();
+  const imageGenerationPromises = posts.map(async post => {
+    const svg = await satori(ogImage(post.data.title), options);
 
-    console.info("Output PNG Image  :", `${mytext}.png`);
+    // render png in production mode
+    if (import.meta.env.MODE === "production") {
+      const resvg = new Resvg(svg);
+      const pngData = resvg.render();
+      const pngBuffer = pngData.asPng();
 
-    await writeFile(`./dist/${mytext}.png`, pngBuffer);
-  }
+      const outputImage = `${post.slug}.png`;
 
-  return svg;
+      const LIGHT_BLUE = "\x1b[94m";
+      const DARK_GRAY = "\x1b[30m";
+      const RESET = "\x1b[0m";
+      console.info(
+        `  ${LIGHT_BLUE}└─${RESET} output png image:`,
+        `${DARK_GRAY}/${outputImage}${RESET}`
+      );
+
+      await writeFile(`./dist/${outputImage}`, pngBuffer);
+    }
+  });
+
+  // Wait for all image generation operations to complete
+  await Promise.all(imageGenerationPromises);
+
+  return null;
 };
 
-export default generateOgImage;
+export default generateOgImages;