Use screenshort for og image

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

pages/[...slug].vue

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

pages/about.vue

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

pages/blogs/[blog].vue

@@ -76,12 +76,7 @@ useHead({
   ],
 })
 
-const ogImageOptions = {
+defineOgImageScreenshot()
-  title: data.value.title,
-  description: data.value.description,
-}
-// a. Use the Composition API
-defineOgImage(ogImageOptions)
 </script>
 
 <template>

pages/blogs/index.vue

@@ -67,6 +67,8 @@ useHead({
   ],
   titleTemplate: 'Riyad\'s Blog - %s',
 })
+
+defineOgImageScreenshot()
 </script>
 
 <template>

pages/categories/[category].vue

@@ -44,6 +44,8 @@ useHead({
   ],
   titleTemplate: 'Riyad\'s Blog - %s',
 })
+
+defineOgImageScreenshot()
 </script>
 
 <template>

pages/categories/index.vue

@@ -29,6 +29,8 @@ useHead({
   ],
   titleTemplate: 'Riyad\'s Blog - %s',
 })
+
+defineOgImageScreenshot()
 </script>
 
 <template>

pages/index.vue

@@ -11,11 +11,7 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-const ogImageOptions = {
+defineOgImageScreenshot()
-  title: 'Al Asad Nur Riyad.',
-}
-// a. Use the Composition API
-defineOgImage(ogImageOptions)
 </script>
 
 <template>