feat: improve SEO on index page

nuxt.config.ts

@@ -4,21 +4,38 @@ export default defineNuxtConfig({
 
   modules: ["@nuxt/eslint", "@nuxt/image", "nuxt-icon", "nuxt-delay-hydration"],
 
+  app: {
+    head: {
+      title: "Meal Planner",
+      meta: [
+        { charset: "utf-8" },
+        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        {
+          hid: "description",
+          name: "description",
+          content: "Meal Planner",
+        },
+      ],
+      link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
+    },
+  },
+
   build: {
     transpile: ["trpc-nuxt"],
   },
 
   css: ["~/assets/css/main.css"],
 
-  image: {
-    domains: ["www.themealdb.com"],
-  },
-
   delayHydration: {
     mode: "init",
     // enables nuxt-delay-hydration in dev mode for testing
     debug: process.env.NODE_ENV === "development",
   },
+
+  image: {
+    domains: ["www.themealdb.com"],
+  },
+
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -35,4 +52,3 @@ export default defineNuxtConfig({
   ssr: true,
   compatibilityDate: "2024-12-13",
 });
-

pages/[id].vue

@@ -1,17 +1,4 @@
 <script setup lang="ts">
-useHead({
-  htmlAttrs: {
-    lang: "en",
-  },
-  link: [
-    {
-      rel: "icon",
-      type: "image/png",
-      href: "/favicon.png",
-    },
-  ],
-});
-
 const { params } = useRoute();
 const routeParam = params.id;
 

pages/index.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+useHead({
+  htmlAttrs: {
+    lang: "en",
+  },
+  link: [
+    {
+      rel: "icon",
+      type: "image/png",
+      href: "/favicon.png",
+    },
+  ],
+});
+
+const url = useRequestURL();
+useSeoMeta({
+  title: `Mood2Food`,
+  description: "The perfect meal that fits your mood",
+  ogTitle: `Mood2Food`,
+  ogDescription: "The perfect meal that fits your mood",
+  ogImage: "/logo192.png",
+  ogUrl: url.href,
+  twitterTitle: `Mood2Food`,
+  twitterDescription: "The perfect meal that fits your mood",
+  twitterImage: "/logo192.png",
+  twitterCard: "summary",
+});
+</script>
+
 <template>
   <div class="hero min-h-full bg-base-200">
     <div class="hero-content flex-col lg:flex-row-reverse">