Add SEO support

pages/posts/[...slug].vue

@@ -25,18 +25,22 @@ const { data: post } = await useAsyncData(route.path, () => {
   return queryCollection('posts').path(route.path).first()
 })
 
-const ogUrl = `${config.public.baseUrl}${route.path}`
+const ogUrl = config.public.baseUrl + route.path
-useHead({
+useSeoMeta({
-  title: post.value?.title || 'Untitled blog post',
+  title: post.value?.title || 'Loading...',
-  meta: [
+  description: post.value?.description || 'Content from our blog',
-    { name: 'description', content: post.value?.description || 'A blog post with no description provided.' },
+  keywords: post.value?.tags?.join(', ') || 'blog, article, post',
-    { property: 'og:title', content: `${post.value?.title || 'Untitled blog post'} · ${config.public.siteName}`},
+  ogTitle: post.value?.title + ' / thawia.ng',
-    { property: 'og:description', content: post.value?.description || 'A blog post with no description provided.' },
+  ogDescription: post.value?.description,
-    { property: 'og:url', content: ogUrl },
+  ogType: 'article',
-    { property: 'og:type', content: 'article' },
+  ogUrl: ogUrl,
-    { name: 'twitter:title', content: `${post.value?.title || 'Untitled blog post'} · ${config.public.siteName}` },
+  ogImage: post.value?.coverImage ? baseUrl + '/portal/f/assets/' + post.value?.coverImage : undefined,
-    { name: 'twitter:description', content: post.value?.description || 'A blog post with no description provided.' }
+  ogSiteName: config.public.siteName,
-  ]
+  twitterCard: 'summary_large_image',
+  twitterTitle: post.value?.title + ' / thawia.ng',
+  twitterDescription: post.value?.description,
+  twitterImage: post.value?.coverImage ? `${baseUrl}/portal/f/assets/${post.value?.coverImage}` : undefined,
+  twitterSite: '@' + config.public.twitterUsername
 })
 </script>