diff --git a/src/lib/components/seo/MetaTags.svelte b/src/lib/components/seo/MetaTags.svelte
new file mode 100644
index 0000000..0a34813
--- /dev/null
+++ b/src/lib/components/seo/MetaTags.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { SiteMetadata } from '$lib/helper/siteMeta';
+
+	interface Props {
+		meta: SiteMetadata;
+		siteMeta: SiteMetadata;
+	}
+
+	let { meta, siteMeta }: Props = $props();
+
+	// Merge with defaults
+	const finalMeta = $derived({
+		title: meta.title || siteMeta.title,
+		description: meta.description || siteMeta.description,
+		keywords: meta.keywords || siteMeta.keywords,
+		url: meta.url || siteMeta.url,
+		image: meta.image || siteMeta.image,
+		imageWidth: meta.imageWidth || siteMeta.imageWidth,
+		imageHeight: meta.imageHeight || siteMeta.imageHeight
+	});
+</script>
+
+<svelte:head>
+	<title>{finalMeta.title}</title>
+	<meta name="description" content={finalMeta.description} />
+	<meta name="keywords" content={finalMeta.keywords} />
+
+	<!-- Open Graph / Facebook -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={finalMeta.url} />
+	<meta property="og:title" content={finalMeta.title} />
+	<meta property="og:description" content={finalMeta.description} />
+	<meta property="og:site_name" content={siteMeta.title} />
+	<meta property="og:image" content={finalMeta.image} />
+	{#if finalMeta.imageWidth}
+		<meta property="og:image:width" content={finalMeta.imageWidth.toString()} />
+	{/if}
+	{#if finalMeta.imageHeight}
+		<meta property="og:image:height" content={finalMeta.imageHeight.toString()} />
+	{/if}
+
+	<!-- Twitter -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:url" content={finalMeta.url} />
+	<meta name="twitter:title" content={finalMeta.title} />
+	<meta name="twitter:description" content={finalMeta.description} />
+	<meta name="twitter:image" content={finalMeta.image} />
+</svelte:head>
diff --git a/src/lib/components/seo/index.ts b/src/lib/components/seo/index.ts
new file mode 100644
index 0000000..9ecaaad
--- /dev/null
+++ b/src/lib/components/seo/index.ts
@@ -0,0 +1 @@
+export { default as MetaTags } from './MetaTags.svelte';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bea2ce4..2da8117 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import '../app.css';
 	import { Header, Footer, ScrollToTop } from '$lib/components/layout';
+	import { MetaTags } from '$lib/components/seo';
 	import { createSiteMeta, type SiteMetadata } from '$lib/helper/siteMeta';
-	import { generateMetaTags } from '$lib/helper/metaTags';
-	import { afterNavigate } from '$app/navigation';
 	import type { Snippet } from 'svelte';
 
 	interface Props {
@@ -22,17 +21,6 @@
 		...data.siteMeta,
 		...data.meta
 	}));
-	
-	// Generate meta tags for SEO / OG / Twitter
-	let metaTags = $derived(generateMetaTags(headMeta, data.siteMeta));
-
-	// Update document title and meta tags after navigation
-	afterNavigate(() => {
-		// Force update of document title
-		if (typeof document !== 'undefined') {
-			document.title = headMeta.title;
-		}
-	});
 </script>
 
 <svelte:head>
@@ -58,17 +46,11 @@
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
 	<link rel="icon" href="/favicon/favicon.ico" sizes="any" />
 	<link rel="manifest" href="/favicon/site.webmanifest" />
-	<title>{headMeta.title}</title>
-
-	{#each metaTags as tag}
-		{#if tag.name}
-			<meta name={tag.name} content={tag.content} />
-		{:else if tag.property}
-			<meta property={tag.property} content={tag.content} />
-		{/if}
-	{/each}
 </svelte:head>
 
+<!-- Bespoke MetaTags component -->
+<MetaTags meta={headMeta} siteMeta={data.siteMeta} />
+
 <div class="flex min-h-screen flex-col bg-canvas-50 text-ink-900 dark:bg-canvas-950 dark:text-ink-50">
 	<Header />