diff --git a/app/(docs)/docs/[[...slug]]/head.tsx b/app/(docs)/docs/[[...slug]]/head.tsx
index c54e4f5..f566c33 100644
--- a/app/(docs)/docs/[[...slug]]/head.tsx
+++ b/app/(docs)/docs/[[...slug]]/head.tsx
@@ -1,5 +1,14 @@
+import { allDocs } from "contentlayer/generated"
+
 import MdxHead from "@/components/docs/mdx-head"
 
 export default function Head({ params }) {
-  return <MdxHead params={params} og={{ type: "Documentation" }} />
+  const slug = params?.slug?.join("/") || ""
+  const doc = allDocs.find((doc) => doc.slugAsParams === slug)
+  return (
+    <MdxHead
+      params={params}
+      og={{ heading: doc.description, type: "Documentation" }}
+    />
+  )
 }
diff --git a/components/docs/mdx-head.tsx b/components/docs/mdx-head.tsx
index 8d12bbd..6801b24 100644
--- a/components/docs/mdx-head.tsx
+++ b/components/docs/mdx-head.tsx
@@ -22,8 +22,8 @@ export default function MdxHead({ params, og }: MdxHeadProps) {
   let ogUrl = new URL(`${url}/og.jpg`)
 
   if (og.type) {
-    ogUrl = new URL(url)
-    ogUrl.searchParams.set("heading", mdxDoc.title)
+    ogUrl = new URL(`${url}/api/og`)
+    ogUrl.searchParams.set("heading", og.heading || mdxDoc.title)
     ogUrl.searchParams.set("type", og.type)
   }