Improve SEO

src/lib/data/language.ts

@@ -10,6 +10,7 @@ const translations: Record<TranslationKey, Record<string, string>> = {
     'albums': 'Alben',
     'photo': 'Foto',
     'photos': 'Fotos',
+    'photo-description': 'Foto von Luca Bosin',
     'video': 'Video',
     'videos': 'Videos',
     'back': 'Zurück',
@@ -31,6 +32,7 @@ const translations: Record<TranslationKey, Record<string, string>> = {
     'albums': 'Albums',
     'photo': 'Photo',
     'photos': 'Photos',
+    'photo-description': 'Photo by Luca Bosin',
     'video': 'Video',
     'videos': 'Videos',
     'back': 'Back',

src/routes/+layout.svelte

@@ -2,13 +2,43 @@
   import { page } from '$app/stores';
   import '@fontsource/poppins';
   import '$lib/styles/base.css';
+	import { str, strf } from '$lib/data/language';
 
-  $: console.log($page.data);
+  $: metaTitle =  ($page.data.title ?
+                    $strf($page.data.title):
+                    null
+                  ) || 
+                  ($page.data.album && $page.data.album.title ?
+                    $strf($page.data.album.title):
+                    null
+                  ) || 
+                  ($page.data.item ? 
+                    $page.data.item.title ? 
+                      $strf($page.data.item.title):
+                      $page.data.item.item:
+                    null
+                  ) || 
+                  $str('gallery');
+  $: metaDescription = ($page.data.description ?
+                        $strf($page.data.description):
+                        null
+                      ) || 
+                      ($page.data.album && $page.data.album.description ?
+                        $strf($page.data.album.description):
+                        null
+                      ) || 
+                      ($page.data.item ? 
+                        $page.data.item.description ? 
+                          $strf($page.data.item.description):
+                          $str('photo-description'):
+                        null
+                      ) || 
+                      $str('gallery-description');
 </script>
 
 <svelte:head>
-  <title>{$page.data.title || 'Galerie'} | bosin.ch</title>
+  <title>{metaTitle} | bosin.ch</title>
-  <meta name="description" content={$page.data.description || 'Fotogalerie von Luca Bosin'} />
+  <meta name="description" content={metaDescription} />
 </svelte:head>
 
 <slot />