Add embed data for OpenGraph and Twitter

Author: BluSpring

app.vue

@@ -21,6 +21,20 @@
     const route = useRoute();
 
     useHead({
-        titleTemplate: '%s - Unity Multiplayer'
+        titleTemplate: '%s - Unity Multiplayer',
+        meta: [
+            {
+                property: 'og:title',
+                content: `${route.meta.name} - Unity Multiplayer`
+            },
+            {
+                property: 'twitter:title',
+                content: `${route.meta.name} - Unity Multiplayer`
+            },
+            {
+                property: 'title',
+                content: `${route.meta.name} - Unity Multiplayer`
+            }
+        ]
     });
 </script>

nuxt.config.ts

@@ -1,3 +1,5 @@
+const description = 'Unity Multiplayer is a multilingual factions Minecraft server for creators, which also features the first free and public live translation mod UnityTranslate.';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-11-01',
@@ -13,6 +15,17 @@ export default defineNuxtConfig({
                 { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0' },
                 { rel: 'icon', href: '/icon.svg' }
             ],
+            meta: [
+                { name: 'description', content: description },
+                { name: 'og:type', content: 'website' },
+                { name: 'og:description', content: description },
+                { name: 'og:url', content: 'https://unitymultiplayer.online' },
+                { name: 'og:image', content: 'https://unitymultiplayer.online/icon.svg' },
+                { name: 'twitter:description', content: description },
+                { name: 'twitter:url', content: 'https://unitymultiplayer.online' },
+                { name: 'twitter:card', content: 'summary' },
+                { name: 'twitter:image', content: 'https://unitymultiplayer.online/icon.svg' },
+            ]
         },
     },
 });

pages/about.vue

@@ -17,4 +17,10 @@
             all running on Fabric 1.21.1, created by BluSpring and TheFox580.
         </p>
     </main>
-</template>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+    name: 'About'
+});
+</script>

pages/credits.vue

@@ -59,4 +59,10 @@ a {
 a:hover {
     filter: brightness(125%);
 }
-</style>
+</style>
+
+<script setup lang="ts">
+definePageMeta({
+    name: 'Credits'
+});
+</script>

pages/index.vue

@@ -60,4 +60,10 @@
             };
         }
     }
+</script>
+
+<script setup lang="ts">
+definePageMeta({
+    name: 'Home'
+});
 </script>