SEO

components/Breadcrumb.tsx

@@ -11,24 +11,41 @@ interface BreadcrumbProps {
 }
 
 const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
+  const breadcrumbSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.label,
+      ...(item.to ? { item: `https://bayareait.services${item.to}` } : {}),
+    })),
+  };
+
   return (
-    <nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
-      {items.map((item, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
-          {item.to ? (
-            <Link
-              to={item.to}
-              className="hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
-          )}
-        </React.Fragment>
-      ))}
-    </nav>
+    <>
+      <nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
+        {items.map((item, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
+            {item.to ? (
+              <Link
+                to={item.to}
+                className="hover:text-gray-900 dark:hover:text-white transition-colors"
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+    </>
   );
 };