root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] SEO best practices

Browse Source
This commit is contained in:
root
2025-11-26 17:20:09 +01:00
parent accea99408
commit b801cd4c99
9 changed files with 222 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/AboutUs.vue
View File

@@ -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>

154
src/views/BlogDetail.vue
View File

@@ -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>

24
src/views/BlogOverview.vue
View File

@@ -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>

24
src/views/Contact.vue
View File

@@ -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>

47
src/views/HomeView.seo.ts
View File

@@ -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',
},
}),
},
],
});
}

4
src/views/PrivacyPolicy.vue
View File

@@ -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>