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

19
src/components/Breadcrumbs.vue
View File

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

16
src/composables/useSEO.ts
View File

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

123
src/composables/useStructuredData.ts
View File

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

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>