Draft - Better SEO descriptions

docs/app/docs/components/accordion/page.mdx

@@ -1,12 +1,16 @@
+import accordionMetadata from "./seo"
+
+export const metadata = accordionMetadata
+
 import PageDetails from '@/components/seo/PageDetails';
 
 import Documentation from '@/components/layout/Documentation/Documentation';
 import AccordionExample from "./docs/example_1"
 import {code, anatomy, keyboardShortcuts, api_documentation} from "./docs/codeUsage"
 
-import seo from "./docs/seo"
 
-export const metadata = seo;
+
+
 
 <Documentation
     title={`Accordion`}

docs/app/docs/components/accordion/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const accordionMetadata = generateSeoMetadata({
+    title: "Accordion - Rad UI",
+    description: "A headless Accordion, customizable component for React applications. Toggle content visibility, reduce clutter, and improve user experience. WCAG compliant.",
+})
+
+export default accordionMetadata

docs/app/docs/contributing/before-you-start/page.mdx

@@ -1,3 +1,7 @@
+import beforeYouStartMetadata from "./seo"
+
+export const metadata = beforeYouStartMetadata
+
 # Before You Start
 
 ## Prerequisites

docs/app/docs/contributing/before-you-start/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+
+const beforeYouStartMetadata = generateSeoMetadata({
+    title: "Before You Start Contributing to Rad UI",
+    description: "Prerequisites and getting started guide for contributing to Rad UI - an Open Source React Headless UI Library",
+})
+
+export default beforeYouStartMetadata

docs/app/docs/contributing/contributing-to-rad-ui/page.mdx

@@ -1,6 +1,7 @@
 import Button from "@radui/ui/Button"
+import contributingToRadUiMetadata from "./seo"
 
-
+export const metadata = contributingToRadUiMetadata
 
 # Contributing to Rad UI
 

docs/app/docs/contributing/contributing-to-rad-ui/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const contributingToRadUiMetadata = generateSeoMetadata({
+    title: "Contributing to Rad UI",
+    description: "Contributing to Rad UI - an Open Source React Headless UI Library",
+})
+
+export default contributingToRadUiMetadata

docs/app/docs/contributing/setting-up-dev-environment/page.mdx

@@ -1,3 +1,7 @@
+import settingUpDevEnvironmentMetadata from "./seo"
+
+export const metadata = settingUpDevEnvironmentMetadata
+
 # Setting Up Dev Environment
 
 ## Cloning the repository

docs/app/docs/contributing/setting-up-dev-environment/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const settingUpDevEnvironmentMetadata = generateSeoMetadata({
+    title: "Setting Up Dev Environment for Rad UI",
+    description: "Setting up your development environment on your local machine to contribute to Rad UI - an Open Source React Headless UI Library",
+})
+
+export default settingUpDevEnvironmentMetadata

docs/utils/seo/generateSeoMetadata.ts

@@ -0,0 +1,29 @@
+import generateOgTitleUrl from "./helpers/generateOgTitle"
+
+const generateSeoMetadata = ({title, description, keywords}: {title: string, description: string, keywords?: string[]}) => {
+    const imageUrl = generateOgTitleUrl(title, description)
+
+    return {
+        title: title,
+        description,
+        keywords,
+        openGraph: {
+            title,
+            description,
+            images: [
+                { url: imageUrl },
+            ],
+            siteName: "Rad UI",
+            type: "website"
+        },
+        twitter: {
+            card: "summary_large_image",
+            title,
+            description,
+            images: [imageUrl],
+            creator: "rad-ui.com",
+        },
+    }
+}
+
+export default generateSeoMetadata

docs/utils/seo/helpers/generateOgTitle.ts

@@ -0,0 +1,8 @@
+const generateOgTitleUrl = (title: string, description: string) => {
+    const encodedTitle = encodeURIComponent(title)
+    const encodedDescription = encodeURIComponent(description)
+    return `https://rad-ui.com/og?title=${encodedTitle}&description=${encodedDescription}`
+}
+
+export default generateOgTitleUrl
+