diff --git a/src/pages/og.png.ts b/src/pages/og.png.ts
new file mode 100644
index 0000000..d35baee
--- /dev/null
+++ b/src/pages/og.png.ts
@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro";
+import { generateOgImageForSite } from "@utils/generateOgImages";
+
+export const GET: APIRoute = async () =>
+  new Response(await generateOgImageForSite(), {
+    headers: { "Content-Type": "image/png" },
+  });
diff --git a/src/pages/posts/[slug]/index.png.ts b/src/pages/posts/[slug]/index.png.ts
new file mode 100644
index 0000000..839dc3e
--- /dev/null
+++ b/src/pages/posts/[slug]/index.png.ts
@@ -0,0 +1,20 @@
+import type { APIRoute } from "astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+import { generateOgImageForPost } from "@utils/generateOgImages";
+import { slugifyStr } from "@utils/slugify";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog").then(p =>
+    p.filter(({ data }) => !data.draft && !data.ogImage)
+  );
+
+  return posts.map(post => ({
+    params: { slug: slugifyStr(post.data.title) },
+    props: post,
+  }));
+}
+
+export const GET: APIRoute = async ({ props }) =>
+  new Response(await generateOgImageForPost(props as CollectionEntry<"blog">), {
+    headers: { "Content-Type": "image/png" },
+  });