From e5ede6f01a2da270c6b85d2d7e93e5d60d7f2111 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Fri, 13 Dec 2024 22:52:35 +0100
Subject: [PATCH] feat: improve SEO on index page

---
 nuxt.config.ts  | 26 +++++++++++++++++++++-----
 pages/[id].vue  | 13 -------------
 pages/index.vue | 29 +++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index f8401bc..f1f19bc 100644
--- a/nuxt.config.ts
+++ b/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",
 });
-
diff --git a/pages/[id].vue b/pages/[id].vue
index 06429f8..51aa8a9 100644
--- a/pages/[id].vue
+++ b/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;
 
diff --git a/pages/index.vue b/pages/index.vue
index 1c55169..9028c1c 100644
--- a/pages/index.vue
+++ b/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">