72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useHead } from '@vueuse/head';
|
|
|
|
export interface SEOMetaData {
|
|
title: string;
|
|
description: string;
|
|
image?: string;
|
|
url?: string;
|
|
type?: 'website' | 'article';
|
|
author?: string;
|
|
publishedTime?: string;
|
|
modifiedTime?: string;
|
|
keywords?: string;
|
|
}
|
|
|
|
const SITE_NAME = 'Spritesheet Generator';
|
|
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 fullUrl = metadata.url ? `${SITE_URL}${metadata.url}` : SITE_URL;
|
|
|
|
const imageUrl = metadata.image ? `${SITE_URL}${metadata.image}` : `${SITE_URL}${DEFAULT_IMAGE}`;
|
|
|
|
const metaTags: any[] = [
|
|
// Primary Meta Tags
|
|
{ name: 'title', content: fullTitle },
|
|
{ name: 'description', content: metadata.description },
|
|
{ name: 'robots', content: 'index, follow' },
|
|
|
|
// Open Graph / Facebook
|
|
{ property: 'og:type', content: metadata.type || 'website' },
|
|
{ property: 'og:url', content: fullUrl },
|
|
{ property: 'og:title', content: fullTitle },
|
|
{ property: 'og:description', content: metadata.description },
|
|
{ property: 'og:image', content: imageUrl },
|
|
{ property: 'og:site_name', content: SITE_NAME },
|
|
|
|
// Twitter
|
|
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
{ name: 'twitter:url', content: fullUrl },
|
|
{ name: 'twitter:title', content: fullTitle },
|
|
{ name: 'twitter:description', content: metadata.description },
|
|
{ name: 'twitter:image', content: imageUrl },
|
|
];
|
|
|
|
// Add article-specific meta tags
|
|
if (metadata.type === 'article') {
|
|
if (metadata.author) {
|
|
metaTags.push({ property: 'article:author', content: metadata.author });
|
|
}
|
|
if (metadata.publishedTime) {
|
|
metaTags.push({ property: 'article:published_time', content: metadata.publishedTime });
|
|
}
|
|
if (metadata.modifiedTime) {
|
|
metaTags.push({ property: 'article:modified_time', content: metadata.modifiedTime });
|
|
}
|
|
}
|
|
|
|
// Add keywords if provided
|
|
if (metadata.keywords) {
|
|
metaTags.push({ name: 'keywords', content: metadata.keywords });
|
|
}
|
|
|
|
useHead({
|
|
title: fullTitle,
|
|
meta: metaTags,
|
|
link: [{ rel: 'canonical', href: fullUrl }],
|
|
});
|
|
}
|