chore: Update SEO metadata in app and blog components

d0rich · Sep 6, 2024 · c01c9c8 · c01c9c8
1 parent 167fbab
commit c01c9c8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/apps/d0rich.me/app.vue b/apps/d0rich.me/app.vue
@@ -44,8 +44,7 @@ useSeoMeta({
   ogDescription: description,
   author: 'Nikolai Dorofeev',
   generator: 'Nuxt 3',
-  // colorScheme: 'dark',
-  ogSiteName: 'd0rich',
+  ogSiteName: 'd0rich.me',
   ogImage: 'https://d0rich.me/og/image.jpg',
   ogUrl: computed(() => 'https://d0rich.me' + route.path),
   twitterCard: 'summary_large_image',

diff --git a/apps/d0rich.me/components/AsyncSafeSeoWithOg.vue b/apps/d0rich.me/components/AsyncSafeSeoWithOg.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
-defineProps<{
+import { joinURL } from 'ufo'
+
+const props = defineProps<{
   title?: string
   ogTitle?: string
   description?: string
   image?: string
 }>()
+
+const imageHref = computed(() => {
+  if (!props.image) return undefined
+  return joinURL('https://d0rich.me', props.image)
+})
 </script>
 
 <template>
@@ -18,12 +25,20 @@ defineProps<{
       :content="ogTitle || title"
     />
     <Meta v-if="title" property="twitter:title" :content="title" />
-    <Meta v-if="description" name="description" :content="description" />
-    <Meta v-if="description" property="og:description" :content="description" />
-    <Meta
-      v-if="description"
-      property="twitter:description"
-      :content="description"
-    />
+
+    <template v-if="description">
+      <Meta name="description" :content="description" />
+      <Meta property="og:description" :content="description" />
+      <Meta property="twitter:description" :content="description" />
+    </template>
+
+    <template v-if="image">
+      <Meta property="og:image" :content="imageHref" />
+      <Meta property="twitter:image" :content="imageHref" />
+      <Meta property="tg:cover" :content="imageHref" />
+    </template>
+
+    <Link rel="author" href="https://d0rich.me" />
+    <Meta property="tg:channel" content="@d0rich" />
   </Head>
 </template>
diff --git a/apps/d0rich.me/pages/blog/[...slug].vue b/apps/d0rich.me/pages/blog/[...slug].vue
@@ -3,7 +3,8 @@ import { Disqus } from 'vue-disqus'
 import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'
 
 interface Document extends MarkdownParsedContent {
-  date?: Date
+  date?: string
+  image?: string
 }
 
 const slug = clearSlug(useRoute().params.slug as string[])
@@ -53,16 +54,34 @@ const linkToBlog = computed(() => {
     Math.floor((position.value ?? 1) / (itemsOnPage - 1) + 1)
   )
 })
+
+const docDate = computed(() => {
+  if (!doc.value?.date) return undefined
+  return new Date(doc.value.date)
+})
 </script>
 
 <template>
   <div v-if="doc" class="pb-[50vh] pt-10">
-    <AsyncSafeSeoWithOg :title="doc.title" :description="doc.description" />
+    <AsyncSafeSeoWithOg
+      :title="doc.title"
+      :description="doc.description"
+      :image="doc.image"
+    />
+    <Head>
+      <Meta
+        v-if="docDate"
+        property="tg:published_date"
+        :content="String(Math.floor(docDate.getTime() / 1000))"
+      />
+    </Head>
     <div class="blog-article blog-fonts">
       <nav class="mb-10">
         <DBigBangButton text="< Back" :to="addTrailingSlash(linkToBlog)" />
       </nav>
-      <time v-if="doc.date">{{ dateToDayMonthYear(doc.date) }}</time>
+      <time v-if="docDate" :datetime="docDate.toISOString()">
+        {{ dateToDayMonthYear(doc.date) }}
+      </time>
     </div>
     <ContentRenderer
       :value="doc"