From b801cd4c99fc92b7b788e40d5f81ec404df1d025 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 26 Nov 2025 17:20:09 +0100
Subject: [PATCH] [FEAT] SEO best practices

---
 src/components/Breadcrumbs.vue       |  19 ++--
 src/composables/useSEO.ts            |  16 +--
 src/composables/useStructuredData.ts | 123 +++++++++++----------
 src/views/AboutUs.vue                |   4 +-
 src/views/BlogDetail.vue             | 154 ++++++++++++++++++---------
 src/views/BlogOverview.vue           |  24 +----
 src/views/Contact.vue                |  24 ++++-
 src/views/HomeView.seo.ts            |  47 ++++----
 src/views/PrivacyPolicy.vue          |   4 +-
 9 files changed, 222 insertions(+), 193 deletions(-)

diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
index 03611b5..14e7a22 100644
--- a/src/components/Breadcrumbs.vue
+++ b/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">
diff --git a/src/composables/useSEO.ts b/src/composables/useSEO.ts
index 005c05e..a9e9862 100644
--- a/src/composables/useSEO.ts
+++ b/src/composables/useSEO.ts
@@ -17,17 +17,11 @@ const SITE_URL = 'https://spritesheetgenerator.online';
 const DEFAULT_IMAGE = '/og-image.png';
 
 export function useSEO(metadata: SEOMetaData) {
-  const fullTitle = metadata.title.includes(SITE_NAME)
-    ? metadata.title
-    : `${metadata.title} - ${SITE_NAME}`;
+  const fullTitle = metadata.title.includes(SITE_NAME) ? metadata.title : `${metadata.title} - ${SITE_NAME}`;
 
-  const fullUrl = metadata.url
-    ? `${SITE_URL}${metadata.url}`
-    : SITE_URL;
+  const fullUrl = metadata.url ? `${SITE_URL}${metadata.url}` : SITE_URL;
 
-  const imageUrl = metadata.image
-    ? `${SITE_URL}${metadata.image}`
-    : `${SITE_URL}${DEFAULT_IMAGE}`;
+  const imageUrl = metadata.image ? `${SITE_URL}${metadata.image}` : `${SITE_URL}${DEFAULT_IMAGE}`;
 
   const metaTags: any[] = [
     // Primary Meta Tags
@@ -72,8 +66,6 @@ export function useSEO(metadata: SEOMetaData) {
   useHead({
     title: fullTitle,
     meta: metaTags,
-    link: [
-      { rel: 'canonical', href: fullUrl }
-    ]
+    link: [{ rel: 'canonical', href: fullUrl }],
   });
 }
diff --git a/src/composables/useStructuredData.ts b/src/composables/useStructuredData.ts
index d768bba..5e8748e 100644
--- a/src/composables/useStructuredData.ts
+++ b/src/composables/useStructuredData.ts
@@ -24,23 +24,20 @@ export function useStructuredData() {
     const schema = {
       '@context': 'https://schema.org',
       '@type': 'Organization',
-      'name': SITE_NAME,
-      'url': SITE_URL,
-      'logo': `${SITE_URL}/og-image.png`,
-      'description': 'Free online tool to create spritesheets for game development',
-      'sameAs': [
-        'https://gitea.adhd.sh/root/spritesheet-generator',
-        'https://discord.gg/JTev3nzeDa'
-      ]
+      name: SITE_NAME,
+      url: SITE_URL,
+      logo: `${SITE_URL}/og-image.png`,
+      description: 'Free online tool to create spritesheets for game development',
+      sameAs: ['https://gitea.adhd.sh/root/spritesheet-generator', 'https://discord.gg/JTev3nzeDa'],
     };
 
     useHead({
       script: [
         {
           type: 'application/ld+json',
-          children: JSON.stringify(schema)
-        }
-      ]
+          children: JSON.stringify(schema),
+        },
+      ],
     });
   };
 
