fix: améliorer la gestion des métadonnées SEO dans plusieurs fichiers de page

app/pages/hobbies.vue

@@ -3,13 +3,26 @@ const { data: page } = await useAsyncData('hobbies', () => {
   return queryCollection('hobbies').first()
 })
 
-useSeoMeta({
+const head = {
   title: 'Balance & Perspectives',
   description: 'Beyond the code. Exploring how competitive sports, motorsports strategy, and cultural experiences fuel my research resilience and cognitive flexibility.',
-  ogTitle: 'Balance & Perspectives • Arthur Danjou',
-  ogDescription: 'Beyond the code. Exploring how competitive sports, motorsports strategy, and cultural experiences fuel my research resilience and cognitive flexibility.',
+  subtitle: ''
+}
+
+useSeoMeta({
+  title: head.title,
+  description: head.description,
+  ogTitle: `${head.title} • Arthur Danjou`,
+  ogDescription: head.description,
   twitterCard: 'summary_large_image'
 })
+
+defineOgImageComponent('NuxtSeo', {
+  title: head.title,
+  description: head.description,
+  subtitle: head.subtitle,
+  theme: '#F43F5E'
+})
 </script>
 
 <template>

app/pages/index.vue

@@ -1,12 +1,25 @@
 <script lang="ts" setup>
-useSeoMeta({
+const head = {
   title: 'AI Safety & Applied Mathematics',
   description: 'Research Engineer & Master 2 Student at Paris-Dauphine (ISF). Focusing on AI Alignment, Robustness, and Safe Deep Learning.',
-  ogTitle: 'Arthur Danjou • AI Safety & Applied Mathematics',
-  ogDescription: 'Research Engineer & Master 2 Student at Paris-Dauphine (ISF). Focusing on AI Alignment, Robustness, and Safe Deep Learning.',
+  subtitle: ''
+}
+
+useSeoMeta({
+  title: head.title,
+  description: head.description,
+  ogTitle: `Arthur Danjou • ${head.title}`,
+  ogDescription: head.description,
   twitterCard: 'summary_large_image'
 })
 
+defineOgImageComponent('NuxtSeo', {
+  title: head.title,
+  description: head.description,
+  subtitle: head.subtitle,
+  theme: '#F43F5E'
+})
+
 const { data: page } = await useAsyncData('index', () => {
   return queryCollection('index').first()
 })

app/pages/projects/[slug].vue

@@ -29,6 +29,13 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+defineOgImageComponent('NuxtSeo', {
+  title: project.value.title,
+  description: project.value.description,
+  subtitle: project.value.type ? `Project Type: ${project.value.type}` : '',
+  theme: '#F43F5E'
+})
+
 const { statusColors, typeColors } = useProjectColors()
 
 const formattedDate = computed(() => {

app/pages/projects/index.vue

@@ -7,14 +7,25 @@ const { data: projects } = await useAsyncData('projects', () => {
     .all()
 })
 
-useSeoMeta({
+const head = {
   title: 'Engineering & Research Labs',
-  description: 'Bridging the gap between theoretical models and production systems. Explore my experimental labs, open-source contributions, and engineering work.',
-  ogTitle: 'Engineering & Research Labs • Arthur Danjou',
-  ogDescription: 'Bridging the gap between theoretical models and production systems. Explore my experimental labs, open-source contributions, and engineering work.',
+  description: 'Bridging the gap between theoretical models and production systems. Explore my experimental labs, open-source contributions, and engineering work.'
+}
+
+useSeoMeta({
+  title: head.title,
+  description: head.description,
+  ogTitle: `${head.title} • Arthur Danjou`,
+  ogDescription: head.description,
   twitterCard: 'summary_large_image'
 })
 
+defineOgImageComponent('NuxtSeo', {
+  title: head.title,
+  description: head.description,
+  theme: '#F43F5E'
+})
+
 const { statusColors, typeColors } = useProjectColors()
 
 const selectedType = ref<string | null>(null)

app/pages/uses.vue

@@ -3,13 +3,26 @@ const { data: page } = await useAsyncData('uses', () => {
   return queryCollection('uses').first()
 })
 
-useSeoMeta({
+const head = {
   title: 'Research Lab & Technical Setup',
   description: 'A curated list of the hardware, software, and self-hosted infrastructure that powers my mathematical modeling and AI research workflows.',
-  ogTitle: 'Research Lab & Technical Setup • Arthur Danjou',
-  ogDescription: 'A curated list of the hardware, software, and self-hosted infrastructure that powers my mathematical modeling and AI research workflows.',
+  subtitle: 'The gear powering my research & development workflow.'
+}
+
+useSeoMeta({
+  title: head.title,
+  description: head.description,
+  ogTitle: `${head.title} • Arthur Danjou`,
+  ogDescription: head.description,
   twitterCard: 'summary_large_image'
 })
+
+defineOgImageComponent('NuxtSeo', {
+  title: head.title,
+  subtitle: head.subtitle,
+  description: head.description,
+  theme: '#F43F5E'
+})
 </script>
 
 <template>