add useHead for content

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

pages/blogs/[blog].vue

@@ -16,6 +16,61 @@ const data = computed<BlogPost>(() => {
     published: articles.published || false,
   }
 })
+
+useHead({
+  title: data.value.title || '',
+  meta: [
+    { name: 'description', content: data.value.description },
+    {
+      name: 'description',
+      content: data.value.description,
+    },
+    // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
+    { property: 'og:site_name', content: `Riyad's Blog` },
+    { hid: 'og:type', property: 'og:type', content: 'website' },
+    {
+      property: 'og:url',
+      content: 'https://blog-nurriyad.vercel.app/',
+    },
+    {
+      property: 'og:title',
+      content: data.value.title,
+    },
+    {
+      property: 'og:description',
+      content: data.value.description,
+    },
+    {
+      property: 'og:image',
+      content: data.value.ogImage || data.value.image,
+    },
+    // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
+    { name: 'twitter:site', content: '@@qdnvubp' },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    {
+      name: 'twitter:url',
+      content: 'https://blog-nurriyad.vercel.app/',
+    },
+    {
+      name: 'twitter:title',
+      content: data.value.title,
+    },
+    {
+      name: 'twitter:description',
+      content: data.value.description,
+    },
+    {
+      name: 'twitter:image',
+      content: data.value.ogImage || data.value.image,
+    },
+  ],
+  link: [
+    {
+      rel: 'canonical',
+      href: `https://blog-nurriyad.vercel.app/${path}`,
+    },
+  ],
+})
 </script>
 
 <template>