@@ -49,23 +46,23 @@ export function useStructuredData() {
     const schema = {
       '@context': 'https://schema.org',
       '@type': 'WebSite',
-      'name': SITE_NAME,
-      'url': SITE_URL,
-      'description': 'Create professional spritesheets for your game development projects',
-      'potentialAction': {
+      name: SITE_NAME,
+      url: SITE_URL,
+      description: 'Create professional spritesheets for your game development projects',
+      potentialAction: {
         '@type': 'SearchAction',
-        'target': `${SITE_URL}/blog?search={search_term_string}`,
-        'query-input': 'required name=search_term_string'
-      }
+        target: `${SITE_URL}/blog?search={search_term_string}`,
+        'query-input': 'required name=search_term_string',
+      },
     };
 
     useHead({
       script: [
         {
           type: 'application/ld+json',
-          children: JSON.stringify(schema)
-        }
-      ]
+          children: JSON.stringify(schema),
+        },
+      ],
     });
   };
 
@@ -74,36 +71,36 @@ export function useStructuredData() {
     const schema = {
       '@context': 'https://schema.org',
       '@type': 'BlogPosting',
-      'headline': post.title,
-      'description': post.description,
-      'image': `${SITE_URL}${post.image}`,
-      'author': {
+      headline: post.title,
+      description: post.description,
+      image: `${SITE_URL}${post.image}`,
+      author: {
         '@type': 'Person',
-        'name': post.author
+        name: post.author,
       },
-      'publisher': {
+      publisher: {
         '@type': 'Organization',
-        'name': SITE_NAME,
-        'logo': {
+        name: SITE_NAME,
+        logo: {
           '@type': 'ImageObject',
-          'url': `${SITE_URL}/og-image.png`
-        }
+          url: `${SITE_URL}/og-image.png`,
+        },
       },
-      'datePublished': post.datePublished,
-      'dateModified': post.dateModified || post.datePublished,
-      'mainEntityOfPage': {
+      datePublished: post.datePublished,
+      dateModified: post.dateModified || post.datePublished,
+      mainEntityOfPage: {
         '@type': 'WebPage',
-        '@id': `${SITE_URL}${post.url}`
-      }
+        '@id': `${SITE_URL}${post.url}`,
+      },
     };
 
     useHead({
       script: [
         {
           type: 'application/ld+json',
-          children: JSON.stringify(schema)
-        }
-      ]
+          children: JSON.stringify(schema),
+        },
+      ],
     });
   };
 
@@ -112,21 +109,21 @@ export function useStructuredData() {
     const schema = {
       '@context': 'https://schema.org',
       '@type': 'BreadcrumbList',
-      'itemListElement': items.map((item, index) => ({
+      itemListElement: items.map((item, index) => ({
         '@type': 'ListItem',
-        'position': index + 1,
-        'name': item.name,
-        'item': `${SITE_URL}${item.url}`
-      }))
+        position: index + 1,
+        name: item.name,
+        item: `${SITE_URL}${item.url}`,
+      })),
     };
 
     useHead({
       script: [
         {
           type: 'application/ld+json',
-          children: JSON.stringify(schema)
-        }
-      ]
+          children: JSON.stringify(schema),
+        },
+      ],
     });
   };
 
@@ -135,30 +132,30 @@ export function useStructuredData() {
     const schema = {
       '@context': 'https://schema.org',
       '@type': 'Blog',
-      'name': `${SITE_NAME} Blog`,
-      'description': 'Latest articles about sprite sheet generation and game development',
-      'url': `${SITE_URL}/blog`,
-      'blogPost': posts.map(post => ({
+      name: `${SITE_NAME} Blog`,
+      description: 'Latest articles about sprite sheet generation and game development',
+      url: `${SITE_URL}/blog`,
+      blogPost: posts.map(post => ({
         '@type': 'BlogPosting',
-        'headline': post.title,
-        'description': post.description,
-        'image': `${SITE_URL}${post.image}`,
-        'author': {
+        headline: post.title,
+        description: post.description,
+        image: `${SITE_URL}${post.image}`,
+        author: {
           '@type': 'Person',
-          'name': post.author
+          name: post.author,
         },
-        'datePublished': post.datePublished,
-        'url': `${SITE_URL}${post.url}`
-      }))
+        datePublished: post.datePublished,
+        url: `${SITE_URL}${post.url}`,
+      })),
     };
 
     useHead({
       script: [
         {
           type: 'application/ld+json',
-          children: JSON.stringify(schema)
-        }
-      ]
+          children: JSON.stringify(schema),
+        },
+      ],
     });
   };
 
