BReadcrumbs

src/views/BlogOverview.vue

@@ -1,13 +1,45 @@
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
   import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
   import { RouterLink } from 'vue-router';
 
   const { getPosts } = useBlog();
+  const { addBlogListSchema, addBreadcrumbSchema } = useStructuredData();
   const posts = ref<BlogPost[]>([]);
 
   onMounted(async () => {
     posts.value = await getPosts();
+
+    // Set SEO meta tags
+    useSEO({
+      title: 'Blog - Latest Articles on Spritesheet Generation',
+      description: 'Explore our latest articles about sprite sheet generation, game development, pixel art, and sprite animation techniques.',
+      url: '/blog',
+      type: 'website',
+      keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation'
+    });
+
+    // Add blog list structured data
+    if (posts.value.length > 0) {
+      addBlogListSchema(
+        posts.value.map(post => ({
+          title: post.title,
+          description: post.description,
+          author: post.author || 'nu11ed',
+          datePublished: post.date,
+          image: post.image,
+          url: `/blog/${post.slug}`
+        }))
+      );
+    }
+
+    // Add breadcrumb
+    addBreadcrumbSchema([
+      { name: 'Home', url: '/' },
+      { name: 'Blog', url: '/blog' }
+    ]);
   });
 </script>
 
@@ -17,7 +49,7 @@
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
       <article v-for="post in posts" :key="post.slug" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full">
         <RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full" :title="`Read more: ${post.title}`" :aria-label="`Read full blog post: ${post.title}`">
-          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" />
+          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" loading="lazy" decoding="async" />
           <div class="p-6 flex-1 flex flex-col">
             <h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>
             <p class="text-gray-600 dark:text-gray-400 text-xs mb-3">{{ post.date }}</p>