diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 42f76f5a3e..a245ea03cd 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 91740a05d6..2965b59cf2 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 f198716407..d9b9854c1f 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 fdd41a2e07..e46d955b5f 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 7ac394ca94..5a7f8bb97b 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 ccfbb564f1..5c5aee28ce 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 ac4ef81646..a6a75f0734 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 2a573c4731..d5194e0dc6 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 6f7798446d..57da5c6372 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 fb2c1cc213..d7e21d9cf5 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 8611912053..023887ae03 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 01c8609ffc..1e4f34f002 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 8c3e947b1a..a16c228d6f 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 5f35e42119..3e44fb0cb7 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 e59d63e3ab..cad9f35aa4 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 bf70880977..2e870d2401 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 4878b7bd5f..2b28a37e89 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 d5d489f440..5e2ee868ab 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 8200151ffb..853710cf9c 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 16d6aa4f14..80d9ff7a6e 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 aff854ff19..3403e63e42 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 6f5ed461ce..7b177d61ce 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 9301a28bae..61bb280bb0 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 afee519995..726bcc8ef7 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 5586be04bd..dccba87cf1 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 45a8fe6b06..5c4f12ba70 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 50e1030b78..d436e61b90 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 103a9f7ea3..c4a2a5b7f2 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 70a6fb8280..b60d26d07d 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 52746063c5..7eec887b52 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 9ae23ace60..b251deee7f 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 8fe716398f..0ddbe346d9 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 749dd9e96c..2b6278f188 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 0000000000..cab58441c5
Binary files /dev/null and b/web/static/feature-panel.png differ