update meta tag for proper seo

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

app.vue

@@ -1,3 +1,63 @@
+<script setup>
+const description =
+  'Riyad, Software Engineer at AppsCode working on ByteBuilders, with over 2 years experience in Frontend development.'
+const ogTitle =
+  'Riyad codes and helps others learning Javascript, Typescript, Vue, Nuxt, & Problem Solving'
+const twitterDescription =
+  'My website of where I play around with Nuxt, Vue and more and showcase my blog, resources etc'
+const twitterCard = 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673369821/cld-sample-2.jpg'
+const mySite = 'http://localhost:3000/'
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+  meta: [
+    {
+      name: 'description',
+      content: description,
+    },
+    // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
+    { property: 'og:site_name', content: mySite },
+    { property: 'og:type', content: 'website' },
+    {
+      property: 'og:url',
+      content: mySite,
+    },
+    {
+      property: 'og:title',
+      content: ogTitle,
+    },
+    {
+      property: 'og:description',
+      content: description,
+    },
+    {
+      property: 'og:image',
+      content: twitterCard,
+    },
+    // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
+    { name: 'twitter:site', content: '@debs_obrien' },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    {
+      name: 'twitter:url',
+      content: mySite,
+    },
+    {
+      name: 'twitter:title',
+      content: ogTitle,
+    },
+    {
+      name: 'twitter:description',
+      content: twitterDescription,
+    },
+    {
+      name: 'twitter:image',
+      content: twitterCard,
+    },
+  ],
+})
+</script>
+
 <template>
   <div>
     <NuxtLayout>

content/blogs/1. hello-world.md

@@ -1,10 +1,10 @@
 ---
 title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
 date: 1st Jan 2023
-description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
+description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas
 image: /nuxt-blog/pexels-photo-1779487_fnvw1l.jpg
 alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
-ogImage: /nuxt-blog/pexels-photo-1779487_fnvw1l.jpg
+ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673369821/cld-sample-3.jpg
 provider: cloudinary
 tags: ['nuxt', 'javascript', 'vue', 'typescript']
 published: true

pages/blogs/[blog].vue

@@ -17,10 +17,6 @@ const data = computed<BlogPost>(() => {
   }
 })
 
-const comImg = computed(() => {
-  return 'https://res.cloudinary.com/dmecmyphj/image/fetch/v1673371143/https://res.cloudinary.com/dmecmyphj/image/upload/v1673371119/53835458_1012834392239582_6610542001026760704_n_1_psvrpo.jpg'
-})
-
 useHead({
   title: data.value.title || '',
   meta: [
@@ -46,7 +42,7 @@ useHead({
     },
     {
       property: 'og:image',
-      content: comImg.value,
+      content: data.value.ogImage || data.value.image,
     },
     // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
     { name: 'twitter:site', content: '@@qdnvubp' },
@@ -65,7 +61,7 @@ useHead({
     },
     {
       name: 'twitter:image',
-      content: comImg.value,
+      content: data.value.ogImage || data.value.image,
     },
   ],
   link: [
@@ -110,11 +106,11 @@ useHead({
     <div
       class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
     >
-      <ContentDoc>
-        <template #not-found>
-          <h1>Document not found</h1>
+      <ContentRenderer :value="articles">
+        <template #empty>
+          <p>No content found.</p>
         </template>
-      </ContentDoc>
+      </ContentRenderer>
     </div>
   </main>
 </template>