diff --git a/.starters/default/content/articles/2.configure.md b/.starters/default/content/articles/2.configure.md
index e9c6b4785..69fcc21bf 100644
--- a/.starters/default/content/articles/2.configure.md
+++ b/.starters/default/content/articles/2.configure.md
@@ -60,6 +60,12 @@ export default defineAppConfig({
         icon: 'uil:linkedin',
         label: 'LinkedIn',
         href: 'https://www.linkedin.com/company/nuxtlabs'
+      },
+      mastodon: {
+        icon: 'simple-icons:mastodon',
+        label: 'Mastodon',
+        href: 'https://m.webtoo.ls/@nuxt',
+        rel: 'me'
       }
     }
   }
diff --git a/components/SocialIcons.vue b/components/SocialIcons.vue
index a83aff0e6..be1923c94 100644
--- a/components/SocialIcons.vue
+++ b/components/SocialIcons.vue
@@ -25,6 +25,14 @@ const icons = computed<any>(() => {
     })
     .filter(Boolean)
 })
+
+const getRel = (icon:any) => {
+  const base = ['noopener', 'noreferrer']
+  if (icon.rel) {
+    base.push(icon.rel)
+  }
+  return base.join(' ')
+}
 </script>
 
 <template>
@@ -32,7 +40,7 @@ const icons = computed<any>(() => {
   <NuxtLink
     v-for="icon in icons"
     :key="icon.label"
-    rel="noopener noreferrer"
+    :rel="getRel(icon)"
     :title="icon.label"
     :aria-label="icon.label"
     :href="icon.href"