Fix meta default

app.vue

@@ -6,10 +6,13 @@ const route = useRoute()
 function initSeoMeta() {
     useSeo({
         title: route.meta.title as string,
-        ogTitle: route.meta.ogTitle as string,
+        ogTitle: route.meta.title as string,
         description: route.meta.description as string,
-        ogDescription: route.meta.ogDescription as string,
-        ogImage: route.meta.ogImage as string,
+        ogDescription: route.meta.description as string,
+        ogImageUrl: route.meta.image as string,
+        twitterTitle: route.meta.title as string,
+        twitterDescription: route.meta.description as string,
+        twitterImage: route.meta.image as string,
     })
 }
 

composables/useSeo.ts

@@ -1,19 +1,26 @@
 import { useSeoMeta } from '#imports'
 
+// NB: It's important to change the default value of every metadata here.
 export function useSeo({
     title = 'Default Title',
-    ogTitle = 'Default OG Title',
     description = 'This is the default description, let me tell you all about it.',
-    ogDescription = 'This is my amazing site, let me tell you all about it.',
-    ogImage = 'https://example.com/image.png',
+    ogTitle = 'Default Title',
+    ogDescription = 'This is the default description, let me tell you all about it.',
+    ogImageUrl = 'https://example.com/image.png',
+    twitterTitle = 'Default Title',
+    twitterDescription = 'This is the default description, let me tell you all about it.',
+    twitterImage = 'https://example.com/image.png',
 } = {}) {
     useSeoMeta({
         title,
-        ogTitle,
         description,
+        ogTitle,
         ogDescription,
-        ogImage,
+        ogImageUrl,
+        twitterTitle,
         twitterCard: 'summary_large_image',
+        twitterDescription,
+        twitterImage,
         mobileWebAppCapable: 'yes',
     })
 }

layouts/base.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col min-h-screen">
+    <div class="flex flex-col min-h-screen antialiased">
         <Header></Header>
         <main class="flex-grow px-3 py-2 md:px-0 md:max-w-5xl md:mx-auto">
             <slot></slot>

pages/about/index.vue

@@ -2,7 +2,7 @@
 definePageMeta({
     layout: 'base',
     title: 'About',
-    ogTitle: 'This Og Title in About page',
+    image: 'Image from about',
 })
 </script>
 <template>