Add structured data, content artifacts, and improve SEO

app/app.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 const route = useRoute()
 const runtimeConfig = useRuntimeConfig()
-const colorMode = useColorMode()
 const baseURL = runtimeConfig.app.baseURL
 
-const color = computed(() => colorMode.value === 'dark' ? '#020618' : 'white')
 const basePrefix = baseURL.replace(/\/$/, '')
 const canonicalUrl = computed(() => {
   return new URL(`${basePrefix}${route.path || '/'}`, runtimeConfig.public.siteUrl).toString()
@@ -14,7 +12,8 @@ useHead({
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: 'theme-color', name: 'theme-color', content: color },
+    { key: 'theme-color-light', name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
+    { key: 'theme-color-dark', name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#020618' },
     { name: 'author', content: 'Fabian Meyer' },
     {
       name: 'robots',
@@ -25,7 +24,10 @@ useHead({
   ],
   link: [
     { rel: 'icon', href: `${baseURL}favicon.ico` },
-    { rel: 'canonical', href: canonicalUrl }
+    { rel: 'canonical', href: canonicalUrl },
+    { rel: 'alternate', type: 'application/rss+xml', title: 'fmeyer.dev — Labs & Speaking', href: `${baseURL}rss.xml` },
+    { rel: 'me', href: 'https://github.com/dinooo13' },
+    { rel: 'me', href: 'https://linkedin.com/in/fabian-meyer-02038813a' }
   ],
   htmlAttrs: {
     lang: 'en'

app/components/OgImage/Default.satori.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps({
+  title: { type: String, required: false, default: 'fmeyer.dev' },
+  description: { type: String, required: false, default: '' },
+  siteName: { type: String, required: false, default: 'fmeyer.dev' }
+})
+</script>
+
+<template>
+  <div
+    class="relative flex h-full w-full flex-col justify-between bg-white p-[72px] text-neutral-900"
+  >
+    <div
+      class="absolute inset-0"
+      :style="{
+        backgroundImage:
+          'radial-gradient(ellipse 90% 90% at 100% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 60%), radial-gradient(ellipse 90% 90% at 0% 100%, rgba(37, 99, 235, 0.12) 0%, transparent 55%)'
+      }"
+    />
+
+    <div class="relative flex items-center gap-3">
+      <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-[24px] font-bold text-white">
+        F
+      </div>
+      <span class="text-[26px] font-semibold tracking-tight text-neutral-900">
+        {{ siteName }}
+      </span>
+    </div>
+
+    <div class="relative flex flex-col gap-6">
+      <h1
+        class="m-0 text-[64px] font-bold leading-[1.1] tracking-tight text-neutral-900"
+        style="text-wrap: balance; line-clamp: 3; text-overflow: ellipsis;"
+      >
+        {{ title }}
+      </h1>
+      <p
+        v-if="description"
+        class="m-0 text-[28px] leading-[1.4] text-neutral-600"
+        style="line-clamp: 3; text-overflow: ellipsis;"
+      >
+        {{ description }}
+      </p>
+    </div>
+
+    <div class="relative flex items-center justify-between text-[20px] text-neutral-500">
+      <span>Fabian Meyer · Chapter Lead Vue at eventim Tech</span>
+      <span class="text-blue-600">fmeyer.dev</span>
+    </div>
+  </div>
+</template>

app/composables/usePageSeo.ts

@@ -15,6 +15,13 @@ export function usePageSeo(page: SeoInput) {
     title,
     ogTitle: title,
     description,
-    ogDescription: description
+    ogDescription: description,
+    ogImageAlt: title ? `${title} — fmeyer.dev` : 'fmeyer.dev',
+    twitterImageAlt: title ? `${title} — fmeyer.dev` : 'fmeyer.dev'
+  })
+
+  defineOgImage('Default', {
+    title: title ?? 'fmeyer.dev',
+    description: description ?? ''
   })
 }

app/pages/404.vue

@@ -11,7 +11,7 @@ useSeoMeta({
   robots: 'noindex, nofollow'
 })
 
-defineOgImage('NuxtSeoSatori')
+defineOgImage('Default')
 </script>
 
 <template>

app/pages/410.vue

@@ -11,7 +11,7 @@ useSeoMeta({
   robots: 'noindex, nofollow'
 })
 
-defineOgImage('NuxtSeoSatori')
+defineOgImage('Default')
 </script>
 
 <template>

app/pages/index.vue

@@ -25,8 +25,6 @@ if (!page.value) {
 
 usePageSeo(page.value)
 
-defineOgImage('NuxtSeoSatori')
-
 const runtimeConfig = useRuntimeConfig()
 const identityId = `${runtimeConfig.public.siteUrl.replace(/\/$/, '')}/#identity`