diff --git a/docs/app/components/og-image/OgImageDocs.vue b/docs/app/components/og-image/OgImageDocs.vue
new file mode 100644
index 0000000..ce74979
--- /dev/null
+++ b/docs/app/components/og-image/OgImageDocs.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { headline = '' } = defineProps<{
+  title?: string
+  description?: string
+  headline?: string
+}>()
+
+function truncate(str: string, max: number) {
+  if (!str || str.length <= max) return str
+  const cut = str.lastIndexOf(' ', max)
+  return `${str.slice(0, cut > 0 ? cut : max)}…`
+}
+</script>
+
+<template>
+  <div class="flex flex-row size-full">
+    <div
+      class="flex flex-col items-center justify-between"
+      style="width:200px;background:#eab308;padding:48px 0;"
+    >
+      <div style="flex:1;display:flex;align-items:center;justify-content:center;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="62" viewBox="0 0 208 128" fill="none">
+          <path stroke="#09090b" stroke-width="8" d="M199 9v110H9V9h190Z" />
+          <path fill="#09090b" d="M128 51.25V32h19.937v19.25H128ZM128 96V76.75h19.937V96H128ZM158.063 51.25V32H178v19.25h-19.937Zm0 44.75V76.75H178V96h-19.937ZM30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39H30Z" />
+        </svg>
+      </div>
+      <div style="font-family:'Geist Mono';font-size:11px;font-weight:600;color:#09090b;letter-spacing:0.12em;opacity:0.5;">
+        comark.dev
+      </div>
+    </div>
+
+    <div
+      class="flex flex-col flex-1"
+      style="background:#09090b;position:relative;overflow:hidden;"
+    >
+      <div
+        style="position:absolute;inset:0;background-image:radial-gradient(circle, rgba(234,179,8,0.03) 1px, transparent 1px);background-size:28px 28px;"
+      />
+
+      <div class="flex flex-col flex-1 justify-center" style="position:relative;z-index:1;padding:48px 56px;">
+        <div
+          v-if="headline"
+          style="font-family:'Geist Mono';font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#eab308;margin-bottom:24px;"
+        >
+          {{ headline }}
+        </div>
+
+        <div
+          style="font-family:'Geist';font-size:72px;font-weight:800;color:#fafafa;line-height:1;letter-spacing:-0.035em;"
+        >
+          {{ title || 'Comark' }}
+        </div>
+
+        <div
+          v-if="description"
+          style="font-family:'Geist';font-size:24px;color:#a1a1aa;line-height:1.5;margin-top:24px;max-width:700px;"
+        >
+          {{ truncate(description, 120) }}
+        </div>
+      </div>
+
+      <div style="position:relative;z-index:1;padding:0 56px 36px;">
+        <div style="display:flex;align-items:center;gap:16px;">
+          <div style="flex:1;height:1px;background:rgba(234,179,8,0.15);" />
+          <div style="font-family:'Geist Mono';font-size:13px;font-weight:500;letter-spacing:0.12em;color:rgba(234,179,8,0.6);">
+            COMPONENTS IN MARKDOWN
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/pages/examples/[...slug].vue b/docs/app/pages/examples/[...slug].vue
index d0c77e1..756fd2f 100644
--- a/docs/app/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -60,6 +60,9 @@ useSeoMeta({
   title: `${page.value?.title || exampleName.value} Example`,
   description: page.value?.description,
 })
+defineOgImageComponent('Docs', {
+  headline: 'Examples',
+})
 </script>
 
 <template>
diff --git a/docs/app/pages/examples/index.vue b/docs/app/pages/examples/index.vue
index e7f61f7..0ef460a 100644
--- a/docs/app/pages/examples/index.vue
+++ b/docs/app/pages/examples/index.vue
@@ -33,6 +33,9 @@ useSeoMeta({
   title,
   description,
 })
+defineOgImageComponent('Docs', {
+  headline: 'Examples',
+})
 </script>
 
 <template>
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
index b911150..5787940 100644
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -10,7 +10,7 @@ const { data: page } = await useAsyncData('index', () =>
 useSeoMeta({
   title: 'Comark - Components in Markdown',
   description: 'Fast, streaming-ready markdown parser with Vue and React component support. Parse Comark content from strings or streams with TypeScript support.',
-  ogImage: '/social-card.png',
+  ogImage: '/social-card.jpg',
 })
 
 useHead({
diff --git a/docs/app/pages/play.vue b/docs/app/pages/play.vue
index 6ebae85..a8353a2 100644
--- a/docs/app/pages/play.vue
+++ b/docs/app/pages/play.vue
@@ -2,6 +2,9 @@
 definePageMeta({
   footer: false,
 })
+defineOgImageComponent('Docs', {
+  headline: 'Playground',
+})
 </script>
 
 <template>
diff --git a/docs/app/pages/stream.vue b/docs/app/pages/stream.vue
index ef4a4f0..ebd1c1d 100644
--- a/docs/app/pages/stream.vue
+++ b/docs/app/pages/stream.vue
@@ -8,6 +8,9 @@ import resolveComponent from '../utils/components-manifest'
 definePageMeta({
   footer: false,
 })
+defineOgImageComponent('Docs', {
+  headline: 'Streaming',
+})
 
 const { state, startStream, isStreaming, reset: resetStream } = useMDCStream({
   onChunk: (_chunk: string) => {
diff --git a/docs/app/pages/test.vue b/docs/app/pages/test.vue
index d16374f..b032cac 100644
--- a/docs/app/pages/test.vue
+++ b/docs/app/pages/test.vue
@@ -8,7 +8,7 @@ const markdown = ref(`
 seo:
   title: Big Markdown Example — Components, Code, Lists, Tables!
   description: Showcase of Markdown, MDC components, code blocks, lists, tables, and more using Comark.
-  ogImage: '/social-card.png'
+  ogImage: '/social-card.jpg'
 ---
 
 # Comark Playground
@@ -17,7 +17,7 @@ Try out a large markdown sample mixing **all the features**!
 
 ::u-alert{type="info"}
 #title
-This is an info alert!  
+This is an info alert!
 You can put markdown **inside** MDC components.
 ::
 
@@ -39,12 +39,12 @@ You can put markdown **inside** MDC components.
 
 ## Headings
 
-# h1  
-## h2  
-### h3  
-#### h4  
-##### h5  
-###### h6  
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
 
 ---
 
@@ -104,7 +104,7 @@ x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
 
 - Bullet item 1
 - Bullet item 2
-  - Nested _item_  
+  - Nested _item_
 - Bullet: **Markdown works!**
 1. Numbered one
 2. Numbered two
diff --git a/docs/public/social-card.jpg b/docs/public/social-card.jpg
new file mode 100644
index 0000000..0ec387a
Binary files /dev/null and b/docs/public/social-card.jpg differ
diff --git a/docs/public/social-card.png b/docs/public/social-card.png
deleted file mode 100644
index 6ce60f8..0000000
Binary files a/docs/public/social-card.png and /dev/null differ