From 59509f84e61744270ac88fd91f54975b74c14910 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Mon, 25 Aug 2025 11:57:46 -0400
Subject: [PATCH] Social media tags + thumbnail

---
 src/components/SeoMetaTags.svelte | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/SeoMetaTags.svelte b/src/components/SeoMetaTags.svelte
index a909758..d3da836 100644
--- a/src/components/SeoMetaTags.svelte
+++ b/src/components/SeoMetaTags.svelte
@@ -1,13 +1,39 @@
 <script>
+	import { getFromCMS } from '$lib/utils';
+	import { onMount } from 'svelte';
+
 	let {
 		title = "Electrical, Computer & Software Engineering Students' Society at McGill - ECSESS",
 		description = 'Meet the student council, get access to academic and technical resources, registration for events, and much more!',
 		canonical = 'https://ecsess.mcgilleus.ca'
 	} = $props();
+
+	let thumbnail = $state(null);
+
+	onMount(async() => {
+		thumbnail = await getFromCMS(`*[_type == "homepage"][0].councilPhoto.asset->url+"?h=628&fm=webp"`);
+	})
 </script>
 
 <svelte:head>
+	<!-- Meta Tags Generated with https://metatags.io -->
+	<!-- Primary Meta Tags -->
 	<title>{title}</title>
+	<meta name="title" content={title} />
 	<meta name="description" content={description} />
 	<link rel="canonical" href={canonical} />
+
+	<!-- Open Graph / Facebook -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={canonical} />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:image" content={thumbnail} />
+
+	<!-- X (Twitter) -->
+	<meta property="twitter:card" content="summary_large_image" />
+	<meta property="twitter:url" content={canonical} />
+	<meta property="twitter:title" content={title} />
+	<meta property="twitter:description" content={description} />
+	<meta property="twitter:image" content={thumbnail} />
 </svelte:head>