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

@@ -27,11 +27,76 @@ export default Vue.extend({
         const description = 'Real life stories anecdotes & developmental journeys for embarking your inspirations.'
 
         return {
-            title: 'Blog',
+            bodyAttrs: {
-            meta: this.$prepareMeta({
+                class: 'overflow-x-hidden'
-                title,
+            },
-                description
+            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: {