Add structured data for articles and FAQs using schema.org

davidemarcoli · davidemarcoli · commit 3f5abc3b08e2 · 2025-10-27T11:42:31.000+01:00
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
@@ -9,16 +9,45 @@ import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { Article, WithContext } from 'schema-dts';
 
 export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   const params = await props.params;
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
+  const jsonLd: WithContext<Article> = {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": page.data.title,
+    "description": page.data.description,
+    "url": `https://riven.tv/docs/${(params.slug ?? []).join('/')}`,
+    "image": getPageImage(page).url,
+    "author": {
+      "@type": "Organization",
+      "name": "Riven Media",
+      "url": "https://riven.tv"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Riven Media",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "https://riven.tv/icons/icon-192x192.png"
+      }
+    }
+  };
+
   const MDX = page.data.body;
 
   return (
     <DocsPage toc={page.data.toc} full={page.data.full} tableOfContent={{style: 'clerk'}}>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
+        }}
+      />
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,14 +2,55 @@ import '@/app/global.css';
 import { RootProvider } from 'fumadocs-ui/provider/next';
 import { Inter } from 'next/font/google';
 import SearchDialog from '@/components/search';
+import { FAQPage, WithContext } from 'schema-dts';
 
 const inter = Inter({
   subsets: ['latin'],
 });
 
+const jsonLd: WithContext<FAQPage> = {
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": [
+    {
+      "@type": "Question",
+      "name": "What is Riven?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Riven is a powerful media management solution that works together with debrid services to help you find, organize, stream, and enjoy your media effortlessly."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "How do I get started with Riven?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "To get started with Riven, visit our documentation at https://riven.tv/docs to learn about installation and setup."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Where can I find support for Riven?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "For support, please refer to our documentation, send us a message in our discord server at https://discord.riven.tv, or reach out via contact@riven.tv"
+      }
+    }
+  ]
+};
+
 export default function Layout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
+      <head>
+        <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
+        }}
+      />
+      </head>
+
       <body className="flex flex-col min-h-screen">
         <RootProvider 
           search={{
diff --git a/bun.lock b/bun.lock
@@ -12,6 +12,7 @@
         "next": "15.5.4",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "schema-dts": "^1.1.5",
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1127,6 +1128,8 @@
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
+    "schema-dts": ["schema-dts@1.1.5", "", {}, "sha512-RJr9EaCmsLzBX2NDiO5Z3ux2BVosNZN5jo0gWgsyKvxKIUL5R3swNvoorulAeL9kLB0iTSX7V6aokhla2m7xbg=="],
+
     "scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "lucide-react": "^0.544.0",
     "next": "15.5.4",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "schema-dts": "^1.1.5"
   },
   "devDependencies": {
     "@types/node": "24.6.2",
