diff --git a/src/lib/components/site/metadata.svelte b/src/lib/components/site/metadata.svelte
index 6d2786e..9bcaae7 100644
--- a/src/lib/components/site/metadata.svelte
+++ b/src/lib/components/site/metadata.svelte
@@ -4,7 +4,8 @@
 
 	export let title: string = siteConfig.name;
 
-	$: title = $page.data?.title ? `${$page.data.title} — ${siteConfig.name}` : siteConfig.name;
+	$: title = $page.data?.name ? `${$page.data.name} — ${siteConfig.name}` : siteConfig.name;
+	$: ogImage = `${siteConfig.ogImage}?title=${$page.data.title}&subTitle=${$page.data.subTitle}`;
 </script>
 
 <svelte:head>
@@ -16,13 +17,13 @@
 	<meta name="twitter:site" content={siteConfig.url} />
 	<meta name="twitter:title" content={title} />
 	<meta name="twitter:description" content={siteConfig.description} />
-	<meta name="twitter:image" content={siteConfig.ogImage} />
+	<meta name="twitter:image" content={ogImage} />
 	<meta name="twitter:image:alt" content={siteConfig.name} />
 	<meta name="twitter:creator" content="Bart van der Braak" />
 	<meta property="og:title" content={title} />
 	<meta property="og:type" content="article" />
 	<meta property="og:url" content={siteConfig.url + $page.url.pathname} />
-	<meta property="og:image" content={siteConfig.ogImage} />
+	<meta property="og:image" content={ogImage} />
 	<meta property="og:image:alt" content={siteConfig.name} />
 	<meta property="og:image:width" content="1200" />
 	<meta property="og:image:height" content="630" />
diff --git a/src/lib/components/site/opengraph-image.svelte b/src/lib/components/site/opengraph-image.svelte
index d0e2c81..900527e 100644
--- a/src/lib/components/site/opengraph-image.svelte
+++ b/src/lib/components/site/opengraph-image.svelte
@@ -27,6 +27,6 @@
 
 <style>
 	h2 {
-		font-family: 'Geist Bold', 'geist-sans';
+		font-family: 'Geist Bold', 'Geist Sans';
 	}
 </style>