fix website seo

Author: arihantcodes

app/(docs)/layout-parts/left-side/left-side.tsx

@@ -1,63 +1,59 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+"use client";
 
-import React, { useState, useEffect } from "react"
-import { usePathname } from "next/navigation"
-import Link from "next/link"
-import { ChevronDown, ChevronRight, Search } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import React, { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronDown, ChevronRight, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@/components/ui/collapsible";
 
 // Assuming DOCS is imported from your constant file
-import { DOCS } from "@/app/(docs)/layout-parts/documentation.constant"
+import { DOCS } from "@/app/(docs)/layout-parts/documentation.constant";
 
 export default function EnhancedSidebar() {
   const [openGroups, setOpenGroups] = useState<string[]>(
     DOCS.map((group) => group.groupKey)
-  )
-  const [searchTerm, setSearchTerm] = useState("")
-  const pathname = usePathname()
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const pathname = usePathname();
 
   useEffect(() => {
     // Ensure the group of the active link is open
     const activeGroup = DOCS.find((group) =>
       group.children.some((child) => child.url === pathname)
-    )
+    );
     if (activeGroup && !openGroups.includes(activeGroup.groupKey)) {
-      setOpenGroups((prev) => [...prev, activeGroup.groupKey])
+      setOpenGroups((prev) => [...prev, activeGroup.groupKey]);
     }
-  }, [pathname])
+  }, [pathname]);
 
   const toggleGroup = (groupKey: string) => {
     setOpenGroups((prev) =>
       prev.includes(groupKey)
         ? prev.filter((key) => key !== groupKey)
         : [...prev, groupKey]
-    )
-  }
+    );
+  };
 
-
-  const filteredDocs = DOCS
-  .map((group) => ({
+  const filteredDocs = DOCS.map((group) => ({
     ...group,
     children: group.children
       .filter((child) =>
         child.label.toLowerCase().includes(searchTerm.toLowerCase())
       )
       .sort((a, b) => a.label.localeCompare(b.label)),
-  }))
-  .filter((group) => group.children.length > 0)
+  })).filter((group) => group.children.length > 0);
 
   return (
     <aside className="hidden lg:flex flex-col w-64 h-screen sticky top-0 border-r border-gray-200 dark:border-gray-800">
-      
       <ScrollArea className="flex-1">
         <nav className="p-4 space-y-2">
           {filteredDocs.map((group) => (
@@ -105,5 +101,5 @@ export default function EnhancedSidebar() {
         </nav>
       </ScrollArea>
     </aside>
-  )
-}
+  );
+}

app/layout.tsx

@@ -1,15 +1,20 @@
+// layout.tsx
 import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Navbar } from "@/components/navbar";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import  Footer  from "@/components/footer";
+import Footer from "@/components/footer";
 import "./globals.css";
 import { inject } from '@vercel/analytics';
 import { siteConfig } from "@/config/site"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from '@vercel/speed-insights/next';
- 
+import Script from 'next/script';
+import Image from 'next/image';
+
+// Inject Vercel Analytics
+inject();
 
 export const metadata: Metadata = {
   title: {
@@ -37,36 +42,34 @@ export const metadata: Metadata = {
     "bootstrap",
     "tailwind",
     "aceternity",
-    "shadcn ui"
+    "shadcn ui",
+    ...siteConfig.keywords,
   ],
   authors: [
     {
       name: "spectrum ui",
-      url: "https://spectrumui.arihant.us",
+      url: siteConfig.url,
+    },
+    {
+      name: siteConfig.author.name,
+      url: siteConfig.author.url,
     },
   ],
   creator: "Arihant Jain & Aman Jain",
   openGraph: {
     type: "website",
-    locale: "en_US",
+    locale: siteConfig.locale,
     url: siteConfig.url,
     title: siteConfig.name,
     description: siteConfig.description,
     siteName: siteConfig.name,
-    images: [
-      {
-        url: siteConfig.ogImage,
-        width: 1200,
-        height: 630,
-        alt: siteConfig.name,
-      },
-    ],
+    images: [siteConfig.ogImage],
   },
   twitter: {
     card: "summary_large_image",
     title: siteConfig.name,
     description: siteConfig.description,
-    images: [siteConfig.ogImage],
+    images: [siteConfig.ogImage.url],
     creator: "@arihantcodes",
   },
   icons: {
@@ -75,44 +78,80 @@ export const metadata: Metadata = {
     apple: "/apple-touch-icon.png",
   },
   manifest: `${siteConfig.url}/site.webmanifest`,
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  alternates: {
+    canonical: siteConfig.url,
+    languages: {
+      'en-US': siteConfig.url,
+    },
+  },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
+  themeColor: siteConfig.themeColor,
 }
 
-
-interface RootLayoutProps {
-  children: React.ReactNode
-}
-
-inject();
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={siteConfig.locale.split('-')[0]} suppressHydrationWarning>
+      <head>
+        <link rel="canonical" href={siteConfig.url} />
+        <Script
+          id="schema-org"
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "https://schema.org",
+              "@type": "WebSite",
+              name: siteConfig.name,
+              url: siteConfig.url,
+              description: siteConfig.description,
+              author: {
+                "@type": "Person",
+                name: siteConfig.author.name,
+                url: siteConfig.author.url,
+              },
+              license: siteConfig.license,
+              version: siteConfig.version,
+            })
+          }}
+        />
+      </head>
       <body
         className={`${GeistSans.variable} ${GeistMono.variable} font-regular`}
         suppressHydrationWarning
       >
-        
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-           <Analytics />
+          <Analytics />
           <Navbar />
           <main className="sm:container mx-auto w-[85vw] h-auto">
             {children}
           </main>
           <Footer />
-          
-          
         </ThemeProvider>
-
         <SpeedInsights />
       </body>
     </html>
   );
-}
+}

config/site.ts

@@ -1,13 +1,42 @@
+// siteConfig.ts
 export const siteConfig = {
-    name: "Spectrum UI",
-    url: "https://spectrumui.arihant.us",
-    ogImage: "https://spectrumui.arihant.us/og.jpg",
-    description:
-      "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.",
-    links: {
-      twitter: "https://x.com/arihantcodes",
-      github: "https://github.com/arihantcodes",
-    },
-  }
-  
-  export type SiteConfig = typeof siteConfig
+  name: "Spectrum UI",
+  url: "https://spectrumui.arihant.us",
+  ogImage: {
+    url: "https://spectrumui.arihant.us/og.png",
+    width: 1200,
+    height: 630,
+    alt: "Spectrum UI - Beautiful and accessible React components",
+  },
+  description:
+    "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.",
+  links: {
+    twitter: "https://x.com/arihantcodes",
+    github: "https://github.com/arihantcodes",
+    linkedin: "https://www.linkedin.com/in/arihantcodes", // Update with your actual LinkedIn profile
+  // Update if you have a Facebook page
+    instagram: "https://www.instagram.com/arihantjainn18", // Update with your actual Instagram profile
+  },
+  author: {
+    name: "Arihant Jain",
+    url: "https://arihant.us",
+  },
+  keywords: [
+    "UI components",
+    "React",
+    "Next.js",
+    "Tailwind CSS",
+    "Accessible design",
+    "Open source",
+    "Web development",
+    "Frontend",
+    "Design system",
+    "Spectrum UI",
+  ],
+  locale: "en-US",
+  version: "1.0.0",
+  license: "MIT",
+  themeColor: "#000000", // Replace with your actual theme color
+}
+
+export type SiteConfig = typeof siteConfig