feat: add JSON-LD structured data for search engines

Copilot · hotlong · Copilot · commit f3946d8e9a75 · 2026-02-09T05:27:43.000Z
- Add TechArticle schema to individual docs pages
- Add WebSite schema to root layout
- Enhances SEO with structured data for Google/search engines

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/site/app/[lang]/docs/[[...slug]]/page.tsx b/packages/site/app/[lang]/docs/[[...slug]]/page.tsx
@@ -32,6 +32,20 @@ export default async function Page({ params }: PageProps) {
 
   const MDX = page.data.body;
 
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'TechArticle',
+    headline: page.data.title,
+    description: page.data.description ?? '',
+    image: getPageImage(page).url,
+    url: `${siteConfig.meta.url}/${lang}/docs/${slug.join('/')}`,
+    publisher: {
+      '@type': 'Organization',
+      name: siteConfig.meta.title,
+      url: siteConfig.meta.url,
+    },
+  };
+
   return (
     <DocsPage
       toc={page.data.toc}
@@ -41,6 +55,10 @@ export default async function Page({ params }: PageProps) {
         style: siteConfig.layout.toc.depth > 2 ? 'clerk' : 'normal',
       }}
     >
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx
@@ -7,11 +7,24 @@
  */
 
 import './global.css';
+import { siteConfig } from '@/lib/site-config';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: siteConfig.meta.title,
+    description: siteConfig.meta.description,
+    url: siteConfig.meta.url,
+  };
+
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="flex flex-col min-h-screen">
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
         {children}
       </body>
     </html>
