add: SEO for articles

SEO and SchemaORg for articles

app/components/Blog/Author.vue

@@ -1,7 +1,15 @@
 <template>
   <aside class="BlogAuthor">
     <div class="image">
-      <img :src="image" :alt="`Bild von ${name}`"/>
+      <img
+        loading="lazy"
+        width="50"
+        height="50"
+        :srcset="imageSet.join(', ')"
+        :src="initialImage"
+        aria-hidden="true"
+        :alt="`Profilbild von ${name}`"
+      />
     </div>
     <div class="meta">
       <span class="name">{{ name }}</span>
@@ -11,13 +19,14 @@
 </template>
 
 <script setup lang="ts">
+import { getImageSet, getInitialImage } from '../../utils/image'
+
 type Props = {
   name: string
-  image: string
   date: string
 }
 
-const { date } = defineProps<Props>()
+const { name, date } = defineProps<Props>()
 
 const formatter = new Intl.DateTimeFormat('de-DE', {
   year: 'numeric',
@@ -26,4 +35,7 @@ const formatter = new Intl.DateTimeFormat('de-DE', {
 })
 
 const dateFormatted = computed(() => formatter.format(new Date(date)))
+
+const imageSet = getImageSet('/img/blog/authors/', name)
+const initialImage = getInitialImage('/img/blog/authors/', name)
 </script>