From 6bf1463d034a8af6d4f5f77f6c06a3a7e996722a Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 8 Jul 2024 01:21:10 +0200
Subject: [PATCH] Fix SEO

---
 app/app.vue         | 52 +++++++++++++++++++++++++++++++++++++--------
 app/pages/index.vue |  6 ------
 content/home/en.md  |  1 +
 content/home/fr.md  |  1 +
 4 files changed, 45 insertions(+), 15 deletions(-)
diff --git a/app/app.vue b/app/app.vue
index 9b4e5e3..87d439c 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,19 +1,53 @@
 <template>
-  <div>
-    <NuxtLoadingIndicator color="#808080" />
-    <AppBackground />
-    <UContainer class="z-50 relative">
-      <AppHeader />
-      <NuxtPage class="mt-12" />
-      <AppFooter />
-    </UContainer>
-  </div>
+  <Html
+    :dir="head.htmlAttrs.dir"
+    :lang="head.htmlAttrs.lang"
+  >
+    <Head>
+      <template
+        v-for="link in head.link"
+        :key="link.id"
+      >
+        <Link
+          :id="link.id"
+          :href="link.href"
+          :hreflang="link.hreflang"
+          :rel="link.rel"
+        />
+      </template>
+      <template
+        v-for="meta in head.meta"
+        :key="meta.id"
+      >
+        <Meta
+          :id="meta.id"
+          :content="meta.content"
+          :property="meta.property"
+        />
+      </template>
+    </Head>
+    <Body>
+      <NuxtLoadingIndicator color="#808080" />
+      <AppBackground />
+      <UContainer class="z-50 relative">
+        <AppHeader />
+        <NuxtPage class="mt-12" />
+        <AppFooter />
+      </UContainer>
+    </Body>
+  </Html>
 </template>
 
 <script lang="ts" setup>
 useHead({
   link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }]
 })
+
+const head = useLocaleHead({
+  addDirAttribute: true,
+  identifierAttribute: 'id',
+  addSeoAttributes: true
+})
 </script>
 
 <style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f620469..1561e4c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,10 +6,4 @@
 
 <script lang="ts" setup>
 const { locale } = useI18n()
-
-useSeoMeta({
-  title: 'Arthur Danjou • Mathematics Lover and IA Enthusiast',
-  titleTemplate: '%s',
-  description: 'I\'m Arthur, a Mathematics lover and IA enthusiast. I\'m currently studying at the University of Paris-Saclay. I\'m passionate about Mathematics, Computer Science, and Artificial Intelligence.'
-})
 </script>
diff --git a/content/home/en.md b/content/home/en.md
index 7f1f57f..5ff2297 100644
--- a/content/home/en.md
+++ b/content/home/en.md
@@ -1,5 +1,6 @@
 ---
 title: Arthur Danjou • Mathematics Lover and IA Enthusiast
+description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
 ---
 
 Hey, I'm Arthur Danjou, a mathematics student at the Paris-Saclay Faculty of Science in France.
diff --git a/content/home/fr.md b/content/home/fr.md
index c6b2401..fdd161f 100644
--- a/content/home/fr.md
+++ b/content/home/fr.md
@@ -1,5 +1,6 @@
 ---
 title: Arthur Danjou • Mathematics Lover and IA Enthusiast
+description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
 ---
 
 Salut, je suis Arthur Danjou, étudiant en mathématiques à la faculté des sciences de Paris-Saclay en France.
