Search Engine Optimization

src/components/SeoMetaTags.svelte

@@ -0,0 +1,13 @@
+<script>
+	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();
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<link rel="canonical" href={canonical} />
+</svelte:head>

src/routes/+page.server.ts

@@ -23,7 +23,7 @@ const sponsorQuery = `*[_type=="sponsors"]{
     "logo": logo.asset->url+"?h=100&fm=webp"
 }`;
 
-export const load = async () => {
+export const load = async ({url}) => {
 	/**
 	 * @description Response data type based on the `homepageQuery` above.
 	 * Note that `description` is a rich/portable text type
@@ -37,6 +37,7 @@ export const load = async () => {
 		councilPhoto: homepageResp.councilPhoto,
 		faqs: homepageResp.faqs,
 		allOHs: officeHourResp,
-		sponsors: sponsorsResp
+		sponsors: sponsorsResp,
+		canonical: url.href
 	};
 };

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import RichText from 'components/RichText.svelte';
 	import OhSchedule from 'components/OHSchedule.svelte';
 	import Link from 'components/Link.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 	import { fade } from 'svelte/transition';
 
 	/** loading things from the server side */
@@ -14,7 +15,8 @@
 	let progress = 63.33;
 </script>
 
-<title> McGill ECSESS </title>
+<!-- SEO Meta header tags. Root page can use default values -->
+<SeoMetaTags canonical={data.canonical} />
 
 <!-- ECSESS Introduction -->
 <Section>
@@ -23,7 +25,9 @@
 			<div class="flex h-1/2 flex-col place-content-center text-center">
 				<p>
 					{#each 'We are ECSESS!' as char, i}
-						<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }}>{char}</span>
+						<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }}
+							>{char}</span
+						>
 					{/each}
 				</p>
 				<div class="p-4">

src/routes/council/+page.server.ts

@@ -17,10 +17,12 @@ const councilGoofyPicQuery = `*[_type == "homepage"]{
   "url": councilGoofyPic.asset->url+"?h=1200&fm=webp" 
 }[0]`;
 
-export const load = async () => {
+export const load = async ({ url }) => {
 	let councilMembers: CouncilMember[] = await getFromCMS(councilQuery);
+
 	return {
 		members: councilMembers,
-		councilGoofyPic: await getFromCMS(councilGoofyPicQuery)
+		councilGoofyPic: await getFromCMS(councilGoofyPicQuery),
+		canonical: url.href
 	};
 };

src/routes/council/+page.svelte

@@ -5,6 +5,7 @@
 	import type { CouncilMember } from '$lib/schemas';
 	import { fly } from 'svelte/transition';
 	import Button from 'components/Button.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 
 	let { data } = $props();
 
@@ -38,7 +39,12 @@
 	}
 </script>
 
-<title> ECSESS council </title>
+<SeoMetaTags
+	title="Meet the ECSESS student council members!"
+	description="Greetings from ECSESS student council!"
+	canonical={data.canonical}
+/>
+
 <Section>
 	<div class="flex flex-col place-items-center">
 		<p class="page-title">Meet the council!</p>

src/routes/events/+page.server.ts

@@ -10,8 +10,9 @@ const eventQuery = `*[_type == "events"]{
   "lastUpdated": _updatedAt,
 }`;
 
-export const load = async () => {  
+export const load = async ({ url }) => {
 	return {
 		events: await getFromCMS(eventQuery),
+		canonical: url.href
 	};
 };

src/routes/events/+page.svelte

@@ -1,10 +1,16 @@
 <script>
 	import { PortableText } from '@portabletext/svelte';
 	import Section from 'components/Section.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 	let { data } = $props();
 </script>
 
-<title> ECSESS Events </title>
+
+<SeoMetaTags
+	title="Events by ECSESS"
+	description="Checkout our events! ECSESS organizes academic events, professional & social networkings, technical workshops, and more!"
+	canonical={data.canonical}
+/>
 
 <Section>
 	<p class="page-title">Events</p>

src/routes/join/+page.server.ts

@@ -0,0 +1,5 @@
+export const load = async ({ url }) => {
+  return {
+    canonical: url.href
+  };
+};

src/routes/join/+page.svelte

@@ -1,19 +1,24 @@
 <script>
 	import ResourceCard from 'components/ResourceCard.svelte';
 	import Section from 'components/Section.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 	let isElectionTime = $state(true);
+	let { data } = $props();
 </script>
 
-<title> Join ECSESS !!! </title>
+<SeoMetaTags
+	title="Join the ECSESS student council!!!"
+	description="Learn how you can join the ECSESS council and make an impact on the ECSE student community at McGill University!"
+	canonical={data.canonical}
+/>
 
 <Section>
 	<p class="page-title">Want to join ECSESS Council?</p>
+	<p>Come back around March for application period!</p>
 
 	{#if isElectionTime}
-    <ResourceCard title="Involvement Booklet">
+		<ResourceCard title="Involvement Booklet">
-        A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
+			A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
-    </ResourceCard>
+		</ResourceCard>
-    {:else}
+	{:else}{/if}
-		<p>Come back around March for application period!</p>
-	{/if}
 </Section>

src/routes/r/[shortname]/+page.svelte

@@ -3,6 +3,8 @@
 	let { data } = $props();
 </script>
 
+<title> Hmm... you're not supposed to be here :/ </title>
+
 <Section>
 	<p class="page-title">Can't redirect you to <code>"r/{data.shortname}"</code>!</p>
 	<hr class="border-2 w-1/2">

src/routes/resources/+page.server.ts

@@ -8,9 +8,10 @@ const query = `*[_type == "resources"]{
   description,
 }`;
 
-export const load = async () => {
+export const load = async ({ url }) => {
 	const resources: Resource[] = await getFromCMS(query);
 	return {
-		resources: resources
+		resources: resources,
+		canonical: url.href
 	};
 };

src/routes/resources/+page.svelte

@@ -1,19 +1,24 @@
 <script>
 	import ResourceCard from 'components/ResourceCard.svelte';
 	import Section from 'components/Section.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 	let { data } = $props();
 </script>
 
-<title> Resources </title>
+<SeoMetaTags
+	title="ECSESS Resources - Academic, Technical, Involvement, etc."
+	description="ECSESS resource hub for everything relating to academic, technical, involvement, sustainablity, equity, campus life, and more!"
+	canonical={data.canonical}
+/>
 
 <Section>
 	<p class="page-title">Resources</p>
 
 	<div class="flex flex-col gap-8">
 		{#each data.resources as re}
-		<ResourceCard title={re.title} link={re.url}>
+			<ResourceCard title={re.title} link={re.url}>
-			{re.description}
+				{re.description}
-		</ResourceCard>
+			</ResourceCard>
 		{/each}
 	</div>
 </Section>