feat(seo): revamp SEO

Author: WarningImHack3r

src/lib/config.ts

@@ -1,19 +1,22 @@
 <script lang="ts">
 	import "../app.css";
-	import { onMount } from "svelte";
 	import { scrollY } from "svelte/reactivity/window";
 	import { dev } from "$app/environment";
+	import { page } from "$app/state";
+	import { deepMerge, MetaTags } from "svelte-meta-tags";
 	import { ChevronDown, type Icon, Monitor, Moon, Sun, X } from "@lucide/svelte";
 	import { ProgressBar } from "@prgm/sveltekit-progress-bar";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { news } from "$lib/news/news.json";
-	import { FAVICON_URL } from "$lib/config";
 	import { cn } from "$lib/utils";
 	import ScreenSize from "$lib/components/ScreenSize.svelte";
 	import { buttonVariants, Button } from "$lib/components/ui/button";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 
-	let { children } = $props();
+	let { data, children } = $props();
+
+	// SEO
+	let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
 
 	// Theme selector
 	type Theme = {
@@ -48,7 +51,7 @@
 		return JSON.parse(localStorage.getItem(closedNewsKey) ?? "[]") as (typeof news)[number]["id"][];
 	}
 
-	onMount(() => {
+	$effect(() => {
 		// Theme
 		theme =
 			"mode-watcher-mode" in localStorage
@@ -69,6 +72,7 @@
 {/if}
 <ModeWatcher />
 <ProgressBar class="text-primary" zIndex={100} />
+<MetaTags {...metaTags} />
 
 <header
 	class={[
@@ -89,7 +93,11 @@
 		<div class="mx-auto flex h-14 w-full items-center px-8">
 			<!-- Left part -->
 			<a href="/" class="flex items-center gap-2">
-				<img src={FAVICON_URL} alt="Svelte" class="size-8" />
+				<img
+					src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg"
+					alt="Svelte"
+					class="size-8"
+				/>
 				<span class="hidden text-xl font-semibold xs:inline-block">
 					Svelte
 					<span class="text-primary">Changelog</span>

src/routes/+layout.svelte

@@ -1,3 +1,42 @@
 import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+import type { MetaTagsProps } from "svelte-meta-tags";
 
 injectSpeedInsights();
+
+const siteName = "Svelte Changelog";
+
+export function load({ url, data }) {
+	return {
+		...data,
+		siteName,
+		baseMetaTags: Object.freeze({
+			title: "Loading...",
+			titleTemplate: `%s | ${siteName}`,
+			description: "A nice UI to stay up-to-date with Svelte releases",
+			canonical: new URL(url.pathname, url.origin).href,
+			openGraph: {
+				type: "website",
+				url: new URL(url.pathname, url.origin).href,
+				locale: "en_US",
+				siteName,
+				images: [
+					{
+						url: "https://svelte.dev/favicon.png",
+						width: 128,
+						height: 128,
+						alt: "Svelte logo"
+					}
+				]
+			},
+			twitter: {
+				creator: "@probably_coding",
+				cardType: "summary" as const,
+				description: "A nice UI to stay up-to-date with Svelte releases"
+			},
+			keywords: ["svelte", "changelog", "svelte changelog", "sveltekit"],
+			additionalRobotsProps: {
+				noarchive: true
+			}
+		}) satisfies MetaTagsProps
+	};
+}

src/routes/+layout.ts

@@ -11,12 +11,6 @@
 	);
 </script>
 
-<svelte:head>
-	<title>
-		Detail of {data.itemMetadata.org}/{data.itemMetadata.repo}#{data.itemMetadata.id} | Svelte Changelog
-	</title>
-</svelte:head>
-
 <PageRenderer
 	metadata={{
 		org: data.itemMetadata.org,

src/routes/[pullOrIssue=poi]/[org]/[repo]/[id=number]/+page.svelte

@@ -0,0 +1,10 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
+
+export function load({ data }) {
+	return {
+		...data,
+		pageMetaTags: Object.freeze({
+			title: `Detail of ${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`
+		}) satisfies MetaTagsProps
+	};
+}

src/routes/[pullOrIssue=poi]/[org]/[repo]/[id=number]/+page.ts

@@ -0,0 +1,10 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
+
+export function load({ data }) {
+	return {
+		...data,
+		pageMetaTags: Object.freeze({
+			title: data.currentPackage.pkg.name
+		}) satisfies MetaTagsProps
+	};
+}

src/routes/package/[...package]/+page.ts

@@ -0,0 +1,9 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
+
+export function load() {
+	return {
+		pageMetaTags: Object.freeze({
+			title: "All Packages"
+		}) satisfies MetaTagsProps
+	};
+}