[FEAT] SEO best practices

src/components/Breadcrumbs.vue

@@ -11,17 +11,15 @@
   }
 
   const breadcrumbs = computed<BreadcrumbItem[]>(() => {
-    const items: BreadcrumbItem[] = [
-      { name: 'Home', path: '/' }
-    ];
+    const items: BreadcrumbItem[] = [{ name: 'Home', path: '/' }];
 
     // Map route names to breadcrumb labels
     const routeLabels: Record<string, string> = {
       'blog-overview': 'Blog',
       'blog-detail': 'Blog',
-      'about': 'About Us',
-      'contact': 'Contact',
-      'privacy-policy': 'Privacy Policy'
+      about: 'About Us',
+      contact: 'Contact',
+      'privacy-policy': 'Privacy Policy',
     };
 
     if (route.name && route.name !== 'home') {
@@ -32,7 +30,7 @@
         items.push({ name: 'Blog', path: '/blog' });
 
         // Get the post title from route meta or params if available
-        const postTitle = route.meta.title as string || 'Article';
+        const postTitle = (route.meta.title as string) || 'Article';
         items.push({ name: postTitle, path: route.path });
       } else if (routeLabels[routeName]) {
         items.push({ name: routeLabels[routeName], path: route.path });
@@ -51,12 +49,7 @@
   <nav v-if="shouldShowBreadcrumbs" aria-label="Breadcrumb" class="mb-4">
     <ol class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
       <li v-for="(item, index) in breadcrumbs" :key="item.path" class="flex items-center gap-2">
-        <RouterLink
-          v-if="index < breadcrumbs.length - 1"
-          :to="item.path"
-          class="hover:text-gray-900 dark:hover:text-white transition-colors"
-          :aria-label="`Navigate to ${item.name}`"
-        >
+        <RouterLink v-if="index < breadcrumbs.length - 1" :to="item.path" class="hover:text-gray-900 dark:hover:text-white transition-colors" :aria-label="`Navigate to ${item.name}`">
           {{ item.name }}
         </RouterLink>
         <span v-else class="font-medium text-gray-900 dark:text-white" aria-current="page">