diff --git a/app/pages/hobbies.vue b/app/pages/hobbies.vue
index b4936d0..0550fa3 100644
--- a/app/pages/hobbies.vue
+++ b/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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8f348ba..d9808cd 100644
--- a/app/pages/index.vue
+++ b/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()
 })
diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index 35c4b78..9d43d5e 100644
--- a/app/pages/projects/[slug].vue
+++ b/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(() => {
diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
index f40be6e..62f4f7c 100644
--- a/app/pages/projects/index.vue
+++ b/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)
diff --git a/app/pages/uses.vue b/app/pages/uses.vue
index 2eb68cc..9a36eb2 100644
--- a/app/pages/uses.vue
+++ b/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>