refactor: update SEO meta tags

tooleks · Oct 31, 2024 · 66e0ad3 · 66e0ad3
1 parent 2c3c687
commit 66e0ad3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/site/pages/index.vue b/site/pages/index.vue
@@ -27,25 +27,26 @@ useHead({
   title: pageTitle,
   link: [
     //
-    { rel: 'canonical', href: buildPageUrl(route.href) },
-  ],
-  meta: [
-    { name: 'description', content: $t('website.description') },
-    { name: 'keywords', content: $t('website.keywords') },
-    { property: 'og:image', content: buildPageUrl('/preview-608x608.jpg') },
-    { property: 'og:image:width', content: '608' },
-    { property: 'og:image:height', content: '608' },
-    { property: 'og:type', content: 'website' },
-    { property: 'og:url', content: pageUrl },
-    { property: 'og:site_name', content: appConfig.library.name },
-    { property: 'og:title', content: pageTitle },
-    { property: 'og:description', content: $t('website.description') },
-    { name: 'twitter:image', content: buildPageUrl('/preview-608x608.jpg') },
-    { name: 'twitter:card', content: 'summary' },
-    { name: 'twitter:title', content: pageTitle },
-    { name: 'twitter:description', content: pageTitle },
+    { rel: 'canonical', href: buildPageUrl(route.fullPath) },
   ],
 });
+
+useSeoMeta({
+  description: $t('website.description'),
+  keywords: $t('website.keywords'),
+  ogImage: buildPageUrl('/preview-608x608.jpg'),
+  ogImageWidth: 608,
+  ogImageHeight: 608,
+  ogType: 'website',
+  ogUrl: pageUrl,
+  ogSiteName: appConfig.library.name,
+  ogTitle: pageTitle,
+  ogDescription: $t('website.description'),
+  twitterImage: buildPageUrl('/preview-608x608.jpg'),
+  twitterCard: 'summary',
+  twitterTitle: pageTitle,
+  twitterDescription: pageTitle,
+});
 </script>
 
 <template>

diff --git a/site/pages/military.vue b/site/pages/military.vue
@@ -27,28 +27,29 @@ useHead({
   title: pageTitle,
   link: [
     //
-    { rel: 'canonical', href: buildPageUrl(route.href) },
-  ],
-  meta: [
-    { name: 'description', content: $t('website.description.military') },
-    { name: 'keywords', content: $t('website.keywords.military') },
-    { property: 'og:image', content: buildPageUrl('/preview-608x608.jpg') },
-    { property: 'og:image:width', content: '608' },
-    { property: 'og:image:height', content: '608' },
-    { property: 'og:type', content: 'website' },
-    { property: 'og:url', content: pageUrl },
-    { property: 'og:site_name', content: appConfig.library.name },
-    { property: 'og:title', content: pageTitle },
-    { property: 'og:description', content: $t('website.description.military') },
-    { name: 'twitter:image', content: buildPageUrl('/preview-608x608.jpg') },
-    { name: 'twitter:card', content: 'summary' },
-    { name: 'twitter:title', content: pageTitle },
-    { name: 'twitter:description', content: pageTitle },
+    { rel: 'canonical', href: buildPageUrl(route.fullPath) },
   ],
   bodyAttrs: {
     'data-bs-theme': 'military',
   },
 });
+
+useSeoMeta({
+  description: $t('website.description.military'),
+  keywords: $t('website.keywords.military'),
+  ogImage: buildPageUrl('/preview-608x608.jpg'),
+  ogImageWidth: 608,
+  ogImageHeight: 608,
+  ogType: 'website',
+  ogUrl: pageUrl,
+  ogSiteName: appConfig.library.name,
+  ogTitle: pageTitle,
+  ogDescription: $t('website.description.military'),
+  twitterImage: buildPageUrl('/preview-608x608.jpg'),
+  twitterCard: 'summary',
+  twitterTitle: pageTitle,
+  twitterDescription: pageTitle,
+});
 </script>
 
 <template>