diff --git a/index.html b/index.html
index d02da92d..8122b620 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,13 @@
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="description" content="Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer." />
+		<meta name="keywords" content="Gustavo Ocanto, Software Engineer, Engineering Leader, AI Architect, Technical Blog, Vue.js, TypeScript" />
 		<meta name="robots" content="index,follow" />
 		<meta name="theme-color" content="#ffffff" />
+		<meta name="author" content="Gustavo Ocanto" />
 		<link rel="canonical" href="%VITE_SITE_URL%/" />
+		<link rel="alternate" href="%VITE_SITE_URL%/" hreflang="en" />
+		<link rel="alternate" href="%VITE_SITE_URL%/" hreflang="x-default" />
 		<title>Home - Gustavo Ocanto</title>
 
 		<!-- Open Graph -->
@@ -16,22 +20,36 @@
 		<meta property="og:type" content="website" />
 		<meta property="og:url" content="%VITE_SITE_URL%/" />
 		<meta property="og:image" content="/favicon.ico" />
+		<meta property="og:locale" content="en_US" />
 
 		<!-- Twitter -->
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:title" content="Home - Gustavo Ocanto" />
 		<meta name="twitter:description" content="Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer." />
 		<meta name="twitter:image" content="/favicon.ico" />
+		<meta name="twitter:creator" content="@gocanto" />
+		<meta name="twitter:site" content="@gocanto" />
 
 		<!-- Structured Data for AI and crawlers -->
 		<script id="seo-jsonld" type="application/ld+json">
-			{
-				"@context": "https://schema.org",
-				"@type": "WebSite",
-				"url": "%VITE_SITE_URL%/",
-				"name": "Gustavo Ocanto",
-				"description": "Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer."
-			}
+			[
+				{
+					"@context": "https://schema.org",
+					"@type": "WebSite",
+					"url": "%VITE_SITE_URL%/",
+					"name": "Gustavo Ocanto",
+					"description": "Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer."
+				},
+				{
+					"@context": "https://schema.org",
+					"@type": "Person",
+					"name": "Gustavo Ocanto",
+					"url": "%VITE_SITE_URL%/",
+					"jobTitle": "Engineering Leader, AI Architect, Software Engineer",
+					"description": "Engineering leader and AI architect sharing expertise in software, leadership, and product building.",
+					"sameAs": ["https://x.com/gocanto", "https://www.linkedin.com/in/gocanto/", "https://github.com/gocanto"]
+				}
+			]
 		</script>
 
 		<script defer>
diff --git a/src/main.ts b/src/main.ts
index 82b25609..2186da84 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,10 @@
 import { createApp, App as VueApp } from 'vue';
 import { createPinia, Pinia } from 'pinia';
 
-import router from '@/router';
-import App from '@/App.vue';
 import '@css/style.css';
+import App from '@/App.vue';
+import router from '@/router';
+import { lazyLinkDirective } from '@/support/lazy-loading.ts';
 
 const app: VueApp = createApp(App);
 const pinia: Pinia = createPinia();
@@ -11,4 +12,6 @@ const pinia: Pinia = createPinia();
 app.use(router);
 app.use(pinia);
 
+app.directive('lazy-link', lazyLinkDirective);
+
 app.mount('#app');
diff --git a/src/pages/AboutPage.vue b/src/pages/AboutPage.vue
index 207f1831..b300e285 100644
--- a/src/pages/AboutPage.vue
+++ b/src/pages/AboutPage.vue
@@ -17,7 +17,7 @@
 									<!-- Page title -->
 									<h1 class="h1 blog-h1">I'm {{ formattedNickname }}. I live in Singapore, where I enjoy the present.</h1>
 
-									<img class="rounded-lg w-full mb-5" :src="aboutPicture" :alt="`Portrait of: ${formattedNickname}`" />
+									<img class="rounded-lg w-full mb-5" :src="aboutPicture" :alt="`Portrait of: ${formattedNickname}`" loading="lazy" decoding="async" fetchpriority="low" />
 
 									<!-- Page content -->
 									<div class="space-y-8 text-slate-500">
@@ -25,14 +25,14 @@
 											<p class="block mb-3">
 												I am an engineering leader who’s passionate about building reliable and smooth software that strive to make a difference. With over twenty years in
 												software development and architecture, I’ve worked extensively with
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://go.dev/">GO</a>,
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://nodejs.org/en">Node.js</a>,
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/">TypeScript</a>, and
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://www.php.net/">PHP</a>. I’m also comfortable with frameworks/libraries such
-												as <a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://laravel.com/">Laravel</a>,
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://vuejs.org/">Vue</a>,
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://symfony.com/">Symfony</a>, and
-												<a class="blog-link" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/">Next.js</a>.
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://go.dev/">GO</a>,
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://nodejs.org/en">Node.js</a>,
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/">TypeScript</a>, and
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://www.php.net/">PHP</a>. I’m also comfortable with
+												frameworks/libraries such as <a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://laravel.com/">Laravel</a>,
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://vuejs.org/">Vue</a>,
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://symfony.com/">Symfony</a>, and
+												<a v-lazy-link class="blog-link" target="_blank" rel="noopener noreferrer" href="https://nextjs.org/">Next.js</a>.
 											</p>
 											<p class="block mb-3">
 												I’ve led teams in designing and delivering scalable, high-performance systems that run efficiently even in complex environments. Beyond writing code, I
@@ -53,8 +53,9 @@
 										<div class="mt-5 space-y-5">
 											<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Let's Connect</h2>
 											<p v-if="profile">
-												I’m happy to connect by <a class="blog-link" title="send me an email" aria-label="send me an email" :href="`mailto:${profile.email}`">email</a> to
-												discuss projects and ideas. While I’m not always available for freelance or long-term work, please don’t hesitate to reach out anytime.
+												I’m happy to connect by
+												<a v-lazy-link class="blog-link" title="send me an email" aria-label="send me an email" :href="`mailto:${profile.email}`"> email </a>
+												to discuss projects and ideas. While I’m not always available for freelance or long-term work, please don’t hesitate to reach out anytime.
 											</p>
 										</div>
 									</div>
@@ -87,7 +88,7 @@ import HeaderPartial from '@partials/HeaderPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
 import WidgetSocialPartial from '@partials/WidgetSocialPartial.vue';
 import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
