diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 42f76f5a3e27f..a245ea03cdaaf 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,10 +1,18 @@
-import { api, AddAssetsResponseDto, AssetResponseDto } from '@api';
+import { api, AddAssetsResponseDto, AssetResponseDto, ThumbnailFormat } from '@api';
 import {
 	notificationController,
 	NotificationType
 } from '$lib/components/shared-components/notification/notification';
 import { downloadAssets } from '$lib/stores/download';
 
+export const getThumbnailUrl = (assetId: string, format: ThumbnailFormat, key?: string) => {
+	let url = `/api/asset/thumbnail/${assetId}?format=${format}`;
+	if (key) {
+		url += `&key=${key}`;
+	}
+	return url;
+};
+
 export const addAssetsToAlbum = async (
 	albumId: string,
 	assetIds: Array<string>,
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 91740a05d6e68..2965b59cf26b7 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -77,6 +77,25 @@
 	};
 </script>
 
+<svelte:head>
+	<title>{$page.data.meta?.title} - Immich</title>
+	{#if $page.data.meta}
+		<meta name="description" content={$page.data.meta.description} />
+
+		<!-- Facebook Meta Tags -->
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content={$page.data.meta.title} />
+		<meta property="og:description" content={$page.data.meta.description} />
+		<meta property="og:image" content={$page.data.meta.imageUrl} />
+
+		<!-- Twitter Meta Tags -->
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content={$page.data.meta.title} />
+		<meta name="twitter:description" content={$page.data.meta.description} />
+		<meta name="twitter:image" content={$page.data.meta.imageUrl} />
+	{/if}
+</svelte:head>
+
 <main on:dragenter={() => (showUploadCover = true)}>
 	{#if canShow}
 		<div in:fade={{ duration: 100 }}>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index f198716407a29..d9b9854c1f365 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -2,11 +2,6 @@
 	import { goto } from '$app/navigation';
 </script>
 
-<svelte:head>
-	<title>Welcome 🎉 - Immich</title>
-	<meta name="description" content="Immich Web Interface" />
-</svelte:head>
-
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
 		<div class="flex place-items-center place-content-center ">
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index fdd41a2e07468..e46d955b5fd9a 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -7,4 +7,11 @@ export const load: PageLoad = async ({ parent }) => {
 	if (user) {
 		throw redirect(302, '/photos');
 	}
+
+	return {
+		meta: {
+			title: 'Welcome 🎉',
+			description: 'Immich Web Interface'
+		}
+	};
 };
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index 7ac394ca9404d..5a7f8bb97be11 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -26,10 +26,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Administration - Immich</title>
-</svelte:head>
-
 <NavigationBar user={$page.data.user} />
 
 <main>
diff --git a/web/src/routes/admin/jobs-status/+page.server.ts b/web/src/routes/admin/jobs-status/+page.server.ts
index ccfbb564f1ded..5c5aee28cee23 100644
--- a/web/src/routes/admin/jobs-status/+page.server.ts
+++ b/web/src/routes/admin/jobs-status/+page.server.ts
@@ -9,4 +9,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 	} else if (!user.isAdmin) {
 		throw redirect(302, '/photos');
 	}
+
+	return {
+		meta: {
+			title: 'Job Status'
+		}
+	};
 };
diff --git a/web/src/routes/admin/jobs-status/+page.svelte b/web/src/routes/admin/jobs-status/+page.svelte
index ac4ef81646653..a6a75f0734db8 100644
--- a/web/src/routes/admin/jobs-status/+page.svelte
+++ b/web/src/routes/admin/jobs-status/+page.svelte
@@ -2,10 +2,6 @@
 	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
 </script>
 
-<svelte:head>
-	<title>Jobs Status - Immich</title>
-</svelte:head>
-
 <section>
 	<JobsPanel />
 </section>
diff --git a/web/src/routes/admin/server-status/+page.server.ts b/web/src/routes/admin/server-status/+page.server.ts
index 2a573c4731cf4..d5194e0dc611a 100644
--- a/web/src/routes/admin/server-status/+page.server.ts
+++ b/web/src/routes/admin/server-status/+page.server.ts
@@ -13,5 +13,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 
 	const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
 
-	return { allUsers };
+	return {
+		allUsers,
+		meta: {
+			title: 'Server Status'
+		}
+	};
 };
diff --git a/web/src/routes/admin/server-status/+page.svelte b/web/src/routes/admin/server-status/+page.svelte
index 6f7798446d97d..57da5c6372dbd 100644
--- a/web/src/routes/admin/server-status/+page.svelte
+++ b/web/src/routes/admin/server-status/+page.svelte
@@ -3,10 +3,6 @@
 	import { page } from '$app/stores';
 </script>
 
