diff --git a/src/app/docs-og/[...slug]/route.tsx b/src/app/docs-og/[...slug]/route.tsx
new file mode 100644
index 00000000..7467eb71
--- /dev/null
+++ b/src/app/docs-og/[...slug]/route.tsx
@@ -0,0 +1,25 @@
+import { generateOGImage } from "fumadocs-ui/og";
+import { docsSource } from "@/src/lib/source";
+import { notFound } from "next/navigation";
+
+export async function GET(
+	_req: Request,
+	{ params }: RouteContext<"/docs-og/[...slug]">,
+) {
+	const { slug } = await params;
+	const page = docsSource.getPage(slug.slice(0, -1));
+	if (!page) notFound();
+
+	return generateOGImage({
+		title: page.data.title,
+		description: page.data.description,
+		site: "My App",
+	});
+}
+
+export function generateStaticParams() {
+	return docsSource.generateParams().map((page) => ({
+		...page,
+		slug: [...page.slug, "image.png"],
+	}));
+}
diff --git a/src/app/guide-og/[...slug]/route.tsx b/src/app/guide-og/[...slug]/route.tsx
new file mode 100644
index 00000000..ee6ee83c
--- /dev/null
+++ b/src/app/guide-og/[...slug]/route.tsx
@@ -0,0 +1,25 @@
+import { generateOGImage } from "fumadocs-ui/og";
+import { guideSource } from "@/src/lib/source";
+import { notFound } from "next/navigation";
+
+export async function GET(
+	_req: Request,
+	{ params }: RouteContext<"/guide-og/[...slug]">,
+) {
+	const { slug } = await params;
+	const page = guideSource.getPage(slug.slice(0, -1));
+	if (!page) notFound();
+
+	return generateOGImage({
+		title: page.data.title,
+		description: page.data.description,
+		site: "My App",
+	});
+}
+
+export function generateStaticParams() {
+	return guideSource.generateParams().map((page) => ({
+		...page,
+		slug: [...page.slug, "image.png"],
+	}));
+}