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>
 

components/Footer/Footer.vue

@@ -3,22 +3,41 @@
 <template>
   <footer class="Footer flex-col default-gap">
       <ul class="sitemap default-gap">
-        <li><a :href="`${mainPage ? '/' : ''}#intro`">Über mich</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#skills`">Meine Expertise</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#customers`">Kunden & Projekte</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#services`">Services</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#network`">Mein Netzwerk</a></li>
-        <li><a href="/imp">Impressum</a></li>
+        <li v-for="{ label, ...rest} in nav" :key="label">
+          <NuxtLink v-bind="rest">{{label}}</NuxtLink>
+        </li>
       </ul>
     <p>Natürlich ohne Cookies und Tracker.</p>
     <p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p>
   </footer>
 </template>
 
-<script setup lang="ts">
-type Props = {
-  mainPage ?: boolean
-}
-
-defineProps<Props>()
+<script lang="ts" setup>
+const nav = [
+  {
+    to: `/#intro`,
+    label: 'Über mich',
+    'aria-label': 'Link dieser Seite: Über mich'
+  }, {
+    to: `/#skills`,
+    label: 'Meine Expertise',
+    'aria-label': 'Link dieser Seite: Meine Expertis'
+  }, {
+    to: `/#customers`,
+    label: 'Kunden',
+    'aria-label': 'Link dieser Seite: Kunden'
+  }, {
+    to: `/#services`,
+    label: 'Services',
+    'aria-label': 'Link dieser Seite: Services'
+  }, {
+    to: `/#network`,
+    label: 'Mein Netzwerk',
+    'aria-label': 'Link dieser Seite: Mein Netzwerk'
+  }, {
+    to: '/imp',
+    label: 'Impressum',
+    'aria-label': 'Link dieser Seite: Impressum'
+  }
+]
 </script>

components/Header/Header.vue

@@ -30,7 +30,7 @@
       <nav>
         <ul class="main-nav">
           <li v-for="({label, ...rest}) in nav" :key="label" @click="isBurgerOpen = false">
-            <a v-bind="rest">{{ label }}</a>
+            <NuxtLink v-bind="rest">{{ label }}</NuxtLink>
           </li>
         </ul>
         <ul class="socials">
@@ -49,12 +49,6 @@
 import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
 import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
 
-type Props = {
-  mainPage ?: boolean
-}
-
-const { mainPage } = defineProps<Props>()
-
 let observer: IntersectionObserver
 const header = ref<HTMLElement | null>(null)
 const headerWrapper = ref<HTMLElement | null>(null)
@@ -67,15 +61,15 @@ const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burge
 
 const nav = [
   {
-    href: `${mainPage ? '/' : ''}#intro`,
+    to: `/#intro`,
     label: 'Über mich',
-    'aria-label': 'Link dieser Seite: About'
+    'aria-label': 'Link dieser Seite: Über mich'
   }, {
-    href: `${mainPage ? '/' : ''}#customers`,
+    to: `/#customers`,
     label: 'Kunden',
     'aria-label': 'Link dieser Seite: Kunden'
   }, {
-    href: `${mainPage ? '/' : ''}#services`,
+    to: `/#services`,
     label: 'Services',
     'aria-label': 'Link dieser Seite: Services'
   }

components/Person/Person.css

@@ -7,7 +7,7 @@
     gap: 1rem;
 
     & img {
-        border: 4px solid var(--color-orange);
+        outline: 4px solid var(--color-orange);
         border-radius: 50%;
         width: 150px;
         height: 150px;

components/Services/Services.css

@@ -43,6 +43,7 @@
     .network-list {
         width: 100%;
         overflow-x: auto;
+        padding-top: 4px;
 
         & .scroll-container {
             display: flex;

layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <Header />
+  <slot />
+  <Footer />
+</template>

nuxt.config.ts

@@ -11,5 +11,16 @@ export default defineNuxtConfig({
     '/': { prerender: true },
     '/imp': { prerender: true },
   },
-  devtools: { enabled: false }
+  app: {
+    head: {
+      htmlAttrs: { lang: 'de' },
+      link: [
+        { rel: 'preload', as: 'image', href: '/img/profile_big.webp', type: 'image/webp' },
+        { rel: 'preload', as: 'image', 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' },
+      ]
+    }
+  }
 })

pages/[...route].vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <Header />
     <Intro />
     <Skills />
     <Customers />
     <Services />
-    <Footer />
   </div>
 </template>
-
-<script setup></script>

pages/imp.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <Header :main-page="true" />
     <section class="Imp flex-col default-gap content full">
       <div>
         <h3>Angaben gem&auml;&szlig; &sect; 5 TMG</h3>
@@ -57,6 +56,5 @@
 
       <p>Quelle: <a href="https://www.e-recht24.de">e-recht24.de</a></p>
     </section>
-    <Footer :main-page="true" />
   </div>
 </template>