SEO/ better URL Previews

src/routes/(rezepte)/rezepte/+page.svelte

@@ -6,7 +6,7 @@
     	import Search from '$lib/components/Search.svelte';
     	export let data: PageData;
     	export let current_month = new Date().getMonth() + 1
-	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli"]
+	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Unterwegs"]
 </script>
 <style>
 h1{
@@ -17,6 +17,15 @@ h1{
 	font-size: 4rem;
 }
 </style>
+<svelte:head>
+	<title>Bocken Rezepte</title>
+	<meta name="description" content="Eine stetig wachsende Ansammlung an Rezepten aus der Bockenschen Küche." />
+	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/al_ragu.webp" />
+	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/al_ragu.webp" />
+	<meta property="og:image:type" content="image/webp" />
+	<meta property="og:image:alt" content="Pasta al Ragu mit Linguine" />
+</svelte:head>
+
 <h1>Rezepte</h1>
 <section>
 <MediaScroller title="In Saison">

src/routes/(rezepte)/rezepte/[name]/+page.svelte

@@ -205,6 +205,15 @@ h4{
 	margin-top: -0.5em;
 }
 </style>
+<svelte:head>
+	<title>Bocken - {@html data.name}</title>
+	<meta name="description" content="{data.description}" />
+	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/{data.short_name}.webp" />
+	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/{data.short_name}.webp" />
+	<meta property="og:image:type" content="image/webp" />
+	<meta property="og:image:alt" content="{@html data.name}" />
+</svelte:head>
+
 <TitleImgParallax src={hero_img_src} {placeholder_src}>
 	<div class=title>
 		<a class="icon" href='/rezepte/icon/{data.icon}'>{data.icon}</a>

src/routes/(rezepte)/rezepte/add/+page.svelte

@@ -251,6 +251,11 @@ button.action_button{
 	margin: 0;
 }
 </style>
+<svelte:head>
+	<title>Rezept erstellen</title>
+	<meta name="description" content="Hier können neue Rezepte hinzugefügt werden" />
+</svelte:head>
+
 <h1>Rezept erstellen</h1>
 
 <CardAdd {card_data}></CardAdd>