FIX: seo

app.vue

@@ -1,63 +1,28 @@
 <template>
   <section>
-    <NuxtPage />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </section>
 </template>
 
 <script setup>
-const tags = [
-  'webfussel',
-  'web',
-  'fussel',
-  'webentwicklung',
-  'webentwickler',
-  'vue',
-  'nuxt',
-  'javascript',
-  'typescript',
-  'scss',
-  'css',
-  'html',
-  'karlsruhe',
-  'freelance',
-  'freelancer',
-  'freiberuflich',
-  'remote',
-  'home office',
-  'api',
-  'components'
-]
-
-useHead({
+useSeoMeta({
   title: 'webfussel | mehr Fussel im Web',
-  htmlAttrs: {
-    lang: 'de'
-  },
-  meta: [
-    {
-      name: 'description',
-      content: 'webfussel ist eine Webentwicklerin aus Baden-Württemberg. Sie entwickelt Komponenten, Applikationen und APIs.'
-    },
-    {
-      name: 'keywords',
-      content: tags.join(',')
-    },
-    {
-      name: 'author',
-      content: 'webfussel'
-    },
-    {
-      name: 'robots',
-      content: 'index, follow'
-    },
-  ],
-  link: [
-    { rel: 'preload', href: '/img/profile_big.webp', type: 'image/webp' },
-    { rel: 'preload', href: '/img/profile_small.webp', type: 'image/webp' },
-    { rel: 'preload', as: 'font', href: '/opensans.woff2', type: 'font/woff2' },
-    { rel: 'preload', as: 'font', href: '/roboto_con_bold.woff2', type: 'font/woff2' },
-    { rel: 'preload', as: 'font', href: '/roboto_con_reg.woff2', type: 'font/woff2' },
-  ]
+  description: 'Du brauchst was fürs Web? Komponenten, APIs oder Fullstack? Kein Ding.',
+  author: 'webfussel',
+  robots: 'index, follow',
+  themeColor: '#2a2723',
+  ogTitle: 'webfussel | mehr Fussel im Web',
+  ogDescription: 'Du brauchst was fürs Web? Komponenten, APIs oder Fullstack? Kein Ding.',
+  ogImage: '/img/og.webp',
+  ogImageAlt: 'Das webfussel Logo auf einem dunklen Hintergrund',
+  ogUrl: 'https://webfussel.de',
+  twitterTitle: 'webfussel | mehr Fussel im Web',
+  twitterDescription: 'Du brauchst was fürs Web? Komponenten, APIs oder Fullstack? Kein Ding.',
+  twitterImage: '/img/og.webp',
+  twitterImageAlt: 'Das webfussel Logo auf einem dunklen Hintergrund',
+  twitterUrl: 'https://webfussel.de',
 })
 </script>