-import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor } from '@/support/seo';
+import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
@@ -111,11 +112,19 @@ useSeo({
 	title: 'About',
 	image: ABOUT_IMAGE,
 	url: siteUrlFor('/about'),
+	imageAlt: `${SITE_NAME} portrait`,
+	keywords: buildKeywords('engineering leadership', 'software architecture expertise', 'tech mentoring'),
 	description: `${SITE_NAME} is an engineering leader who’s passionate about building reliable and smooth software.`,
-	jsonLd: {
-		'@type': 'AboutPage',
-		name: 'About',
-	},
+	jsonLd: [
+		{
+			name: 'About',
+			'@type': 'AboutPage',
+			url: siteUrlFor('/about'),
+			'@context': 'https://schema.org',
+			description: `${SITE_NAME} is an engineering leader focused on building reliable, people-first software.`,
+		},
+		PERSON_JSON_LD,
+	],
 });
 
 onMounted(async () => {
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 0def441a..2efe7e48 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -53,7 +53,7 @@ import { onMounted, ref } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
 import type { ProfileResponse } from '@api/response/index.ts';
-import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor } from '@/support/seo';
+import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 
 const apiStore = useApiStore();
 const profile = ref<ProfileResponse | null>(null);
@@ -62,11 +62,19 @@ useSeo({
 	title: 'Home',
 	image: ABOUT_IMAGE,
 	url: siteUrlFor('/'),
+	imageAlt: `${SITE_NAME} profile portrait`,
+	keywords: buildKeywords('software engineering leadership', 'technology articles', 'engineering management insights'),
 	description: `${SITE_NAME} is a full-stack Software Engineer leader & architect with over two decades of experience in building complex web systems and products.`,
-	jsonLd: {
-		'@type': 'WebPage',
-		name: 'Home',
-	},
+	jsonLd: [
+		{
+			name: 'Home',
+			'@type': 'WebPage',
+			url: siteUrlFor('/'),
+			'@context': 'https://schema.org',
+			description: `${SITE_NAME} shares articles about software engineering, leadership, AI, and architecture.`,
+		},
+		PERSON_JSON_LD,
+	],
 });
 
 onMounted(async () => {
diff --git a/src/pages/PostPage.vue b/src/pages/PostPage.vue
index 3e86d87a..b9806c28 100644
--- a/src/pages/PostPage.vue
+++ b/src/pages/PostPage.vue
@@ -16,6 +16,7 @@
 								<!-- Back -->
 								<div class="mb-3">
 									<router-link
+										v-lazy-link
 										class="inline-flex text-fuchsia-500 dark:text-slate-500 dark:hover:text-teal-600 rounded-full border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30"
 										to="/"
 									>
@@ -40,6 +41,7 @@
 											<ul class="inline-flex">
 												<li>
 													<a
+														v-lazy-link
 														class="flex justify-center items-center text-slate-400 dark:text-slate-500 hover:text-fuchsia-500 dark:hover:text-teal-600 transition duration-150 ease-in-out"
 														:href="xURLFor(post)"
 														aria-label="Twitter"
@@ -55,6 +57,7 @@
 												</li>
 												<li>
 													<a
+														v-lazy-link
 														class="flex justify-center items-center text-slate-400 dark:text-slate-500 hover:text-fuchsia-500 dark:hover:text-teal-600 transition duration-150 ease-in-out"
 														:href="`https://www.linkedin.com/sharing/share-offsite/?url=${fullURLFor(post)}`"
 														aria-label="LinkedIn"
@@ -70,6 +73,7 @@
 												</li>
 												<li>
 													<a
+														v-lazy-link
 														class="flex justify-center items-center text-slate-400 dark:text-slate-500 hover:text-fuchsia-500 dark:hover:text-teal-600 transition duration-150 ease-in-out"
 														href="#"
 														aria-label="Share"
@@ -89,7 +93,7 @@
 									<!-- Post content -->
 									<div class="text-slate-500 dark:text-slate-400 space-y-8">
 										<p>{{ post.excerpt }}</p>
-										<img class="w-full" :src="post.cover_image_url" width="692" height="390" :alt="post.title" fetchpriority="high" aria-hidden="true" />
+										<img class="w-full" :src="post.cover_image_url" width="692" height="390" :alt="post.title" decoding="async" fetchpriority="high" />
 										<div ref="postContainer" class="post-markdown" v-html="htmlContent"></div>
 									</div>
 								</article>
@@ -113,28 +117,28 @@
 
 <script setup lang="ts">
 import DOMPurify from 'dompurify';
-import { siteUrlFor, useSeoFromPost } from '@/support/seo';
 import { useRoute } from 'vue-router';
 import { useApiStore } from '@api/store.ts';
 import { useDarkMode } from '@/dark-mode.ts';
 import highlight from 'highlight.js/lib/core';
 import { debugError } from '@api/http-error.ts';
+import { date, getReadingTime } from '@/public.ts';
 import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
 import type { PostResponse } from '@api/response/index.ts';
+import { siteUrlFor, useSeoFromPost } from '@/support/seo';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
-import { date, getReadingTime } from '@/public.ts';
-import { initializeHighlighter, renderMarkdown } from '@/support/markdown.ts';
 import { onMounted, ref, computed, watch, nextTick, watchEffect } from 'vue';
+import { initializeHighlighter, renderMarkdown } from '@/support/markdown.ts';
 
 // --- Component
 const route = useRoute();
 const apiStore = useApiStore();
 const { isDark } = useDarkMode();
 const post = ref<PostResponse>();
-const slug = ref<string>(route.params.slug as string);
 const postContainer = ref<HTMLElement | null>(null);
+const slug = ref<string>(route.params.slug as string);
 
 useSeoFromPost(post);
 
diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index 0fcdf9c9..4521da88 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -65,8 +65,8 @@ import SideNavPartial from '@partials/SideNavPartial.vue';
 import ProjectCardPartial from '@partials/ProjectCardPartial.vue';
 import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
-import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor } from '@/support/seo';
 import type { ProfileResponse, ProjectsResponse } from '@api/response/index.ts';
+import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 
 const apiStore = useApiStore();
 const projects = ref<ProjectsResponse[]>([]);
@@ -76,11 +76,19 @@ useSeo({
 	title: 'Projects',
 	image: ABOUT_IMAGE,
 	url: siteUrlFor('/projects'),
+	imageAlt: `${SITE_NAME} presenting a project`,
+	keywords: buildKeywords('open source projects', 'software engineering portfolio', 'client project case studies'),
 	description: `Explore some of ${SITE_NAME} open source and client projects built to solve real engineering challenges.`,
-	jsonLd: {
-		'@type': 'CollectionPage',
-		name: 'Projects',
-	},
+	jsonLd: [
+		{
+			name: 'Projects',
+			'@type': 'CollectionPage',
+			url: siteUrlFor('/projects'),
+			'@context': 'https://schema.org',
+			description: `A curated list of ${SITE_NAME} projects that highlight engineering leadership and architecture skills.`,
+		},
+		PERSON_JSON_LD,
+	],
 });
 
 onMounted(async () => {
diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index d854d7e8..4e27e9fd 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -55,7 +55,7 @@ import RecommendationPartial from '@partials/RecommendationPartial.vue';
 import { ref, onMounted } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
-import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor } from '@/support/seo';
+import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 import type { ProfileResponse, EducationResponse, ExperienceResponse, RecommendationsResponse } from '@api/response/index.ts';
 
 const apiStore = useApiStore();
@@ -68,11 +68,19 @@ useSeo({
 	title: 'Resume',
 	image: ABOUT_IMAGE,
 	url: siteUrlFor('/resume'),
+	imageAlt: `${SITE_NAME} professional portrait`,
 	description: `Explore the experience, education, and recommendations of ${SITE_NAME}.`,
-	jsonLd: {
-		'@type': 'ProfilePage',
-		name: 'Resume',
-	},
+	keywords: buildKeywords('software engineering resume', 'technology leadership experience', 'engineering manager CV'),
+	jsonLd: [
+		{
+			name: 'Resume',
+			'@type': 'ProfilePage',
+			url: siteUrlFor('/resume'),
+			'@context': 'https://schema.org',
+			description: `${SITE_NAME} resume showcasing education, experience, and recommendations.`,
+		},
+		PERSON_JSON_LD,
+	],
 });
 
 onMounted(async () => {
diff --git a/src/pages/SubscribePage.vue b/src/pages/SubscribePage.vue
index 67ca6f24..3549c265 100644
--- a/src/pages/SubscribePage.vue
+++ b/src/pages/SubscribePage.vue
@@ -66,6 +66,9 @@
 															width="24"
 															height="24"
 															alt="Avatar 01"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
 														/>
 														<img
 															class="rounded-full border-2 border-white dark:border-slate-800 box-content"
@@ -73,6 +76,9 @@
 															width="24"
 															height="24"
 															alt="Avatar 02"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
 														/>
 														<img
 															class="rounded-full border-2 border-white dark:border-slate-800 box-content"
@@ -80,6 +86,9 @@
 															width="24"
 															height="24"
 															alt="Avatar 03"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
 														/>
 														<img
 															class="rounded-full border-2 border-white dark:border-slate-800 box-content"
@@ -87,6 +96,9 @@
 															width="24"
 															height="24"
 															alt="Avatar 04"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
 														/>
 														<img
 															class="rounded-full border-2 border-white dark:border-slate-800 box-content"
@@ -94,6 +106,9 @@
 															width="24"
 															height="24"
 															alt="Avatar 05"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
 														/>
 													</div>
 													<div class="text-sm text-slate-500 ml-3">Join 100K+ developers.</div>
@@ -106,12 +121,22 @@
 										<!-- Cards -->
 										<div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
 											<a
+												v-lazy-link
 												class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
 												href="#0"
 											>
 												<div class="flex flex-col h-full">
 													<div class="grow">
-														<img class="rounded-full mb-2" src="../images/testimonial-01.jpg" width="40" height="40" alt="Testimonial 01" />
+														<img
+															class="rounded-full mb-2"
+															src="../images/testimonial-01.jpg"
+															width="40"
+															height="40"
+															alt="Testimonial 01"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
+														/>
 														<div class="text-lg font-aspekta font-[650] mb-1">“ Incredible Value “</div>
 														<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">
 															I was able to quickly master the skills necessary to advance my career. I'm grateful for the resources Mark provided and would recommend him
@@ -122,12 +147,22 @@
 												</div>
 											</a>
 											<a
+												v-lazy-link
 												class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
 												href="#0"
 											>
 												<div class="flex flex-col h-full">
 													<div class="grow">
-														<img class="rounded-full mb-2" src="../images/testimonial-02.jpg" width="40" height="40" alt="Testimonial 02" />
+														<img
+															class="rounded-full mb-2"
+															src="../images/testimonial-02.jpg"
+															width="40"
+															height="40"
+															alt="Testimonial 02"
+															loading="lazy"
+															decoding="async"
+															fetchpriority="low"
+														/>
 														<div class="text-lg font-aspekta font-[650] mb-1">“ The Best Newsletter “</div>
 														<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">
 															I was able to quickly master the skills necessary to advance my career. I'm grateful for the resources Mark provided and would recommend him
@@ -163,16 +198,24 @@ import HeaderPartial from '@partials/HeaderPartial.vue';
 import FooterPartial from '@partials/FooterPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
-import { useSeo, SITE_NAME, siteUrlFor, ABOUT_IMAGE } from '@/support/seo';
+import { useSeo, SITE_NAME, siteUrlFor, ABOUT_IMAGE, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 
 useSeo({
 	title: 'Subscribe',
 	image: ABOUT_IMAGE,
 	url: siteUrlFor('/subscribe'),
-	description: `Subscribe to ${SITE_NAME}'s newsletter to updates of articles and cool things he is working on.`,
-	jsonLd: {
-		'@type': 'WebPage',
-		name: 'Subscribe',
-	},
+	imageAlt: `${SITE_NAME} smiling portrait`,
+	keywords: buildKeywords('engineering newsletter', 'software leadership updates', 'tech career insights'),
+	description: `Subscribe to ${SITE_NAME}'s newsletter to get updates on new articles, talks, and technology experiments.`,
+	jsonLd: [
+		{
+			name: 'Subscribe',
+			'@type': 'WebPage',
+			url: siteUrlFor('/subscribe'),
+			'@context': 'https://schema.org',
+			description: `Newsletter subscription page for ${SITE_NAME} covering leadership, engineering, and AI.`,
+		},
+		PERSON_JSON_LD,
+	],
 });
 </script>
diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index 3bfbef74..b487bc9c 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -17,6 +17,7 @@
 				</div>
 				<h3 class="text-slate-700 font-aspekta text-lg font-[650] mb-1 dark:text-slate-300">
 					<router-link
+						v-lazy-link
 						class="inline-flex relative hover:text-fuchsia-500 dark:hover:text-teal-500 duration-150 ease-out before:scale-x-0 before:origin-center before:absolute before:inset-0 before:bg-sky-200 dark:before:bg-sky-500 before:opacity-30 before:-z-10 before:translate-y-1/4 before:-rotate-2 hover:before:scale-100 before:duration-150 before:ease-in-out"
 						:to="{ name: 'PostDetail', params: { slug: item.slug } }"
 					>
@@ -28,6 +29,7 @@
 						{{ item.excerpt }}
 					</div>
 					<router-link
+						v-lazy-link
 						class="hidden lg:flex shrink-0 text-fuchsia-500 dark:text-teal-500 items-center justify-center w-12 group"
 						:to="{ name: 'PostDetail', params: { slug: item.slug } }"
 						tabindex="-1"
diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index e320568b..e30d7c3f 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -6,6 +6,7 @@
 		<ul class="flex flex-wrap text-sm border-b border-slate-100 dark:border-slate-800">
 			<li v-for="category in categories" :key="category.uuid" class="px-3 -mb-px">
 				<a
+					v-lazy-link
 					href="#"
 					:class="
 						filters.category === category.slug
diff --git a/src/partials/AvatarPartial.vue b/src/partials/AvatarPartial.vue
index 404c8079..fd9140b2 100644
--- a/src/partials/AvatarPartial.vue
+++ b/src/partials/AvatarPartial.vue
@@ -1,5 +1,5 @@
 <template>
-	<img :class="className" :src="props.avatar" :alt="props.alt" fetchpriority="high" aria-hidden="true" />
+	<img :class="className" :src="props.avatar" :alt="props.alt" :loading="props.loading" :decoding="props.decoding" :fetchpriority="props.fetchpriority" />
 </template>
 
 <script setup lang="ts">
@@ -11,6 +11,9 @@ interface Props {
 	alt?: string;
 	width: string;
 	height: string;
+	loading?: 'eager' | 'lazy';
+	decoding?: 'async' | 'sync' | 'auto';
+	fetchpriority?: 'high' | 'low' | 'auto';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +21,9 @@ const props = withDefaults(defineProps<Props>(), {
 	height: 'h-20',
 	avatar: photo,
 	alt: 'gocanto',
+	loading: 'eager',
+	decoding: 'async',
+	fetchpriority: 'high',
 });
 
 const className = computed<string>(() => {
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index a12ab0d6..9579bc25 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -7,6 +7,7 @@
 			<a
 				v-for="project in projects"
 				:key="project.uuid"
+				v-lazy-link
 				class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
 				:href="project.url"
 				target="_blank"
diff --git a/src/partials/ProjectCardPartial.vue b/src/partials/ProjectCardPartial.vue
index 00865403..fe364fca 100644
--- a/src/partials/ProjectCardPartial.vue
+++ b/src/partials/ProjectCardPartial.vue
@@ -1,5 +1,6 @@
 <template>
 	<a
+		v-lazy-link
 		class="rounded-lg border border-slate-200 hover:border-slate-300 dark:border-slate-800 dark:hover:border-slate-700 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 transition-color ease-in-out p-5 group"
 		:href="item.url"
 		target="_blank"
@@ -9,7 +10,7 @@
 			<div class="grow">
 				<div class="flex items-center justify-between space-x-2">
 					<div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2">
-						<img :src="getIconSrc()" width="18" height="18" :alt="item.title" />
+						<img :src="getIconSrc()" width="18" height="18" :alt="item.title" loading="lazy" decoding="async" fetchpriority="low" />
 					</div>
 					<div v-if="item.is_open_source" class="text-xs inline-flex items-center font-medium bg-green-100 text-green-600 rounded-full text-center px-2 h-5">Open-Source</div>
 				</div>
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index 38e4ffff..ac190cc4 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -8,7 +8,7 @@
 					<div
 						class="absolute left-0 h-14 w-14 flex items-center justify-center dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 bg-white dark:bg-slate-900 rounded-full"
 					>
-						<img class="rounded-full" :src="image(item.person.avatar)" width="56" height="56" :alt="item.person.full_name" />
+						<img class="rounded-full" :src="image(item.person.avatar)" width="56" height="56" :alt="item.person.full_name" loading="lazy" decoding="async" fetchpriority="low" />
 					</div>
 					<div class="pl-20 space-y-1">
 						<div class="font-aspekta font-[650] text-slate-800 dark:text-slate-100">{{ item.person.full_name }}</div>
diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 5d11b92a..43229798 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -3,8 +3,8 @@
 		<div class="h-full flex flex-col justify-between after:flex-1 after:mt-auto">
 			<!-- Sidebar avatar -->
 			<div v-if="!isHome" class="flex justify-center my-4">
-				<router-link to="/">
-					<AvatarPartial width="w-16" height="h-16" />
+				<router-link v-lazy-link to="/">
+					<AvatarPartial width="w-16" height="h-16" loading="lazy" decoding="async" fetchpriority="low" />
 				</router-link>
 			</div>
 
@@ -15,12 +15,7 @@
 						<li class="py-2">
 							<!-- home -->
 							<router-link v-slot="{ href, navigate, isExactActive }" to="/" custom>
-								<a
-									:class="applyClassIf(['/about', '/subscribe', '/projects', '/resume']) ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting'"
-									class="h6 blog-side-nav-router-link-a"
-									:href="href"
-									@click="navigate"
-								>
+								<a v-lazy-link class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
 									<span class="sr-only">Home</span>
 									<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="21" height="19">
 										<path fill-opacity=".16" d="M4 7v11h13V7l-6.5-5z" />
@@ -33,7 +28,7 @@
 						<!-- about -->
 						<li class="py-2">
 							<router-link v-slot="{ href, navigate, isExactActive }" to="/about" custom>
-								<a class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
+								<a v-lazy-link class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
 									<span class="sr-only">About</span>
 									<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
 										<path fill-opacity=".16" d="M10 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z" />
@@ -48,7 +43,7 @@
 						<!-- projects -->
 						<li class="py-2">
 							<router-link v-slot="{ href, navigate, isExactActive }" to="/projects" custom>
-								<a class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
+								<a v-lazy-link class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
 									<span class="sr-only">Projects</span>
 									<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
 										<path fill-opacity=".16" d="M1 4h18v10H1z" />
@@ -61,7 +56,7 @@
 						<!-- resume -->
 						<li class="py-2">
 							<router-link v-slot="{ href, navigate, isExactActive }" to="/resume" custom>
-								<a class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
+								<a v-lazy-link class="h6 blog-side-nav-router-link-a" :class="bindIconClassFor(isExactActive)" :href="href" @click="navigate">
 									<span class="sr-only">Resume</span>
 									<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="20">
 										<path fill-opacity=".16" fill-rule="nonzero" d="M1 5h16v14H1z" />
@@ -93,16 +88,6 @@ const isHome = computed<boolean>(() => {
 	return currentRoute.value.fullPath === '/';
 });
 
-function applyClassIf(constraint: string[]): boolean {
-	if (isHome.value) {
-		return true;
-	}
-
-	const fullPath = currentRoute.value.fullPath;
-
-	return Array.of(constraint).includes(fullPath);
-}
-
 function bindIconClassFor(isActive: boolean): string {
 	return isActive ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting';
 }
diff --git a/src/partials/TalksPartial.vue b/src/partials/TalksPartial.vue
index d76ce6fb..40eb4da7 100644
--- a/src/partials/TalksPartial.vue
+++ b/src/partials/TalksPartial.vue
@@ -7,12 +7,20 @@
 			<a
 				v-for="talk in talks"
 				:key="talk.uuid"
+				v-lazy-link
 				class="relative aspect-video rounded-lg overflow-hidden bg-linear-to-tr from-slate-800 to-slate-700 odd:rotate-1 even:-rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out shadow-xl"
 				:href="talk.url"
 				target="_blank"
 				rel="noopener noreferrer"
 			>
-				<img class="absolute inset-0 w-full h-full object-cover opacity-40 max-w-[336] max-h-[189]" :src="image(talk.photo)" :alt="talk.title" />
+				<img
+					class="absolute inset-0 w-full h-full object-cover opacity-40 max-w-[336] max-h-[189]"
+					:src="image(talk.photo)"
+					:alt="talk.title"
+					loading="lazy"
+					decoding="async"
+					fetchpriority="low"
+				/>
 				<div class="h-full relative flex flex-col items-start justify-between before:mt-auto before:flex-1 p-5">
 					<div class="flex-1 flex items-center text-lg font-aspekta text-white font-[650]">{{ talk.title }}</div>
 
diff --git a/src/partials/WidgetSocialPartial.vue b/src/partials/WidgetSocialPartial.vue
index f3a16d00..d2562e9a 100644
--- a/src/partials/WidgetSocialPartial.vue
+++ b/src/partials/WidgetSocialPartial.vue
@@ -13,7 +13,7 @@
 
 		<ul role="list" class="mt-5 space-y-2">
 			<li v-for="item in social" :key="item.uuid">
-				<a v-if="socialPlatforms[item.name]" target="_blank" rel="noopener noreferrer" :href="item.url" :title="item.description" class="group blog-widgets-social-links">
+				<a v-if="socialPlatforms[item.name]" v-lazy-link target="_blank" rel="noopener noreferrer" :href="item.url" :title="item.description" class="group blog-widgets-social-links">
 					<svg viewBox="0 0 24 24" aria-hidden="true" class="blog-widgets-social-svg">
 						<path :d="socialPlatforms[item.name].icon" />
 					</svg>
diff --git a/src/support/lazy-loading.ts b/src/support/lazy-loading.ts
new file mode 100644
index 00000000..83ece136
--- /dev/null
+++ b/src/support/lazy-loading.ts
@@ -0,0 +1,257 @@
+import router from '@/router';
+import type { Directive } from 'vue';
+
+const prefetchedRoutes = new Set<string>();
+const isBrowser = typeof window !== 'undefined';
+const hasIntersectionObserver = isBrowser && 'IntersectionObserver' in window;
+
+const idleCallback =
+	isBrowser && 'requestIdleCallback' in window
+		? (
+				window as typeof window & {
+					requestIdleCallback: (callback: IdleRequestCallback, options?: IdleRequestOptions) => number;
+				}
+			).requestIdleCallback.bind(window)
+		: null;
+
+const cancelIdleCallback = isBrowser && 'cancelIdleCallback' in window ? (window as typeof window & { cancelIdleCallback: (handle: number) => void }).cancelIdleCallback.bind(window) : null;
+
+type Cleanup = () => void;
+
+interface LinkState {
+	cleanup: Cleanup;
+	href: string | null;
+}
+
+const linkStates = new WeakMap<HTMLAnchorElement, LinkState>();
+
+function normaliseHref(element: HTMLAnchorElement): string | null {
+	const rawHref = element.getAttribute('href');
+
+	if (!rawHref) {
+		return null;
+	}
+
+	const trimmed = rawHref.trim();
+
+	if (trimmed === '' || trimmed.startsWith('#') || trimmed.startsWith('mailto:') || trimmed.startsWith('tel:') || trimmed.startsWith('javascript:')) {
+		return null;
+	}
+
+	if (isBrowser) {
+		try {
+			const parsed = new URL(trimmed, window.location.origin);
+
+			if (parsed.origin !== window.location.origin) {
+				return null;
+			}
+
+			return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+		} catch (error) {
+			console.warn('Failed to parse link href for lazy loading', error);
+			return null;
+		}
+	}
+
+	// Outside a browser context we cannot reliably determine the current origin, so
+	// avoid prefetching absolute URLs altogether. This mirrors the browser guard above
+	// that only permits same-origin routes.
+	if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(trimmed)) {
+		try {
+			const parsed = new URL(trimmed);
+
+			if (parsed.origin && parsed.origin !== 'null') {
+				return null;
+			}
+		} catch (error) {
+			console.warn('Failed to parse absolute link href for lazy loading', error);
+			return null;
+		}
+	}
+
+	return trimmed;
+}
+
+function prefetchRoute(href: string): void {
+	if (!isBrowser) {
+		return;
+	}
+
+	if (prefetchedRoutes.has(href)) {
+		return;
+	}
+
+	try {
+		const resolved = router.resolve(href);
+
+		resolved.matched.forEach((record) => {
+			const components = record.components;
+
+			if (!components) {
+				return;
+			}
+
+			Object.values(components).forEach((component) => {
+				if (typeof component === 'function') {
+					// Trigger the dynamic import for the route component
+					void (component as Function)();
+				}
+			});
+		});
+
+		prefetchedRoutes.add(href);
+	} catch (error) {
+		console.error('Unable to prefetch route component for link', href, error);
+	}
+}
+
+function createLazyLinkCleanup(element: HTMLAnchorElement, href: string | null): Cleanup {
+	if (!href) {
+		element.dataset.lazyLink = 'ignored';
+
+		return () => {
+			delete element.dataset.lazyLink;
+		};
+	}
+
+	element.dataset.lazyLink = 'observed';
+
+	let idleHandle: number | null = null;
+
+	const schedulePrefetch = (): void => {
+		if (!isBrowser || prefetchedRoutes.has(href)) {
+			return;
+		}
+
+		const runPrefetch = () => {
+			idleHandle = null;
+			prefetchRoute(href);
+			element.dataset.lazyLink = 'prefetched';
+		};
+
+		if (idleCallback) {
+			idleHandle = idleCallback(
+				() => {
+					runPrefetch();
+				},
+				{ timeout: 1500 },
+			);
+		} else {
+			idleHandle = window.setTimeout(() => {
+				runPrefetch();
+			}, 120);
+		}
+	};
+
+	const cleanupFns: Cleanup[] = [];
+
+	if (hasIntersectionObserver) {
+		const observer = new IntersectionObserver(
+			(entries, currentObserver) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						schedulePrefetch();
+						currentObserver.unobserve(entry.target);
+					}
+				});
+			},
+			{ rootMargin: '160px' },
+		);
+
+		observer.observe(element);
+		cleanupFns.push(() => {
+			currentObserverCleanup(observer, element);
+		});
+	} else {
+		// As a fallback, trigger prefetch on mount once the browser is idle
+		schedulePrefetch();
+	}
+
+	const pointerHandler = () => schedulePrefetch();
+	const focusHandler = () => schedulePrefetch();
+	const touchHandler = () => schedulePrefetch();
+
+	element.addEventListener('pointerenter', pointerHandler, { once: true });
+	element.addEventListener('focus', focusHandler, { once: true });
+	element.addEventListener('touchstart', touchHandler, { once: true, passive: true });
+
+	cleanupFns.push(() => {
+		element.removeEventListener('pointerenter', pointerHandler);
+		element.removeEventListener('focus', focusHandler);
+		element.removeEventListener('touchstart', touchHandler);
+	});
+
+	cleanupFns.push(() => {
+		if (idleHandle !== null) {
+			if (cancelIdleCallback) {
+				cancelIdleCallback(idleHandle);
+			} else {
+				window.clearTimeout(idleHandle);
+			}
+
+			idleHandle = null;
+		}
+	});
+
+	return () => {
+		cleanupFns.forEach((fn) => {
+			try {
+				fn();
+			} catch (error) {
+				console.error('Failed to cleanup lazy link handler', error);
+			}
+		});
+
+		delete element.dataset.lazyLink;
+	};
+}
+
+function currentObserverCleanup(observer: IntersectionObserver, element: HTMLAnchorElement): void {
+	try {
+		observer.unobserve(element);
+	} catch (error) {
+		console.error('Failed to disconnect lazy link observer', error);
+	}
+
+	observer.disconnect();
+}
+
+export const lazyLinkDirective: Directive<HTMLAnchorElement, undefined> = {
+	mounted(element) {
+		if (!isBrowser) {
+			return;
+		}
+
+		const href = normaliseHref(element);
+		const cleanup = createLazyLinkCleanup(element, href);
+
+		linkStates.set(element, { cleanup, href });
+	},
+	updated(element) {
+		if (!isBrowser) {
+			return;
+		}
+
+		const currentState = linkStates.get(element);
+		const href = normaliseHref(element);
+
+		if (currentState && currentState.href === href) {
+			return;
+		}
+
+		currentState?.cleanup();
+
+		const cleanup = createLazyLinkCleanup(element, href);
+
+		linkStates.set(element, { cleanup, href });
+	},
+	unmounted(element) {
+		if (!isBrowser) {
+			return;
+		}
+
+		const state = linkStates.get(element);
+		state?.cleanup();
+		linkStates.delete(element);
+	},
+};
diff --git a/src/support/seo.ts b/src/support/seo.ts
index b0568645..228ec901 100644
--- a/src/support/seo.ts
+++ b/src/support/seo.ts
@@ -4,19 +4,35 @@ import type { PostResponse } from '@api/response/posts-response.ts';
 export const SITE_NAME = 'Gustavo Ocanto';
 export const DEFAULT_SITE_URL = 'https://oullin.io';
 export const ABOUT_IMAGE = '/images/profile/about.jpg';
+export const DEFAULT_DESCRIPTION = 'Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer.';
 export const SITE_URL = (import.meta.env?.VITE_SITE_URL as string | undefined) ?? (typeof window !== 'undefined' ? window.location.origin : DEFAULT_SITE_URL);
+export const DEFAULT_KEYWORDS = [SITE_NAME, 'Software Engineer', 'Engineering Leader', 'AI Architect', 'Tech Speaker', 'Technical Blog', 'Leadership in Technology', 'Vue.js', 'TypeScript'].join(',');
+export const PERSON_JSON_LD = {
+	'@context': 'https://schema.org',
+	'@type': 'Person',
+	name: SITE_NAME,
+	url: SITE_URL,
+	image: ABOUT_IMAGE,
+	jobTitle: 'Engineering Leader, AI Architect, Software Engineer',
+	description: DEFAULT_DESCRIPTION,
+	sameAs: ['https://x.com/gocanto', 'https://www.linkedin.com/in/gocanto/', 'https://github.com/gocanto'],
+};
 
 type TwitterCard = 'summary' | 'summary_large_image' | 'app' | 'player';
+type JsonLd = Record<string, unknown> | Array<Record<string, unknown>>;
 
 interface SeoOptions {
 	title?: string;
 	description?: string;
-	keywords?: string;
+	keywords?: string | string[];
 	image?: string;
+	imageAlt?: string;
 	url?: string;
 	siteName?: string;
 	type?: string;
 	themeColor?: string;
+	locale?: string;
+	siteLanguage?: string;
 	robots?:
 		| string
 		| {
@@ -32,7 +48,7 @@ interface SeoOptions {
 		site?: string; // e.g. @gocanto
 		creator?: string; // e.g. @gocanto
 	};
-	jsonLd?: Record<string, unknown>;
+	jsonLd?: JsonLd;
 }
 
 const hasDocument = typeof document !== 'undefined';
@@ -46,28 +62,47 @@ export class Seo {
 		const url = options.url ?? siteUrlFor(currentPath || '/');
 		const image = options.image ? new URL(options.image, SITE_URL).toString() : undefined;
 		const title = options.title ? `${options.title} - ${SITE_NAME}` : SITE_NAME;
-		const description = options.description;
+		const description = options.description ?? DEFAULT_DESCRIPTION;
+		const language = options.siteLanguage ?? 'en';
+		const locale = options.locale ?? 'en_US';
+		const keywords = normalizeKeywords(options.keywords) ?? DEFAULT_KEYWORDS;
 
 		document.title = title;
 
+		if (language) {
+			document.documentElement.setAttribute('lang', language);
+		}
+
 		// Generic meta
 		this.setMetaByName('description', description);
-		this.setMetaByName('keywords', options.keywords);
+		this.setMetaByName('keywords', keywords);
 		this.setMetaByName('robots', this.buildRobots(options.robots));
 		this.setMetaByName('theme-color', options.themeColor ?? '#ffffff');
 		this.setMetaByName('msapplication-TileColor', options.themeColor ?? '#ffffff');
 		this.setMetaByName('application-name', title);
 		this.setMetaByName('apple-mobile-web-app-title', title);
+		this.setMetaByName('author', SITE_NAME);
+		this.setMetaByName('language', language);
 
 		this.setLink('canonical', url);
+		this.setAlternateHrefLang(url, language);
+		this.setAlternateHrefLang(url, 'x-default');
 
 		// Open Graph
 		this.setMetaByProperty('og:title', title);
 		this.setMetaByProperty('og:description', description);
 		this.setMetaByProperty('og:type', options.type ?? 'website');
 		this.setMetaByProperty('og:url', url);
-		this.setMetaByProperty('og:image', image);
+		if (image) {
+			this.setMetaByProperty('og:image', image);
+			this.setMetaByProperty('og:image:alt', options.imageAlt ?? title);
+		} else {
+			// ensure previous values don't leak
+			this.setMetaByProperty('og:image', undefined);
+			this.setMetaByProperty('og:image:alt', undefined);
+		}
 		this.setMetaByProperty('og:site_name', options.siteName ?? SITE_NAME);
+		this.setMetaByProperty('og:locale', locale);
 
 		// Twitter
 		const twitter = options.twitter ?? {};
@@ -76,7 +111,13 @@ export class Seo {
 		this.setMetaByName('twitter:creator', twitter.creator);
 		this.setMetaByName('twitter:title', title);
 		this.setMetaByName('twitter:description', description);
-		this.setMetaByName('twitter:image', image);
+		if (image) {
+			this.setMetaByName('twitter:image', image);
+			this.setMetaByName('twitter:image:alt', options.imageAlt ?? title);
+		} else {
+			this.setMetaByName('twitter:image', undefined);
+			this.setMetaByName('twitter:image:alt', undefined);
+		}
 
 		// Structured data for AI and crawlers
 		this.setJsonLd(options.jsonLd);
@@ -84,14 +125,19 @@ export class Seo {
 
 	private setMetaByName(name: string, content?: string): void {
 		if (!hasDocument) return;
-		if (!content) return;
 
-		let element = document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
+		const selector = `meta[name="${name}"]`;
+		let element = document.head.querySelector<HTMLMetaElement>(`${selector}[data-seo="1"]`);
+
+		if (!content) {
+			if (element) element.remove();
+			return;
+		}
 
 		if (!element) {
 			element = document.createElement('meta');
 			element.setAttribute('name', name);
-
+			element.dataset.seo = '1';
 			document.head.appendChild(element);
 		}
 
@@ -100,13 +146,21 @@ export class Seo {
 
 	private setMetaByProperty(property: string, content?: string): void {
 		if (!hasDocument) return;
-		if (!content) return;
-		let element = document.head.querySelector<HTMLMetaElement>(`meta[property="${property}"]`);
+		const selector = `meta[property="${property}"]`;
+		let element = document.head.querySelector<HTMLMetaElement>(`${selector}[data-seo="1"]`);
+
+		if (!content) {
+			if (element) element.remove();
+			return;
+		}
+
 		if (!element) {
 			element = document.createElement('meta');
 			element.setAttribute('property', property);
+			element.dataset.seo = '1';
 			document.head.appendChild(element);
 		}
+
 		element.setAttribute('content', content);
 	}
 
@@ -122,7 +176,7 @@ export class Seo {
 		element.setAttribute('href', href);
 	}
 
-	private setJsonLd(data?: Record<string, unknown>): void {
+	private setJsonLd(data?: JsonLd): void {
 		if (!hasDocument) return;
 		const id = 'seo-jsonld';
 		let script = document.getElementById(id) as HTMLScriptElement | null;
@@ -140,6 +194,22 @@ export class Seo {
 		script.textContent = json;
 	}
 
+	private setAlternateHrefLang(href: string, hreflang?: string): void {
+		if (!hasDocument) return;
+		if (!href || !hreflang) return;
+
+		let element = document.head.querySelector<HTMLLinkElement>(`link[rel="alternate"][hreflang="${hreflang}"]`);
+
+		if (!element) {
+			element = document.createElement('link');
+			element.setAttribute('rel', 'alternate');
+			element.setAttribute('hreflang', hreflang);
+			document.head.appendChild(element);
+		}
+
+		element.setAttribute('href', href);
+	}
+
 	private buildRobots(robots?: SeoOptions['robots']): string | undefined {
 		if (!robots) return 'index,follow';
 		if (typeof robots === 'string') return robots;
@@ -161,6 +231,27 @@ export class Seo {
 
 export const seo = new Seo();
 
+function normalizeKeywords(keywords?: string | string[]): string | undefined {
+	if (!keywords) {
+		return undefined;
+	}
+
+	const list = Array.isArray(keywords)
+		? keywords
+		: keywords
+				.split(',')
+				.map((item) => item.trim())
+				.filter((item) => item.length > 0);
+
+	const unique = Array.from(new Set(list.map((item) => item.trim()).filter((item) => item.length > 0)));
+
+	if (!unique.length) {
+		return undefined;
+	}
+
+	return unique.join(',');
+}
+
 function resolveValue<T>(value: MaybeRefOrGetter<T>): T {
 	return typeof value === 'function' ? (value as () => T)() : unref(value);
 }
@@ -214,3 +305,31 @@ export function useSeoFromPost(post: MaybeRefOrGetter<PostResponse | null | unde
 export function siteUrlFor(path: string): string {
 	return new URL(path, SITE_URL).toString();
 }
+
+export function buildKeywords(...entries: Array<string | string[] | null | undefined>): string {
+	const baseKeywords = DEFAULT_KEYWORDS.split(',')
+		.map((keyword) => keyword.trim())
+		.filter(Boolean);
+	const uniqueKeywords = new Set(baseKeywords);
+
+	entries.forEach((entry) => {
+		if (!entry) {
+			return;
+		}
+
+		const tokens = Array.isArray(entry)
+			? entry
+			: entry
+					.split(',')
+					.map((token) => token.trim())
+					.filter((token) => token.length > 0);
+
+		tokens.forEach((token) => {
+			if (token.length > 0) {
+				uniqueKeywords.add(token);
+			}
+		});
+	});
+
+	return Array.from(uniqueKeywords).join(',');
+}
diff --git a/tests/support/lazy-loading.test.ts b/tests/support/lazy-loading.test.ts
new file mode 100644
index 00000000..a7bd8ad1
--- /dev/null
+++ b/tests/support/lazy-loading.test.ts
@@ -0,0 +1,318 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+type LazyDirective = NonNullable<(typeof import('@/support/lazy-loading.ts'))['lazyLinkDirective']>;
+
+type MockObserverInstance = {
+	observe: ReturnType<typeof vi.fn>;
+	unobserve: ReturnType<typeof vi.fn>;
+	disconnect: ReturnType<typeof vi.fn>;
+	trigger: (target: Element, isIntersecting?: boolean) => void;
+};
+
+const installMockIntersectionObserver = () => {
+	const instances: MockObserverInstance[] = [];
+
+	class MockIntersectionObserver {
+		private callback: IntersectionObserverCallback;
+
+		public observe = vi.fn();
+		public unobserve = vi.fn();
+		public disconnect = vi.fn();
+
+		constructor(callback: IntersectionObserverCallback) {
+			this.callback = callback;
+
+			instances.push({
+				observe: this.observe,
+				unobserve: this.unobserve,
+				disconnect: this.disconnect,
+				trigger: (target: Element, isIntersecting = true) => {
+					const entry = { isIntersecting, target } as IntersectionObserverEntry;
+
+					this.callback([entry], this as unknown as IntersectionObserver);
+				},
+			});
+		}
+	}
+
+	(window as unknown as { IntersectionObserver: typeof IntersectionObserver }).IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver;
+
+	return instances;
+};
+
+const installIdleCallback = (options: { immediate?: boolean } = {}) => {
+	let handle = 0;
+	const callbacks = new Map<number, IdleRequestCallback>();
+	const requestIdleCallback = vi.fn((cb: IdleRequestCallback) => {
+		const id = ++handle;
+
+		callbacks.set(id, cb);
+
+		if (options.immediate) {
+			cb({ didTimeout: false, timeRemaining: () => 10 } as IdleDeadline);
+		}
+
+		return id;
+	});
+
+	const cancelIdleCallback = vi.fn((id: number) => {
+		callbacks.delete(id);
+	});
+
+	(window as unknown as { requestIdleCallback?: typeof requestIdleCallback }).requestIdleCallback = requestIdleCallback as unknown as typeof window.requestIdleCallback;
+	(window as unknown as { cancelIdleCallback?: typeof cancelIdleCallback }).cancelIdleCallback = cancelIdleCallback as unknown as typeof window.cancelIdleCallback;
+
+	return {
+		requestIdleCallback,
+		cancelIdleCallback,
+		runPending: () => {
+			for (const [id, cb] of callbacks.entries()) {
+				cb({ didTimeout: false, timeRemaining: () => 10 } as IdleDeadline);
+				callbacks.delete(id);
+			}
+		},
+	};
+};
+
+afterEach(() => {
+	delete (window as { IntersectionObserver?: typeof IntersectionObserver }).IntersectionObserver;
+	delete (window as { requestIdleCallback?: typeof window.requestIdleCallback }).requestIdleCallback;
+	delete (window as { cancelIdleCallback?: typeof window.cancelIdleCallback }).cancelIdleCallback;
+	vi.useRealTimers();
+	vi.resetModules();
+	vi.restoreAllMocks();
+	vi.clearAllMocks();
+	document.body.innerHTML = '';
+	document.head.innerHTML = '';
+});
+
+const mountDirective = async () => {
+	const module = await import('@/support/lazy-loading.ts');
+
+	return module.lazyLinkDirective as LazyDirective;
+};
+
+const withDirective = async (setup: (directive: LazyDirective, router: (typeof import('@/router'))['default']) => Promise<void> | void) => {
+	vi.resetModules();
+
+	const routerModule = await import('@/router');
+	const directive = await mountDirective();
+
+	await setup(directive, routerModule.default);
+};
+
+describe('lazyLinkDirective', () => {
+	it('ignores links with non-prefetchable hrefs', async () => {
+		installMockIntersectionObserver();
+		const idle = installIdleCallback({ immediate: true });
+
+		await withDirective(async (directive) => {
+			const element = document.createElement('a');
+			element.setAttribute('href', 'mailto:hello@example.com');
+
+			directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(element.dataset.lazyLink).toBe('ignored');
+			expect(idle.requestIdleCallback).not.toHaveBeenCalled();
+		});
+	});
+
+	it('ignores external absolute URLs', async () => {
+		installMockIntersectionObserver();
+		installIdleCallback({ immediate: true });
+
+		await withDirective(async (directive) => {
+			const element = document.createElement('a');
+			element.setAttribute('href', 'https://example.com/about');
+
+			directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(element.dataset.lazyLink).toBe('ignored');
+		});
+	});
+
+	it('prefetches when the link becomes visible', async () => {
+		const observers = installMockIntersectionObserver();
+		const idle = installIdleCallback({ immediate: true });
+
+		await withDirective(async (directive, router) => {
+			const element = document.createElement('a');
+			element.setAttribute('href', `${window.location.origin}/about?foo=1#bio`);
+
+			const componentSpy = vi.fn().mockResolvedValue(undefined);
+			const resolveSpy = vi.spyOn(router, 'resolve').mockReturnValue({
+				matched: [
+					{
+						components: {
+							default: componentSpy,
+							sidebar: componentSpy,
+						},
+					},
+				],
+			} as unknown as ReturnType<typeof router.resolve>);
+
+			directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(element.dataset.lazyLink).toBe('observed');
+			expect(observers).toHaveLength(1);
+			expect(observers[0]?.observe).toHaveBeenCalledWith(element);
+
+			observers[0]?.trigger(element);
+
+			expect(idle.requestIdleCallback).toHaveBeenCalledTimes(1);
+			expect(resolveSpy).toHaveBeenCalledWith('/about?foo=1#bio');
+			expect(componentSpy).toHaveBeenCalledTimes(2);
+			expect(element.dataset.lazyLink).toBe('prefetched');
+
+			// Ensure duplicate triggers do not queue another idle callback
+			element.dispatchEvent(new Event('pointerenter'));
+			expect(idle.requestIdleCallback).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it('reinitialises listeners when href changes during updates', async () => {
+		const observers = installMockIntersectionObserver();
+		const idle = installIdleCallback({ immediate: true });
+
+		await withDirective(async (directive, router) => {
+			const element = document.createElement('a');
+			element.setAttribute('href', '/about');
+
+			const componentSpy = vi.fn().mockResolvedValue(undefined);
+			const resolveSpy = vi.spyOn(router, 'resolve').mockReturnValue({
+				matched: [
+					{
+						components: { default: componentSpy },
+					},
+				],
+			} as unknown as ReturnType<typeof router.resolve>);
+
+			directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+			observers[0]?.trigger(element);
+
+			expect(resolveSpy).toHaveBeenCalledWith('/about');
+			expect(componentSpy).toHaveBeenCalledTimes(1);
+
+			element.setAttribute('href', '/projects');
+			directive.updated?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(observers[0]?.unobserve).toHaveBeenCalledWith(element);
+			expect(observers[0]?.disconnect).toHaveBeenCalled();
+			expect(element.dataset.lazyLink).toBe('observed');
+			expect(observers).toHaveLength(2);
+
+			observers[1]?.trigger(element);
+
+			expect(resolveSpy).toHaveBeenLastCalledWith('/projects');
+			expect(componentSpy).toHaveBeenCalledTimes(2);
+
+			directive.unmounted?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(observers[1]?.unobserve).toHaveBeenCalledWith(element);
+			expect(observers[1]?.disconnect).toHaveBeenCalled();
+			expect(element.dataset.lazyLink).toBeUndefined();
+		});
+	});
+
+	it('cancels scheduled prefetch work when unmounted before it runs', async () => {
+		installMockIntersectionObserver();
+		const idle = installIdleCallback();
+
+		await withDirective(async (directive, router) => {
+			const element = document.createElement('a');
+			element.setAttribute('href', '/about');
+
+			vi.spyOn(router, 'resolve').mockReturnValue({ matched: [] } as unknown as ReturnType<typeof router.resolve>);
+
+			directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+			element.dispatchEvent(new Event('pointerenter'));
+
+			expect(idle.requestIdleCallback).toHaveBeenCalledTimes(1);
+
+			directive.unmounted?.(element as HTMLAnchorElement, undefined as never);
+
+			expect(idle.cancelIdleCallback).toHaveBeenCalledTimes(1);
+			expect(element.dataset.lazyLink).toBeUndefined();
+		});
+	});
+
+	it('falls back to timeouts when requestIdleCallback is unavailable', async () => {
+		const observers = installMockIntersectionObserver();
+		delete (window as { requestIdleCallback?: typeof window.requestIdleCallback }).requestIdleCallback;
+		delete (window as { cancelIdleCallback?: typeof window.cancelIdleCallback }).cancelIdleCallback;
+
+		vi.resetModules();
+		vi.useFakeTimers();
+
+		const routerModule = await import('@/router');
+		const directive = await mountDirective();
+
+		const element = document.createElement('a');
+		element.setAttribute('href', '/resume');
+
+		const componentSpy = vi.fn();
+		const resolveSpy = vi.spyOn(routerModule.default, 'resolve').mockReturnValue({
+			matched: [
+				{
+					components: { default: componentSpy },
+				},
+			],
+		} as unknown as ReturnType<typeof routerModule.default.resolve>);
+		const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
+
+		directive.mounted?.(element as HTMLAnchorElement, undefined as never);
+
+		expect(observers).toHaveLength(1);
+		observers[0]?.trigger(element);
+
+		expect(resolveSpy).not.toHaveBeenCalled();
+
+		directive.unmounted?.(element as HTMLAnchorElement, undefined as never);
+
+		expect(resolveSpy).not.toHaveBeenCalled();
+		expect(clearTimeoutSpy).toHaveBeenCalled();
+
+		vi.runAllTimers();
+
+		expect(resolveSpy).not.toHaveBeenCalled();
+		vi.useRealTimers();
+	});
+
+	it('does not prefetch routes that were already prefetched elsewhere', async () => {
+		const observers = installMockIntersectionObserver();
+		const idle = installIdleCallback({ immediate: true });
+
+		await withDirective(async (directive, router) => {
+			const componentSpy = vi.fn();
+			const resolveSpy = vi.spyOn(router, 'resolve').mockReturnValue({
+				matched: [
+					{
+						components: { default: componentSpy },
+					},
+				],
+			} as unknown as ReturnType<typeof router.resolve>);
+
+			const first = document.createElement('a');
+			first.setAttribute('href', '/about');
+			directive.mounted?.(first as HTMLAnchorElement, undefined as never);
+			observers[0]?.trigger(first);
+
+			expect(resolveSpy).toHaveBeenCalledTimes(1);
+			expect(componentSpy).toHaveBeenCalledTimes(1);
+
+			const second = document.createElement('a');
+			second.setAttribute('href', '/about');
+			directive.mounted?.(second as HTMLAnchorElement, undefined as never);
+			observers[1]?.trigger(second);
+
+			expect(resolveSpy).toHaveBeenCalledTimes(1);
+			expect(componentSpy).toHaveBeenCalledTimes(1);
+			expect(second.dataset.lazyLink).toBe('observed');
+
+			second.dispatchEvent(new Event('focus'));
+			expect(idle.requestIdleCallback).toHaveBeenCalledTimes(1);
+		});
+	});
+});