diff --git a/src/lib/image.svelte b/src/lib/image.svelte
index f3410db..8d33c03 100644
--- a/src/lib/image.svelte
+++ b/src/lib/image.svelte
@@ -4,6 +4,10 @@
     src: string;
   }[];
 
+  export const getPNGSrc = (img: ImageMetadata) => {
+    return img.find(({ format }) => format === "png")?.src;
+  };
+
   const mimeType: Record<string, string> = {
     webp: "image/webp",
     png: "image/png",
@@ -23,7 +27,7 @@
     format: mimeType[format],
     srcset: src,
   }));
-  const pngSrc = sources.find(({ format }) => format === "image/png")?.srcset;
+  const pngSrc = getPNGSrc(img);
 </script>
 
 <picture class={className}>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5bb7bb4..cbae9e7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,15 +1,32 @@
 <script>
   import "../app.css";
-  import Image from "$lib/image.svelte";
+  import Image, { getPNGSrc } from "$lib/image.svelte";
   import Divider from "$lib/divider.svelte";
 
   import LogoImg from "$lib/images/logo.png?w=512";
 </script>
 
 <svelte:head>
-  <title>Ein Pfeil am rechten Fleck</title>
-  <meta name="description" content="TODO" />
   <link as="font" rel="preload" href="/vinque.ttf" />
+  <title>Ein Pfeil am rechten Fleck</title>
+  <meta
+    name="description"
+    content="In diesem Hörspiel erwartet dich eine Reise in eine mittelalterliche Welt, gespickt mit einem Hauch Magie. Verfolge die Abenteuer des Unteroffiziers Beyron und des neugierigen Mädchens Blue, deren Schicksale auf unerwartete Weise miteinander verknüpft sind. Lass dich mitreißen von einer fesselnden Erzählung voller Intrigen und überraschenden Wendungen."
+  />
+  <meta name="og:locale" content="de_DE" />
+  <meta name="og:type" content="website" />
+  <meta name="og:title" content="Hörbuch: Ein Pfeil am rechten Fleck" />
+  <meta
+    name="og:description"
+    content="In diesem Hörspiel erwartet dich eine Reise in eine mittelalterliche Welt, gespickt mit einem Hauch Magie."
+  />
+  <meta name="og:image" content={getPNGSrc(LogoImg)} />
+  <meta name="og:image:width" content="512" />
+  <meta name="og:image:height" content="512" />
+  <meta
+    name="og:image:alt"
+    content="Logo, Illustration von einem Pfeil über einem Herz"
+  />
 </svelte:head>
 
 <header class="flex justify-center">