@@ -167,6 +164,6 @@ export function useStructuredData() {
     addWebSiteSchema,
     addBlogPostSchema,
     addBreadcrumbSchema,
-    addBlogListSchema
+    addBlogListSchema,
   };
 }
diff --git a/src/views/AboutUs.vue b/src/views/AboutUs.vue
index ba3e7db..8c7f999 100644
--- a/src/views/AboutUs.vue
+++ b/src/views/AboutUs.vue
@@ -10,12 +10,12 @@
     description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
     url: '/about',
     type: 'website',
-    keywords: 'about spritesheet generator, game development tools, open source sprite editor'
+    keywords: 'about spritesheet generator, game development tools, open source sprite editor',
   });
 
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
-    { name: 'About Us', url: '/about' }
+    { name: 'About Us', url: '/about' },
   ]);
 </script>
 
diff --git a/src/views/BlogDetail.vue b/src/views/BlogDetail.vue
index 85d47f1..cf3ad3d 100644
--- a/src/views/BlogDetail.vue
+++ b/src/views/BlogDetail.vue
@@ -1,34 +1,123 @@
 <script setup lang="ts">
-  import { ref, onMounted, watch, computed } from 'vue';
+  import { ref, onMounted, computed, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useBlog, type BlogPost } from '../composables/useBlog';
-  import { useSEO } from '../composables/useSEO';
-  import { useStructuredData } from '../composables/useStructuredData';
+  import { useHead } from '@vueuse/head';
   import { marked } from 'marked';
 
   const route = useRoute();
   const router = useRouter();
   const { getPost } = useBlog();
-  const { addBlogPostSchema, addBreadcrumbSchema } = useStructuredData();
   const post = ref<BlogPost | undefined>(undefined);
   const renderedContent = ref('');
 
   const slug = computed(() => route.params.slug as string);
 
-  // Initialize with default SEO (will be updated when post loads)
-  useSEO({
-    title: 'Blog Post',
-    description: 'Read our latest article about spritesheet generation and game development.',
-    url: `/blog/${slug.value}`,
-    type: 'article',
-    keywords: 'sprite sheet, game development, blog'
-  });
+  // Reactive SEO data that updates when post loads
+  const pageTitle = computed(() => (post.value ? `${post.value.title} - Spritesheet Generator` : 'Blog Post - Spritesheet Generator'));
 
-  addBreadcrumbSchema([
-    { name: 'Home', url: '/' },
-    { name: 'Blog', url: '/blog' },
-    { name: 'Article', url: `/blog/${slug.value}` }
-  ]);
+  const pageDescription = computed(() => post.value?.description || 'Read our latest article about spritesheet generation and game development.');
+
+  const pageImage = computed(() => (post.value?.image ? `https://spritesheetgenerator.online${post.value.image}` : 'https://spritesheetgenerator.online/og-image.png'));
+
+  const pageUrl = computed(() => `https://spritesheetgenerator.online/blog/${slug.value}`);
+
+  const keywords = computed(() => post.value?.keywords || 'sprite sheet, game development, blog');
+
+  // Dynamic meta tags using reactive computed values
+  useHead({
+    title: pageTitle,
+    meta: [
+      { name: 'title', content: pageTitle },
+      { name: 'description', content: pageDescription },
+      { name: 'keywords', content: keywords },
+      { name: 'robots', content: 'index, follow' },
+
+      // Open Graph
+      { property: 'og:type', content: 'article' },
+      { property: 'og:url', content: pageUrl },
+      { property: 'og:title', content: pageTitle },
+      { property: 'og:description', content: pageDescription },
+      { property: 'og:image', content: pageImage },
+      { property: 'og:site_name', content: 'Spritesheet Generator' },
+      { property: 'article:author', content: computed(() => post.value?.author || 'nu11ed') },
+      { property: 'article:published_time', content: computed(() => post.value?.date || '') },
+
+      // Twitter
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:url', content: pageUrl },
+      { name: 'twitter:title', content: pageTitle },
+      { name: 'twitter:description', content: pageDescription },
+      { name: 'twitter:image', content: pageImage },
+    ],
+    link: [{ rel: 'canonical', href: pageUrl }],
+    script: computed(() => {
+      const scripts = [];
+
+      // Breadcrumb schema
+      scripts.push({
+        type: 'application/ld+json',
+        children: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              name: 'Home',
+              item: 'https://spritesheetgenerator.online/',
+            },
+            {
+              '@type': 'ListItem',
+              position: 2,
+              name: 'Blog',
+              item: 'https://spritesheetgenerator.online/blog',
+            },
+            {
+              '@type': 'ListItem',
+              position: 3,
+              name: post.value?.title || 'Article',
+              item: pageUrl.value,
+            },
+          ],
+        }),
+      });
+
+      // Blog post schema
+      if (post.value) {
+        scripts.push({
+          type: 'application/ld+json',
+          children: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'BlogPosting',
+            headline: post.value.title,
+            description: post.value.description,
+            image: `https://spritesheetgenerator.online${post.value.image}`,
+            author: {
+              '@type': 'Person',
+              name: post.value.author || 'nu11ed',
+            },
+            publisher: {
+              '@type': 'Organization',
+              name: 'Spritesheet Generator',
+              logo: {
+                '@type': 'ImageObject',
+                url: 'https://spritesheetgenerator.online/og-image.png',
+              },
+            },
+            datePublished: post.value.date,
+            dateModified: post.value.date,
+            mainEntityOfPage: {
+              '@type': 'WebPage',
+              '@id': pageUrl.value,
+            },
+          }),
+        });
+      }
+
+      return scripts;
+    }),
+  });
 
   onMounted(async () => {
     post.value = await getPost(slug.value);
@@ -39,37 +128,6 @@
       router.push({ name: 'blog-overview' });
     }
   });
