From fddc5dd5197452d6895c0cd69aebdf95ffcea4d3 Mon Sep 17 00:00:00 2001
From: Anda Toshiki <hello@toshiki.dev>
Date: Wed, 11 Sep 2024 17:33:16 -0700
Subject: [PATCH] test(open graph): force to configure header meta tag section
 properties pretaining to open graph in the head function of default blog post
 page component template of all blog post directory to make article pages
 correctly load open graph properties corretly upon build end process

---
 src/pages/blog/index.vue | 75 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index 9702621..f40a931 100755
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -27,11 +27,76 @@ export default Vue.extend({
         const description = 'Real life stories anecdotes & developmental journeys for embarking your inspirations.'
 
         return {
-            title: 'Blog',
-            meta: this.$prepareMeta({
-                title,
-                description
-            })
+            bodyAttrs: {
+                class: 'overflow-x-hidden'
+            },
+            title,
+            link: [
+                {
+                    rel: 'canonical',
+                    href
+                }
+            ],
+            meta: this.$prepareMeta(
+                {
+                    title,
+                    description,
+                    image,
+                    keywords: `${tags}, toshiki, andatoshiki, blog, Anda Toshiki, homepage, portfolio, website, personal, personal website, real life, programming, coding`,
+                    url: href,
+                },
+                [
+                    {
+                        name: 'twitter:card',
+                        content: 'summary_large_image'
+                    },
+                    {
+                        name: 'article:published-time',
+                        content: post?.createdAt || null
+                    },
+                    {
+                        name: 'twitter:label1',
+                        content: 'History'
+                    },
+                    {
+                        name: 'twitter:data1',
+                        content: post?.createdAt
+                    },
+                    {
+                        name: 'twitter:label2',
+                        content: 'Reading Time'
+                    },
+                    {
+                        name: 'twitter:data2',
+                        content: `${this.getReadingTime} minutes`
+                    },
+                    {
+                        name: 'twitter:image',
+                        content: image
+                    },
+                    // open graph
+                    {
+                        name: 'og:type',
+                        content: 'article'
+                    },
+                    {
+                        name: 'og:site_name',
+                        content: `toshiki.dev/${this.$route?.path}`
+                    },
+                    {
+                        name: 'og:description',
+                        content: description
+                    },
+                    {
+                        name: 'og:image',
+                        content: image
+                    },
+                    {
+                        name: 'og:url',
+                        content: href
+                    }
+                ]
+            )
         }
     },
     computed: {