Update seo og image code

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

pages/[...slug].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/about.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/blogs/[blog].vue

@@ -76,7 +76,12 @@ useHead({
   ],
 })
 
-defineOgImageScreenshot()
+defineOgImage({
+  component: 'Blog',
+  image: data.value.image,
+  title: data.value.title,
+  description: data.value.description,
+})
 </script>
 
 <template>

pages/blogs/index.vue

@@ -68,7 +68,7 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/categories/[category].vue

@@ -45,7 +45,7 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/categories/index.vue

@@ -30,7 +30,7 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImageScreenshot()
+defineOgImage()
 </script>
 
 <template>

pages/index.vue

@@ -11,7 +11,11 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-defineOgImageScreenshot()
+// a. Use the Composition API
+defineOgImage({
+  title: 'Riyad\'s Blog',
+  description: 'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more',
+})
 </script>
 
 <template>