fix: update og-image description for pages (#117)

# Description

The ogImage was set on `app.vue` which overrides all other ogImage
configurations on child pages.
- Removed ogImage config in app.vue and set it up on /content/index.vue

app.vue

@@ -22,7 +22,7 @@ useHead({
 useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
-  ogUrl: 'https://docs.zksync.io/',
+  ogUrl: 'https://docs.zksync.io',
   ogImageAlt: 'Hyperscaling Ethereum with ZK tech.',
   ogDescription:
     'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
@@ -36,12 +36,6 @@ useSeoMeta({
   twitterCreator: '@zkSyncDevs',
   twitterImageAlt: 'Hyperscaling Ethereum with ZK tech.',
 });
-
-defineOgImage({
-  component: 'OgImageZK',
-  title: seo?.siteName,
-  description: 'Access detailed guides, references and resources that will help you build with zkSync Era.',
-});
 </script>
 
 <template>

pages/index.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne());
 
+const { seo } = useAppConfig();
+
 useSeoMeta({
   titleTemplate: '',
   title: page.value?.title,
   ogTitle: page.value?.title,
   description: page.value?.description,
   ogDescription: page.value?.description,
 });
+
+defineOgImage({
+  component: 'OgImageZK',
+  title: seo?.siteName,
+  description: 'Access detailed guides, references and resources that will help you build with zkSync Era.',
+});
 </script>
 
 <template>