-
-  // Update SEO and structured data when post loads
-  watch(post, (newPost) => {
-    if (newPost) {
-      useSEO({
-        title: newPost.title,
-        description: newPost.description,
-        image: newPost.image,
-        url: `/blog/${slug.value}`,
-        type: 'article',
-        author: newPost.author || 'nu11ed',
-        publishedTime: newPost.date,
-        keywords: newPost.keywords || 'sprite sheet, game development, blog'
-      });
-
-      addBlogPostSchema({
-        title: newPost.title,
-        description: newPost.description,
-        author: newPost.author || 'nu11ed',
-        datePublished: newPost.date,
-        image: newPost.image,
-        url: `/blog/${slug.value}`
-      });
-
-      addBreadcrumbSchema([
-        { name: 'Home', url: '/' },
-        { name: 'Blog', url: '/blog' },
-        { name: newPost.title, url: `/blog/${slug.value}` }
-      ]);
-    }
-  });
 </script>
 
 <template>
diff --git a/src/views/BlogOverview.vue b/src/views/BlogOverview.vue
index e064114..01bbd59 100644
--- a/src/views/BlogOverview.vue
+++ b/src/views/BlogOverview.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue';
+  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 { addBreadcrumbSchema } = useStructuredData();
   const posts = ref<BlogPost[]>([]);
 
   // Set SEO meta tags synchronously
@@ -15,34 +15,18 @@
     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'
+    keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation',
   });
 
   // Add breadcrumb synchronously
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
-    { name: 'Blog', url: '/blog' }
+    { name: 'Blog', url: '/blog' },
   ]);
 
   onMounted(async () => {
     posts.value = await getPosts();
   });
-
-  // Watch posts and add structured data when available
-  watch(posts, (newPosts) => {
-    if (newPosts.length > 0) {
-      addBlogListSchema(
-        newPosts.map(post => ({
-          title: post.title,
-          description: post.description,
-          author: post.author || 'nu11ed',
-          datePublished: post.date,
-          image: post.image,
-          url: `/blog/${post.slug}`
-        }))
-      );
-    }
-  }, { immediate: true });
 </script>
 
 <template>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index a36c031..c092d64 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -7,15 +7,15 @@
   // Set SEO synchronously
   useSEO({
     title: 'Contact Us - Get in Touch',
-    description: 'Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We\'d love to hear from you!',
+    description: "Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We'd love to hear from you!",
     url: '/contact',
     type: 'website',
-    keywords: 'contact spritesheet generator, support, discord, gitea'
+    keywords: 'contact spritesheet generator, support, discord, gitea',
   });
 
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
-    { name: 'Contact', url: '/contact' }
+    { name: 'Contact', url: '/contact' },
   ]);
 </script>
 
