feat(docs): add JSON-LD structured data for rich snippets (#7484)

* feat(docs): added JSON-LD structured data for SEO

* chore(docs): apply coderabbit comment

* fix(docs): build error fixed

* chore(docs): coderabbit comment resolved

Author: aidankmcalister

apps/docs/src/app/(docs)/(default)/[[...slug]]/page.tsx

@@ -12,6 +12,7 @@ import {
   EditOnGitHub,
   PageLastUpdate,
 } from '@/components/layout/notebook/page';
+import { TechArticleSchema, BreadcrumbSchema } from '@/components/structured-data';
 
 interface PageParams {
   slug?: string[];
@@ -29,25 +30,28 @@ export default async function Page({
   const MDX = page.data.body;
 
   return (
-    <DocsPage
-      tableOfContent={{
-        style: 'normal',
-      }}
-      toc={page.data.toc}
-      full={page.data.full}
-    >
-      <div className="flex flex-col md:flex-row items-start gap-4 pt-2 pb-1 md:justify-between">
-        <DocsTitle>{page.data.title}</DocsTitle>
-        <div className="flex flex-row gap-2 items-center">
-          {!page.url.startsWith('/management-api/endpoints') && (
-            <LLMCopyButton pageUrl={page.url} />
-          )}
-          <ViewOptions
-            pageUrl={page.url}
-            githubUrl={`https://github.com/prisma/docs/blob/main/apps/docs/content/docs/${page.path}`}
-          />
+    <>
+      <TechArticleSchema page={page} />
+      <BreadcrumbSchema page={page} />
+      <DocsPage
+        tableOfContent={{
+          style: 'normal',
+        }}
+        toc={page.data.toc}
+        full={page.data.full}
+      >
+        <div className="flex flex-col md:flex-row items-start gap-4 pt-2 pb-1 md:justify-between">
+          <DocsTitle>{page.data.title}</DocsTitle>
+          <div className="flex flex-row gap-2 items-center">
+            {!page.url.startsWith('/management-api/endpoints') && (
+              <LLMCopyButton pageUrl={page.url} />
+            )}
+            <ViewOptions
+              pageUrl={page.url}
+              githubUrl={`https://github.com/prisma/docs/blob/main/apps/docs/content/docs/${page.path}`}
+            />
+          </div>
         </div>
-      </div>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
         <MDX
@@ -67,6 +71,7 @@ export default async function Page({
         )}
       </div>
     </DocsPage>
+    </>
   );
 }
 

apps/docs/src/app/(docs)/v6/[[...slug]]/page.tsx

@@ -18,6 +18,7 @@ import {
   EditOnGitHub,
   PageLastUpdate,
 } from '@/components/layout/notebook/page';
+import { TechArticleSchema, BreadcrumbSchema } from '@/components/structured-data';
 
 interface PageParams {
   version: string;
@@ -37,13 +38,16 @@ export default async function Page({
   const MDX = page.data.body;
 
   return (
-    <DocsPage
-      tableOfContent={{ style: 'normal' }}
-      toc={page.data.toc}
-      full={page.data.full}
-    >
-      <div className="flex flex-row items-center gap-4 pt-2 pb-6 justify-between">
-        <DocsTitle>{page.data.title}</DocsTitle>
+    <>
+      <TechArticleSchema page={page} />
+      <BreadcrumbSchema page={page} />
+      <DocsPage
+        tableOfContent={{ style: 'normal' }}
+        toc={page.data.toc}
+        full={page.data.full}
+      >
+        <div className="flex flex-row items-center gap-4 pt-2 pb-6 justify-between">
+          <DocsTitle>{page.data.title}</DocsTitle>
         <div className="flex flex-row gap-2 items-center">
           <LLMCopyButton pageUrl={page.url} />
           <ViewOptions
@@ -74,6 +78,7 @@ export default async function Page({
         )}
       </div>
     </DocsPage>
+    </>
   );
 }
 

apps/docs/src/components/structured-data.tsx

@@ -0,0 +1,84 @@
+import { getBaseUrl } from '@/lib/urls';
+import type { InferPageType } from 'fumadocs-core/source';
+import type { source, sourceV6 } from '@/lib/source';
+
+interface StructuredDataProps {
+  page: InferPageType<typeof source> | InferPageType<typeof sourceV6>;
+}
+
+export function TechArticleSchema({ page }: StructuredDataProps) {
+  const baseUrl = getBaseUrl();
+  const lastModified = (page.data as { lastModified?: Date }).lastModified;
+
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'TechArticle',
+    headline: (page.data as any).metaTitle ?? page.data.title,
+    description: (page.data as any).metaDescription ?? page.data.description,
+    url: `${baseUrl}${page.url}`,
+    dateModified: lastModified?.toISOString(),
+    author: {
+      '@type': 'Organization',
+      name: 'Prisma Data, Inc.',
+      url: 'https://www.prisma.io',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Prisma',
+      url: 'https://www.prisma.io',
+      logo: {
+        '@type': 'ImageObject',
+        url: `${baseUrl}/logo.png`,
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `${baseUrl}${page.url}`,
+    },
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema).replace(/</g, '\\u003c') }}
+    />
+  );
+}
+
+export function BreadcrumbSchema({ page }: StructuredDataProps) {
+  const baseUrl = getBaseUrl();
+
+  // Build breadcrumb items from URL slugs
+  const breadcrumbItems = [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: 'Home',
+      item: baseUrl,
+    },
+  ];
+
+  let currentPath = '';
+  page.slugs.forEach((slug, index) => {
+    currentPath += `/${slug}`;
+    breadcrumbItems.push({
+      '@type': 'ListItem',
+      position: index + 2,
+      name: slug.charAt(0).toUpperCase() + slug.slice(1).replace(/-/g, ' '),
+      item: `${baseUrl}${currentPath}`,
+    });
+  });
+
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumbItems,
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema).replace(/</g, '\\u003c') }}
+    />
+  );
+}