diff --git a/docs/app/components/AppHeaderLogo.vue b/docs/app/components/AppHeaderLogo.vue
index 93e344b..8d78511 100644
--- a/docs/app/components/AppHeaderLogo.vue
+++ b/docs/app/components/AppHeaderLogo.vue
@@ -3,6 +3,8 @@
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 576 128"
     fill="none"
+    role="img"
+    aria-label="Comark"
   >
     <path
       stroke="currentColor"
diff --git a/docs/app/pages/play.vue b/docs/app/pages/play.vue
index a8353a2..6f3915c 100644
--- a/docs/app/pages/play.vue
+++ b/docs/app/pages/play.vue
@@ -2,6 +2,10 @@
 definePageMeta({
   footer: false,
 })
+useSeoMeta({
+  title: 'Playground - Comark',
+  description: 'Try Comark live in the browser. Edit markdown with component syntax and see the rendered output in real-time.',
+})
 defineOgImageComponent('Docs', {
   headline: 'Playground',
 })
diff --git a/docs/app/pages/stream.vue b/docs/app/pages/stream.vue
index ebd1c1d..9afb729 100644
--- a/docs/app/pages/stream.vue
+++ b/docs/app/pages/stream.vue
@@ -8,6 +8,10 @@ import resolveComponent from '../utils/components-manifest'
 definePageMeta({
   footer: false,
 })
+useSeoMeta({
+  title: 'Streaming Demo - Comark',
+  description: 'See Comark streaming in action. Watch markdown content parse and render in real-time as it arrives.',
+})
 defineOgImageComponent('Docs', {
   headline: 'Streaming',
 })
diff --git a/docs/app/pages/test.vue b/docs/app/pages/test.vue
index b032cac..a9af58f 100644
--- a/docs/app/pages/test.vue
+++ b/docs/app/pages/test.vue
@@ -3,6 +3,10 @@ import { Comark } from 'comark/vue'
 import highlight from 'comark/plugins/highlight'
 import resolveComponent from '../utils/components-manifest'
 
+useHead({
+  meta: [{ name: 'robots', content: 'noindex, nofollow' }],
+})
+
 const markdown = ref(`
 ---
 seo:
diff --git a/docs/content/3.rendering/2.react.md b/docs/content/3.rendering/2.react.md
index f7faac8..0ed10af 100644
--- a/docs/content/3.rendering/2.react.md
+++ b/docs/content/3.rendering/2.react.md
@@ -195,7 +195,7 @@ export default function ArticleCard() {
 ### With Tailwind CSS
 
 ```tsx [App.tsx]
-<Comark 
+<Comark
   value={content}
   className="prose prose-slate lg:prose-xl dark:prose-invert"
 />
diff --git a/docs/content/index.md b/docs/content/index.md
index 754be8f..644400a 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -165,11 +165,11 @@ footerSections:
       - label: Syntax Highlighting
         to: /plugins/core/highlight
       - label: Math
-        to: /plugins/community/math
+        to: /plugins/external/math
       - label: CJK
-        to: /plugins/community/cjk
+        to: /plugins/external/cjk
       - label: Mermaid
-        to: /plugins/community/mermaid
+        to: /plugins/external/mermaid
   - title: Community
     links:
       - label: GitHub
diff --git a/docs/public/apple-touch-icon.png b/docs/public/apple-touch-icon.png
index 8fe9891..158ddf0 100644
Binary files a/docs/public/apple-touch-icon.png and b/docs/public/apple-touch-icon.png differ
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
index 3f56651..8a4c711 100644
Binary files a/docs/public/favicon.ico and b/docs/public/favicon.ico differ