@@ -26,7 +26,14 @@
       <div class="space-y-6">
         <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We'd love to hear from you! Whether you have a question, feedback, or just want to say hi, feel free to reach out.</p>
         <div class="flex flex-col gap-4 mt-8">
-          <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline" title="Join our Discord community" aria-label="Join Discord server">
+          <a
+            href="https://discord.gg/JTev3nzeDa"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
+            title="Join our Discord community"
+            aria-label="Join Discord server"
+          >
             <i class="fab fa-discord text-2xl text-[#5865F2]"></i>
             <div>
               <div class="font-bold text-gray-900 dark:text-white">Join our Discord</div>
@@ -34,7 +41,14 @@
             </div>
           </a>
 
-          <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline" title="View source code and report bugs" aria-label="View source code repository">
+          <a
+            href="https://gitea.adhd.sh/root/spritesheet-generator"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
+            title="View source code and report bugs"
+            aria-label="View source code repository"
+          >
             <i class="fab fa-github text-2xl text-gray-900 dark:text-white"></i>
             <div>
               <div class="font-bold text-gray-900 dark:text-white">Source Code</div>
diff --git a/src/views/HomeView.seo.ts b/src/views/HomeView.seo.ts
index 43e417f..4bcbfd2 100644
--- a/src/views/HomeView.seo.ts
+++ b/src/views/HomeView.seo.ts
@@ -11,7 +11,7 @@ export function useHomeViewSEO() {
     description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
     url: '/',
     type: 'website',
-    keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools'
+    keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools',
   });
 
   // Add organization schema
@@ -28,35 +28,26 @@ export function useHomeViewSEO() {
         children: JSON.stringify({
           '@context': 'https://schema.org',
           '@type': 'SoftwareApplication',
-          'name': 'Spritesheet Generator',
-          'applicationCategory': 'DesignApplication',
-          'offers': {
+          name: 'Spritesheet Generator',
+          applicationCategory: 'DesignApplication',
+          offers: {
             '@type': 'Offer',
-            'price': '0',
-            'priceCurrency': 'USD'
+            price: '0',
+            priceCurrency: 'USD',
           },
-          'operatingSystem': 'Web Browser',
-          'description': 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
-          'url': 'https://spritesheetgenerator.online',
-          'screenshot': 'https://spritesheetgenerator.online/og-image.png',
-          'featureList': [
-            'Free sprite editor',
-            'Automatic spritesheet generation',
-            'Customizable grid layouts',
-            'Animation preview',
-            'Cross-platform compatibility',
-            'Zero installation required',
-            'Batch processing',
-            'Multiple export formats (PNG, JPG, GIF, ZIP, JSON)'
-          ],
-          'browserRequirements': 'Requires JavaScript. Requires HTML5.',
-          'aggregateRating': {
+          operatingSystem: 'Web Browser',
+          description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
+          url: 'https://spritesheetgenerator.online',
+          screenshot: 'https://spritesheetgenerator.online/og-image.png',
+          featureList: ['Free sprite editor', 'Automatic spritesheet generation', 'Customizable grid layouts', 'Animation preview', 'Cross-platform compatibility', 'Zero installation required', 'Batch processing', 'Multiple export formats (PNG, JPG, GIF, ZIP, JSON)'],
+          browserRequirements: 'Requires JavaScript. Requires HTML5.',
+          aggregateRating: {
             '@type': 'AggregateRating',
-            'ratingValue': '4.8',
-            'ratingCount': '127'
-          }
-        })
-      }
-    ]
+            ratingValue: '4.8',
+            ratingCount: '127',
+          },
+        }),
+      },
+    ],
   });
 }
diff --git a/src/views/PrivacyPolicy.vue b/src/views/PrivacyPolicy.vue
index f5f2239..0923fd2 100644
--- a/src/views/PrivacyPolicy.vue
+++ b/src/views/PrivacyPolicy.vue
@@ -10,12 +10,12 @@
     description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
     url: '/privacy-policy',
     type: 'website',
-    keywords: 'privacy policy, data protection, client-side processing'
+    keywords: 'privacy policy, data protection, client-side processing',
   });
 
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
-    { name: 'Privacy Policy', url: '/privacy-policy' }
+    { name: 'Privacy Policy', url: '/privacy-policy' },
   ]);
 </script>