feat: add seo system with social and AI support

.env.example

@@ -18,3 +18,6 @@ VITE_PUBLIC_KEY=
 
 # --- The api host directory
 ENV_API_LOCAL_DIR=
+
+# --- Public site URL used for canonical links (no trailing slash)
+VITE_SITE_URL=http://localhost:5173

caddy/WebCaddyfile.internal

@@ -1,7 +1,3 @@
-{
-    debug
-}
-
 :80 {
     @relay_get {
         path /relay/*

index.html

@@ -4,7 +4,35 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Gustavo Ocanto</title>
+		<meta name="description" content="Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer." />
+		<meta name="robots" content="index,follow" />
+		<meta name="theme-color" content="#ffffff" />
+		<link rel="canonical" href="%VITE_SITE_URL%/" />
+		<title>Home - Gustavo Ocanto</title>
+
+		<!-- Open Graph -->
+		<meta property="og:title" content="Home - Gustavo Ocanto" />
+		<meta property="og:description" content="Personal Website of Gustavo Ocanto, Engineering Leader, AI Architect, and Software Engineer." />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="%VITE_SITE_URL%/" />
+		<meta property="og:image" content="/favicon.ico" />
+
+		<!-- 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" />
+
+		<!-- Structured Data for AI and crawlers -->
+		<script 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."
+			}
+		</script>
 
 		<script defer>
 			if (localStorage.getItem('dark-mode') === 'true') {

src/pages/AboutPage.vue

@@ -81,6 +81,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue';
+import { seo, SITE_NAME } from '@/support/seo';
 import AboutPicture from '@images/profile/about.jpg';
 import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
@@ -106,6 +107,12 @@ const formattedNickname = computed((): string => {
 	return str.charAt(0).toUpperCase() + str.slice(1);
 });
 
+seo.apply({
+	title: 'About',
+	description: `${SITE_NAME} is an engineering leader who’s passionate about building reliable and smooth software.`,
+	image: AboutPicture,
+});
+
 onMounted(async () => {
 	try {
 		const userProfileResponse = await apiStore.getProfile();

src/pages/HomePage.vue

@@ -53,10 +53,18 @@ 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 { seo, SITE_NAME } from '@/support/seo';
+import ogImage from '@images/profile/about.jpg';
 
 const apiStore = useApiStore();
 const profile = ref<ProfileResponse | null>(null);
 
+seo.apply({
+	title: 'Home',
+	description: `${SITE_NAME} is a full-stack Software Engineer leader & architect with over two decades of experience in building complex web systems and products.`,
+	image: ogImage,
+});
+
 onMounted(async () => {
 	try {
 		const userProfileResponse = await apiStore.getProfile();

src/pages/PostPage.vue

@@ -114,6 +114,7 @@
 <script setup lang="ts">
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import { seo } from '@/support/seo';
 import { useRoute } from 'vue-router';
 import { useApiStore } from '@api/store.ts';
 import { useDarkMode } from '@/dark-mode.ts';
@@ -195,6 +196,10 @@ onMounted(async () => {
 
 	try {
 		post.value = (await apiStore.getPost(slug.value)) as PostResponse;
+
+		if (post.value) {
+			seo.applyFromPost(post.value);
+		}
 	} catch (error) {
 		debugError(error);
 	}

src/pages/ProjectsPage.vue

@@ -58,6 +58,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useApiStore } from '@api/store.ts';
+import { seo, SITE_NAME } from '@/support/seo';
+import ogImage from '@images/profile/about.jpg';
 import { debugError } from '@api/http-error.ts';
 import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
@@ -71,6 +73,12 @@ const apiStore = useApiStore();
 const projects = ref<ProjectsResponse[]>([]);
 const profile = ref<ProfileResponse | null>(null);
 
+seo.apply({
+	title: 'Projects',
+	description: `Explore some of ${SITE_NAME} open source and client projects built to solve real engineering challenges.`,
+	image: ogImage,
+});
+
 onMounted(async () => {
 	try {
 		const [userProfileResponse, projectsResponse] = await Promise.all([apiStore.getProfile(), apiStore.getProjects()]);

src/pages/ResumePage.vue

@@ -54,6 +54,8 @@ import RecommendationPartial from '@partials/RecommendationPartial.vue';
 
 import { ref, onMounted } from 'vue';
 import { useApiStore } from '@api/store.ts';
+import { seo, SITE_NAME } from '@/support/seo';
+import ogImage from '@images/profile/about.jpg';
 import { debugError } from '@api/http-error.ts';
 import type { ProfileResponse, EducationResponse, ExperienceResponse, RecommendationsResponse } from '@api/response/index.ts';
 
@@ -63,6 +65,12 @@ const education = ref<EducationResponse[] | null>(null);
 const experience = ref<ExperienceResponse[] | null>(null);
 const recommendations = ref<RecommendationsResponse[] | null>(null);
 
+seo.apply({
+	title: 'Resume',
+	description: `Explore the experience, education, and recommendations of ${SITE_NAME}.`,
+	image: ogImage,
+});
+
 onMounted(async () => {
 	try {
 		const [profileResponse, experienceResponse, recommendationsResponse, educationResponse] = await Promise.all([

src/pages/SubscribePage.vue

@@ -159,8 +159,16 @@
 </template>
 
 <script setup lang="ts">
-import SideNavPartial from '@partials/SideNavPartial.vue';
+import { seo, SITE_NAME } from '@/support/seo';
+import ogImage from '@images/profile/about.jpg';
 import HeaderPartial from '@partials/HeaderPartial.vue';
-import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
 import FooterPartial from '@partials/FooterPartial.vue';
+import SideNavPartial from '@partials/SideNavPartial.vue';
+import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
+
+seo.apply({
+	title: 'Subscribe',
+	description: `Subscribe to ${SITE_NAME}'s newsletter to updates of articles and cool things he is working on.`,
+	image: ogImage,
+});
 </script>

src/partials/HeroPartial.vue

@@ -9,10 +9,10 @@
 					<span class="blog-fun-title-word-highlight">leadership</span> as a service.
 				</h1>
 
-				<p class="text-lg text-slate-400 dark:text-slate-300 mb-5">Writer, Speaker, Developer, Founder, and Leadership.</p>
+				<p class="text-lg text-slate-400 dark:text-slate-300 mb-5">Writer, Speaker, Developer, AI Architect, Founder, and Leadership.</p>
 				<p class="mb-5 font-aspekta text-slate-500">
-					I'm a full-stack Software Engineer leader with over two decades of building complex web systems and products, specialising in areas like e-commerce, banking, cross-payment
-					solutions, cyber security, and customer success.
+					I'm a full-stack Software Engineer leader with over two decades of of experience in building complex web systems and products, specialising in areas like e-commerce, banking,
+					cross-payment solutions, cyber security, and customer success.
 				</p>
 			</div>
 		</div>

src/support/seo.ts

@@ -0,0 +1,183 @@
+import type { PostResponse } from '@api/response/posts-response.ts';
+
+export const DEFAULT_SITE_URL = 'https://oullin.io'
+export const SITE_NAME = 'Gustavo Ocanto';
+export const SITE_URL =
+	(import.meta.env?.VITE_SITE_URL as string | undefined) ??
+	(typeof window !== 'undefined' ? window.location.origin : DEFAULT_SITE_URL);
+
+
+type TwitterCard = 'summary' | 'summary_large_image' | 'app' | 'player';
+
+interface SeoOptions {
+	title?: string;
+	description?: string;
+	keywords?: string;
+	image?: string;
+	url?: string;
+	siteName?: string;
+	type?: string;
+	themeColor?: string;
+	robots?:
+		| string
+		| {
+		index?: boolean;       // default true
+		follow?: boolean;      // default true
+		archive?: boolean;     // default true
+		imageindex?: boolean;  // default true
+		nocache?: boolean;     // default false
+		noai?: boolean;
+	};
+	twitter?: {
+		card?: TwitterCard;
+		site?: string;    // e.g. @gocanto
+		creator?: string; // e.g. @gocanto
+	};
+	jsonLd?: Record<string, unknown>;
+}
+
+export class Seo {
+	apply(options: SeoOptions): void {
+		const currentPath = window.location.pathname + window.location.search;
+		const url = options.url ?? new URL(currentPath, SITE_URL).toString();
+		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;
+
+		document.title = title;
+
+		// Generic meta
+		this.setMetaByName('description', description);
+		this.setMetaByName('keywords', options.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.setLink('canonical', url);
+
+		// 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);
+		this.setMetaByProperty('og:site_name', options.siteName ?? SITE_NAME);
+
+		// Twitter
+		const twitter = options.twitter ?? {};
+		this.setMetaByName('twitter:card', twitter.card ?? 'summary_large_image');
+		this.setMetaByName('twitter:site', twitter.site);
+		this.setMetaByName('twitter:creator', twitter.creator);
+		this.setMetaByName('twitter:title', title);
+		this.setMetaByName('twitter:description', description);
+		this.setMetaByName('twitter:image', image);
+
+		// Structured data for AI and crawlers
+		this.setJsonLd(options.jsonLd);
+	}
+
+	applyFromPost(post: PostResponse): void {
+		this.apply({
+			title: post.title,
+			description: post.excerpt,
+			image: post.cover_image_url,
+			type: 'article',
+			url: new URL(`/posts/${post.slug}`, SITE_URL).toString(),
+			jsonLd: {
+				'@context': 'https://schema.org',
+				'@type': 'Article',
+				headline: post.title,
+				description: post.excerpt,
+				image: post.cover_image_url,
+				datePublished: post.published_at,
+				author: {
+					'@type': 'Person',
+					name: SITE_NAME,
+				},
+			},
+		});
+	}
+
+	private setMetaByName(name: string, content?: string): void {
+		if (!content) return;
+
+		let element = document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
+
+		if (!element) {
+			element = document.createElement('meta');
+			element.setAttribute('name', name);
+
+			document.head.appendChild(element);
+		}
+
+		element.setAttribute('content', content);
+	}
+
+	private setMetaByProperty(property: string, content?: string): void {
+		if (!content) return;
+		let element = document.head.querySelector<HTMLMetaElement>(`meta[property="${property}"]`);
+		if (!element) {
+			element = document.createElement('meta');
+			element.setAttribute('property', property);
+			document.head.appendChild(element);
+		}
+		element.setAttribute('content', content);
+	}
+
+	private setLink(rel: string, href?: string): void {
+		if (!href) return;
+		let element = document.head.querySelector<HTMLLinkElement>(`link[rel="${rel}"]`);
+		if (!element) {
+			element = document.createElement('link');
+			element.setAttribute('rel', rel);
+			document.head.appendChild(element);
+		}
+		element.setAttribute('href', href);
+	}
+
+	private setJsonLd(data?: Record<string, unknown>): void {
+		const id = 'seo-jsonld';
+		let script = document.getElementById(id) as HTMLScriptElement | null;
+		if (!data) {
+			if (script) script.remove();
+			return;
+		}
+		const json = JSON.stringify(data);
+		if (!script) {
+			script = document.createElement('script');
+			script.type = 'application/ld+json';
+			script.id = id;
+			document.head.appendChild(script);
+		}
+		script.textContent = json;
+	}
+
+	private buildRobots(robots?: SeoOptions['robots']): string | undefined {
+		if (!robots) return 'index,follow';
+		if (typeof robots === 'string') return robots;
+
+		const {
+			index = true,
+			follow = true,
+			archive = true,
+			imageindex = true,
+			nocache = false,
+			noai = false,
+		} = robots;
+
+		const tokens: string[] = [];
+		tokens.push(index ? 'index' : 'noindex');
+		tokens.push(follow ? 'follow' : 'nofollow');
+
+		if (!archive) tokens.push('noarchive');
+		if (!imageindex) tokens.push('noimageindex');
+		if (nocache) tokens.push('nocache');
+		if (noai) tokens.push('noai', 'noimageai');
+
+		return tokens.join(',');
+	}
+}
+
+export const seo = new Seo();