Merge pull request #38 from mcgill-ecsess/SEO

Search Engine Optimization


Co-authored-by: Antoine Phan <antoine.phan@mail.mcgill.ca>

src/components/SeoMetaTags.svelte

@@ -0,0 +1,32 @@
+<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();
+
+	let thumbnail = "https://cdn.sanity.io/images/vmtsvpe2/production/5d68504038cc692805dc5e51af83adedfefde442-5304x3443.jpg?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>

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 */
@@ -11,10 +12,11 @@
 
 	// Temporary progress bar. Update the value below!
 	import { Progress } from '@skeletonlabs/skeleton-svelte';
-	let progress = 63.33;
+	let progress = 80;
 </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

@@ -9,17 +9,19 @@ const eventQuery = `*[_type == "events"]{
   description,
   reglink, 
   paylink,
-  "thumbnail": thumbnail.asset->url+"?h=700&fm=webp", 
+  "thumbnail": thumbnail.asset->url+"?h=800&fm=webp", 
   "lastUpdated": _updatedAt,
 }`;
 
-export const load = async () => {
+export const load = async ({ url }) => {
 	let listOfEvents: EventPost[] = await getFromCMS(eventQuery);
-	//TODO: Why is this mad?
+
 	let sortedEvents = listOfEvents.sort(
 		(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
 	);
+
 	return {
-		events: sortedEvents
+		events: sortedEvents,
+		canonical: url.href
 	};
 };

src/routes/events/+page.svelte

@@ -1,18 +1,30 @@
 <script lang="ts">
 	import Section from 'components/Section.svelte';
+	import SeoMetaTags from 'components/SeoMetaTags.svelte';
+	let { data } = $props();
+
 	import EventTabControl from 'components/EventTabControl.svelte';
 	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import EventTabPanel from 'components/EventTabPanel.svelte';
 	import type { EventPost } from '$lib/schemas';
 
-	let { data } = $props();
 	let events: EventPost[] = data.events ?? [];
 	let group = $state('allEvents');
 </script>
 
+<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>
-	<Tabs value={group} onValueChange={(e) => (group = e.value)} listClasses="flex-wrap place-content-center">
+	<Tabs
+		value={group}
+		onValueChange={(e) => (group = e.value)}
+		listClasses="flex-wrap place-content-center"
+	>
 		{#snippet list()}
 			<EventTabControl value="allEvents">All Events</EventTabControl>
 			<EventTabControl value="academic">Academic</EventTabControl>

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">
 			A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
 		</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,10 +1,15 @@
 <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, sustainability, equity, campus life, and more!"
+	canonical={data.canonical}
+/>
 
 <Section>
 	<p class="page-title">Resources</p>