-<svelte:head>
-	<title>Server Status - Immich</title>
-</svelte:head>
-
 {#if $page.data.allUsers}
 	<ServerStatsPanel allUsers={$page.data.allUsers} />
 {/if}
diff --git a/web/src/routes/admin/system-settings/+page.server.ts b/web/src/routes/admin/system-settings/+page.server.ts
index fb2c1cc2132bd..d7e21d9cf552f 100644
--- a/web/src/routes/admin/system-settings/+page.server.ts
+++ b/web/src/routes/admin/system-settings/+page.server.ts
@@ -10,5 +10,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 		throw redirect(302, '/photos');
 	}
 
-	return { user };
+	return {
+		user,
+		meta: {
+			title: 'System Settings'
+		}
+	};
 };
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index 8611912053ef0..023887ae03319 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -17,10 +17,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>System Settings - Immich</title>
-</svelte:head>
-
 <section class="">
 	{#await getConfig()}
 		<LoadingSpinner />
diff --git a/web/src/routes/admin/user-management/+page.server.ts b/web/src/routes/admin/user-management/+page.server.ts
index 01c8609ffcaa8..1e4f34f00220f 100644
--- a/web/src/routes/admin/user-management/+page.server.ts
+++ b/web/src/routes/admin/user-management/+page.server.ts
@@ -13,5 +13,11 @@ export const load: PageServerLoad = async ({ parent }) => {
 
 	const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
 
-	return { user, allUsers };
+	return {
+		user,
+		allUsers,
+		meta: {
+			title: 'User Management'
+		}
+	};
 };
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index 8c3e947b1a59f..a16c228d6f966 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -101,10 +101,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>User Management - Immich</title>
-</svelte:head>
-
 <section>
 	{#if shouldShowCreateUserForm}
 		<FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
diff --git a/web/src/routes/albums/+page.server.ts b/web/src/routes/albums/+page.server.ts
index 5f35e42119bd1..3e44fb0cb71d6 100644
--- a/web/src/routes/albums/+page.server.ts
+++ b/web/src/routes/albums/+page.server.ts
@@ -14,7 +14,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 
 		return {
 			user: user,
-			albums: albums
+			albums: albums,
+			meta: {
+				title: 'Albums'
+			}
 		};
 	} catch (e) {
 		throw redirect(302, '/auth/login');
diff --git a/web/src/routes/albums/+page.svelte b/web/src/routes/albums/+page.svelte
index e59d63e3ab794..cad9f35aa4bbb 100644
--- a/web/src/routes/albums/+page.svelte
+++ b/web/src/routes/albums/+page.svelte
@@ -34,10 +34,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Albums - Immich</title>
-</svelte:head>
-
 <section>
 	<NavigationBar user={data.user} shouldShowUploadButton={false} />
 </section>
diff --git a/web/src/routes/albums/[albumId]/+page.server.ts b/web/src/routes/albums/[albumId]/+page.server.ts
index bf70880977626..2e870d2401ad2 100644
--- a/web/src/routes/albums/[albumId]/+page.server.ts
+++ b/web/src/routes/albums/[albumId]/+page.server.ts
@@ -15,7 +15,10 @@ export const load: PageServerLoad = async ({ parent, params }) => {
 	try {
 		const { data: album } = await serverApi.albumApi.getAlbumInfo(albumId);
 		return {
-			album
+			album,
+			meta: {
+				title: album.albumName
+			}
 		};
 	} catch (e) {
 		throw redirect(302, '/albums');
diff --git a/web/src/routes/albums/[albumId]/+page.svelte b/web/src/routes/albums/[albumId]/+page.svelte
index 4878b7bd5f429..2b28a37e89da0 100644
--- a/web/src/routes/albums/[albumId]/+page.svelte
+++ b/web/src/routes/albums/[albumId]/+page.svelte
@@ -5,10 +5,6 @@
 	export let data: PageData;
 </script>
 
-<svelte:head>
-	<title>{data.album.albumName} - Immich</title>
-</svelte:head>
-
 <div class="immich-scrollbar">
 	<AlbumViewer album={data.album} />
 </div>
diff --git a/web/src/routes/auth/change-password/+page.svelte b/web/src/routes/auth/change-password/+page.svelte
index d5d489f4401d7..5e2ee868ab98f 100644
--- a/web/src/routes/auth/change-password/+page.svelte
+++ b/web/src/routes/auth/change-password/+page.svelte
@@ -14,10 +14,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Change Password - Immich</title>
-</svelte:head>
-
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
 		<ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
diff --git a/web/src/routes/auth/change-password/+page.ts b/web/src/routes/auth/change-password/+page.ts
index 8200151ffb31c..853710cf9cf8d 100644
--- a/web/src/routes/auth/change-password/+page.ts
+++ b/web/src/routes/auth/change-password/+page.ts
@@ -10,7 +10,10 @@ export const load: PageLoad = async () => {
 
 		if (userInfo.shouldChangePassword) {
 			return {
-				user: userInfo
+				user: userInfo,
+				meta: {
+					title: 'Change Password'
+				}
 			};
 		} else {
 			throw redirect(302, '/photos');
diff --git a/web/src/routes/auth/login/+page.server.ts b/web/src/routes/auth/login/+page.server.ts
index 16d6aa4f145d1..80d9ff7a6e4f8 100644
--- a/web/src/routes/auth/login/+page.server.ts
+++ b/web/src/routes/auth/login/+page.server.ts
@@ -9,5 +9,9 @@ export const load: PageServerLoad = async () => {
 		throw redirect(302, '/auth/register');
 	}
 
-	return;
+	return {
+		meta: {
+			title: 'Login'
+		}
+	};
 };
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index aff854ff199a4..3403e63e42c03 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -5,10 +5,6 @@
 	import LoginForm from '$lib/components/forms/login-form.svelte';
 </script>
 
-<svelte:head>
-	<title>Login - Immich</title>
-</svelte:head>
-
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
 		<LoginForm
diff --git a/web/src/routes/auth/register/+page.server.ts b/web/src/routes/auth/register/+page.server.ts
index 6f5ed461ce8fd..7b177d61cee5d 100644
--- a/web/src/routes/auth/register/+page.server.ts
+++ b/web/src/routes/auth/register/+page.server.ts
@@ -9,5 +9,9 @@ export const load: PageServerLoad = async () => {
 		throw redirect(302, '/auth/login');
 	}
 
-	return;
+	return {
+		meta: {
+			title: 'Admin Registration'
+		}
+	};
 };
diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte
index 9301a28bae389..61bb280bb07b2 100644
--- a/web/src/routes/auth/register/+page.svelte
+++ b/web/src/routes/auth/register/+page.svelte
@@ -2,10 +2,6 @@
 	import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
 </script>
 
-<svelte:head>
-	<title>Admin Registration - Immich</title>
-</svelte:head>
-
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<AdminRegistrationForm />
 </section>
diff --git a/web/src/routes/photos/+page.server.ts b/web/src/routes/photos/+page.server.ts
index afee519995f23..726bcc8ef7d97 100644
--- a/web/src/routes/photos/+page.server.ts
+++ b/web/src/routes/photos/+page.server.ts
@@ -9,7 +9,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 		}
 
 		return {
-			user
+			user,
+			meta: {
+				title: 'Photos'
+			}
 		};
 	} catch (e) {
 		console.log('Photo page load error', e);
diff --git a/web/src/routes/photos/+page.svelte b/web/src/routes/photos/+page.svelte
index 5586be04bd7a5..dccba87cf189a 100644
--- a/web/src/routes/photos/+page.svelte
+++ b/web/src/routes/photos/+page.svelte
@@ -116,10 +116,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Photos - Immich</title>
-</svelte:head>
-
 <section>
 	{#if $isMultiSelectStoreState}
 		<ControlAppBar
diff --git a/web/src/routes/share/[key]/+page.server.ts b/web/src/routes/share/[key]/+page.server.ts
index 45a8fe6b06725..5c4f12ba7066e 100644
--- a/web/src/routes/share/[key]/+page.server.ts
+++ b/web/src/routes/share/[key]/+page.server.ts
@@ -1,7 +1,8 @@
 export const prerender = false;
 import { error } from '@sveltejs/kit';
 
-import { serverApi } from '@api';
+import { getThumbnailUrl } from '$lib/utils/asset-utils';
+import { serverApi, ThumbnailFormat } from '@api';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ params }) => {
@@ -9,7 +10,20 @@ export const load: PageServerLoad = async ({ params }) => {
 
 	try {
 		const { data: sharedLink } = await serverApi.shareApi.getMySharedLink({ params: { key } });
-		return { sharedLink };
+
+		const assetCount = sharedLink.assets.length;
+		const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+
+		return {
+			sharedLink,
+			meta: {
+				title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+				description: sharedLink.description || `${assetCount} shared photos & videos.`,
+				imageUrl: assetId
+					? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
+					: 'feature-panel.png'
+			}
+		};
 	} catch (e) {
 		throw error(404, {
 			message: 'Invalid shared link'
diff --git a/web/src/routes/share/[key]/+page.svelte b/web/src/routes/share/[key]/+page.svelte
index 50e1030b7809b..d436e61b90ada 100644
--- a/web/src/routes/share/[key]/+page.svelte
+++ b/web/src/routes/share/[key]/+page.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
 	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-	import { AlbumResponseDto } from '../../../api';
+	import { AlbumResponseDto } from '@api';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
+	const { sharedLink } = data;
+
 	let album: AlbumResponseDto | null = null;
-	if (data.sharedLink.album) {
-		album = { ...data.sharedLink.album, assets: data.sharedLink.assets };
+	if (sharedLink.album) {
+		album = { ...sharedLink.album, assets: sharedLink.assets };
 	}
 </script>
 
-<svelte:head>
-	<title>{data.sharedLink.album?.albumName || 'Public Shared'} - Immich</title>
-</svelte:head>
-
 {#if album}
 	<div class="immich-scrollbar">
-		<AlbumViewer {album} sharedLink={data.sharedLink} />
+		<AlbumViewer {album} {sharedLink} />
 	</div>
 {/if}
diff --git a/web/src/routes/sharing/+page.server.ts b/web/src/routes/sharing/+page.server.ts
index 103a9f7ea3e4e..c4a2a5b7f2610 100644
--- a/web/src/routes/sharing/+page.server.ts
+++ b/web/src/routes/sharing/+page.server.ts
@@ -15,7 +15,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 
 		return {
 			user: user,
-			sharedAlbums: sharedAlbums
+			sharedAlbums,
+			meta: {
+				title: 'Albums'
+			}
 		};
 	} catch (e) {
 		throw redirect(302, '/auth/login');
diff --git a/web/src/routes/sharing/+page.svelte b/web/src/routes/sharing/+page.svelte
index 70a6fb8280826..b60d26d07dfb8 100644
--- a/web/src/routes/sharing/+page.svelte
+++ b/web/src/routes/sharing/+page.svelte
@@ -33,10 +33,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Albums - Immich</title>
-</svelte:head>
-
 <section>
 	<NavigationBar user={data.user} shouldShowUploadButton={false} />
 </section>
diff --git a/web/src/routes/sharing/sharedlinks/+page.server.ts b/web/src/routes/sharing/sharedlinks/+page.server.ts
index 52746063c5ebe..7eec887b5238a 100644
--- a/web/src/routes/sharing/sharedlinks/+page.server.ts
+++ b/web/src/routes/sharing/sharedlinks/+page.server.ts
@@ -10,7 +10,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 		}
 
 		return {
-			user
+			user,
+			meta: {
+				title: 'Shared Links'
+			}
 		};
 	} catch (e) {
 		throw redirect(302, '/auth/login');
diff --git a/web/src/routes/sharing/sharedlinks/+page.svelte b/web/src/routes/sharing/sharedlinks/+page.svelte
index 9ae23ace60cd3..b251deee7f8c1 100644
--- a/web/src/routes/sharing/sharedlinks/+page.svelte
+++ b/web/src/routes/sharing/sharedlinks/+page.svelte
@@ -67,10 +67,6 @@
 	};
 </script>
 
-<svelte:head>
-	<title>Shared links - Immich</title>
-</svelte:head>
-
 <ControlAppBar backIcon={ArrowLeft} on:close-button-click={() => goto('/sharing')}>
 	<svelte:fragment slot="leading">Shared links</svelte:fragment>
 </ControlAppBar>
diff --git a/web/src/routes/user-settings/+page.server.ts b/web/src/routes/user-settings/+page.server.ts
index 8fe716398f5f7..0ddbe346d972f 100644
--- a/web/src/routes/user-settings/+page.server.ts
+++ b/web/src/routes/user-settings/+page.server.ts
@@ -10,7 +10,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 		}
 
 		return {
-			user: user
+			user,
+			meta: {
+				title: 'Settings'
+			}
 		};
 	} catch (e) {
 		throw redirect(302, '/auth/login');
diff --git a/web/src/routes/user-settings/+page.svelte b/web/src/routes/user-settings/+page.svelte
index 749dd9e96c6da..2b6278f1880fe 100644
--- a/web/src/routes/user-settings/+page.svelte
+++ b/web/src/routes/user-settings/+page.svelte
@@ -7,10 +7,6 @@
 	export let data: PageData;
 </script>
 
-<svelte:head>
-	<title>Settings - Immich</title>
-</svelte:head>
-
 <section>
 	<NavigationBar user={data.user} shouldShowUploadButton={false} />
 </section>
diff --git a/web/static/feature-panel.png b/web/static/feature-panel.png
new file mode 100644
index 0000000000000..cab58441c54e8
Binary files /dev/null and b/web/static/feature-panel.png differ