diff --git a/website/src/hooks.server.js b/website/src/hooks.server.js
new file mode 100644
index 00000000..049a2ea8
--- /dev/null
+++ b/website/src/hooks.server.js
@@ -0,0 +1,43 @@
+import { base } from '$app/paths';
+import { languages } from '$lib/languages';
+import { getURLForLanguage } from '$lib/utils';
+
+export async function handle({ event, resolve }) {
+    let language = event.params.language ?? 'en';
+    const strings = await import(`./locales/${language}.json`);
+
+    let path = event.url.pathname;
+    let page = event.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home';
+
+    let title = strings.metadata[`${page}_title`];
+    let description = strings.metadata[`description`];
+
+    let head = `<head>
+    <title>gpx.studio — ${title}</title>
+    <meta name="description" content="${description}" />
+    <meta property="og:title" content="gpx.studio — ${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta name="twitter:title" content="gpx.studio — ${title}" />
+    <meta name="twitter:description" content="${description}" />
+    <meta property="og:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta property="og:url" content="https://gpx.studio/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="gpx.studio" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta name="twitter:url" content="https://gpx.studio/" />
+    <meta name="twitter:site" content="@gpxstudio" />
+    <meta name="twitter:creator" content="@gpxstudio" />
+    <link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />`;
+
+    for (let lang of Object.keys(languages)) {
+        head += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
+`;
+    }
+
+    const response = await resolve(event, {
+        transformPageChunk: ({ html }) => html.replace('<head>', head)
+    });
+
+    return response;
+}
\ No newline at end of file
diff --git a/website/src/lib/components/Head.svelte b/website/src/lib/components/Head.svelte
deleted file mode 100644
index dacc734f..00000000
--- a/website/src/lib/components/Head.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-	import { base } from '$app/paths';
-	import { page } from '$app/stores';
-	import { languages } from '$lib/languages';
-	import { _, isLoading } from 'svelte-i18n';
-
-	let location: string = '';
-	let title: string;
-
-	$: if ($page.route.id) {
-		location = $page.route.id;
-		Object.keys($page.params).forEach((param) => {
-			if (param !== 'language') {
-				location = location.replace(`[${param}]`, $page.params[param]);
-				location = location.replace(`[...${param}]`, $page.params[param]);
-			}
-		});
-		title = location.replace('/[[language]]', '').split('/')[1] ?? 'home';
-	}
-</script>
-
-<svelte:head>
-	{#if $isLoading}
-		<title>gpx.studio — the online GPX file editor</title>
-		<meta
-			name="description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta property="og:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			property="og:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta name="twitter:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			name="twitter:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-	{:else}
-		<title>gpx.studio — {$_(`metadata.${title}_title`)}</title>
-		<meta name="description" content={$_('metadata.description')} />
-		<meta property="og:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta property="og:description" content={$_('metadata.description')} />
-		<meta name="twitter:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta name="twitter:description" content={$_('metadata.description')} />
-	{/if}
-
-	<meta property="og:image" content="https://gpx.studio/og_logo.png" />
-	<meta property="og:url" content="https://gpx.studio/" />
-	<meta property="og:type" content="website" />
-	<meta property="og:site_name" content="gpx.studio" />
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="twitter:image" content="https://gpx.studio/og_logo.png" />
-	<meta name="twitter:url" content="https://gpx.studio/" />
-	<meta name="twitter:site" content="@gpxstudio" />
-	<meta name="twitter:creator" content="@gpxstudio" />
-
-	<link
-		rel="alternate"
-		hreflang="x-default"
-		href="https://gpx.studio{base}{location.replace('/[[language]]', '')}"
-	/>
-	{#each Object.keys(languages) as lang}
-		<link
-			rel="alternate"
-			hreflang={lang}
-			href="https://gpx.studio{base}{location.replace('[[language]]', lang)}"
-		/>
-	{/each}
-</svelte:head>
diff --git a/website/src/lib/components/LanguageSelect.svelte b/website/src/lib/components/LanguageSelect.svelte
index e4311375..891704b7 100644
--- a/website/src/lib/components/LanguageSelect.svelte
+++ b/website/src/lib/components/LanguageSelect.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import * as Select from '$lib/components/ui/select';
 	import { languages } from '$lib/languages';
 	import { getURLForLanguage } from '$lib/utils';
@@ -34,9 +35,11 @@
 
 <!-- hidden links for svelte crawling -->
 <div class="hidden">
-	{#each Object.entries(languages) as [lang, label]}
-		<a href={getURLForLanguage(lang)}>
-			{label}
-		</a>
-	{/each}
+	{#if $page.url.pathname !== '/404'}
+		{#each Object.entries(languages) as [lang, label]}
+			<a href={getURLForLanguage(lang, $page.url.pathname)}>
+				{label}
+			</a>
+		{/each}
+	{/if}
 </div>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 15c79d6e..fd405223 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -1,29 +1,48 @@
 <script lang="ts">
 	import '../app.pcss';
 	import { ModeWatcher } from 'mode-watcher';
-	import { isLoading, _ } from 'svelte-i18n';
+	import { isLoading, _, locale } from 'svelte-i18n';
 	import { page } from '$app/stores';
-	import Head from '$lib/components/Head.svelte';
 	import Nav from '$lib/components/Nav.svelte';
 	import Footer from '$lib/components/Footer.svelte';
 	import { onMount } from 'svelte';
 	import { convertOldEmbeddingOptions } from '$lib/components/embedding/Embedding';
 	import { base } from '$app/paths';
+	import { languages } from '$lib/languages';
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
 
 	const appRoutes = ['/[[language]]/app', '/[[language]]/embed'];
 
 	onMount(() => {
 		if ($page.url.searchParams.has('embed')) {
 			// convert old embedding options to new format and redirect to new embed page
-			let locale = $page.params.language;
+			let locale = $page.url.pathname.split('/')[1] ?? 'en';
 			window.location.href = `${base}${locale ? '/' + locale : ''}/embed?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions($page.url.searchParams)))}`;
 		}
 	});
 
+	$: if ($page.params.language) {
+		if ($page.params.language === '' && $locale !== 'en') {
+			locale.set('en');
+		} else if ($page.params.language) {
+			let lang = $page.params.language.replace('/', '');
+			if ($locale !== lang) {
+				if (languages.hasOwnProperty(lang)) {
+					locale.set(lang);
+				} else if (browser) {
+					goto(`${base}/404`);
+				}
+			}
+		}
+	}
+
+	$: if (browser && !$isLoading && $_) {
+		document.title = `gpx.studio — ${$_(`metadata.${$page.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home'}_title`)}`;
+	}
 	$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
 </script>
 
-<Head />
 <ModeWatcher />
 
 <div class="flex flex-col min-h-screen">
diff --git a/website/src/routes/[[language]]/+layout.svelte b/website/src/routes/[[language]]/+layout.svelte
deleted file mode 100644
index b509b73e..00000000
--- a/website/src/routes/[[language]]/+layout.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { locale, _ } from 'svelte-i18n';
-	import { page } from '$app/stores';
-	import { languages } from '$lib/languages';
-	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
-
-	$: if ($page.params.language === '' && $locale !== 'en') {
-		locale.set('en');
-	} else if ($page.params.language) {
-		let lang = $page.params.language.replace('/', '');
-		if ($locale !== lang) {
-			if (languages.hasOwnProperty(lang)) {
-				locale.set(lang);
-			} else if (browser) {
-				goto(`${base}/404`);
-			}
-		}
-	}
-</script>
-
-<slot />
diff --git a/website/src/routes/l/[[language]]/+page.svelte b/website/src/routes/l/[[language]]/+page.svelte
deleted file mode 100644
index 2b488537..00000000
--- a/website/src/routes/l/[[language]]/+page.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { languages } from '$lib/languages';
-</script>
-
-<!-- hidden links for svelte crawling -->
-<div>
-	{#each Object.entries(languages) as [lang, label]}
-		{#if lang !== 'en'}
-			<a href="./{lang}">
-				{label}
-			</a>
-		{/if}
-	{/each}
-</div>
diff --git a/website/svelte.config.js b/website/svelte.config.js
index 7de1de53..b7793641 100644
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@@ -23,7 +23,7 @@ const config = {
             relative: false,
         },
         prerender: {
-            entries: ['/', '/404', '/l/fr/'],
+            entries: ['/', '/404'],
             crawl: true,
         }
     }
