Search Engine Optimization

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}>
-			{re.description}
-		</ResourceCard>
+			<ResourceCard title={re.title} link={re.url}>
+				{re.description}
+			</ResourceCard>
 		{/each}
 	</div>
 </Section>