Add SEO-related meta tags

components/content/FfPeopleList.vue

@@ -27,4 +27,20 @@ const data = await queryContent('/about-us/people/_people')
 //const people = data.people.sort((a, b) => a.name > b.name);
 
 const people = data.people
+
+// Add SEO-related meta tags
+useHead({
+  title: 'People - FOSSi Foundation',
+  meta: [
+    { name: 'description', content: 'Meet the people behind the FOSSi Foundation.' },
+    { property: 'og:title', content: 'People - FOSSi Foundation' },
+    { property: 'og:description', content: 'Meet the people behind the FOSSi Foundation.' },
+    { property: 'og:image', content: 'https://fossi-foundation.org/images/people.jpg' },
+    { property: 'og:url', content: 'https://fossi-foundation.org/about-us/people' },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: 'People - FOSSi Foundation' },
+    { name: 'twitter:description', content: 'Meet the people behind the FOSSi Foundation.' },
+    { name: 'twitter:image', content: 'https://fossi-foundation.org/images/people.jpg' }
+  ]
+})
 </script>

nuxt.config.ts

@@ -84,6 +84,18 @@ export default defineNuxtConfig({
         'python',
       ]
     },
+    // Pec85: Automatically take the first picture for SEO-related meta tags
+    seo: {
+      image: {
+        path: 'images',
+        first: true
+      }
+    },
+    // Ped20: Make URLs absolute automatically
+    url: {
+      base: 'https://fossi-foundation.org',
+      relative: false
+    }
   },
 
   // Nuxt Content Assets configuration.