app/buildPublicUrl.ts

@@ -4,7 +4,9 @@ export function buildPublicUrl(pageContext: PageContext, resource: string) {
 	const { baseUrl } = pageContext;
 	const url = new URL(
 		resource,
-		process.env.NODE_ENV === "production" ? "https://memento-dev.fr" : baseUrl,
+		process.env.NODE_ENV === "production"
+			? "https://memento-dev.fr"
+			: baseUrl || "http://localhost:5500",
 	).toString();
 
 	return url;

app/pages/+Head.tsx

@@ -1,13 +1,23 @@
+import { usePageContext } from "vike-solid/usePageContext";
 import blurCyanImage from "@/images/blur-cyan.webp";
+import { buildPublicUrl } from "@/buildPublicUrl";
 import logoUrl from "@/assets/logo.svg";
 
 // https://vike.dev/Head
 
 export default function HeadDefault() {
+	const pageContext = usePageContext();
+
+	const getCanonicalUrl = () => {
+		return buildPublicUrl(pageContext, pageContext.urlParsed.pathname);
+	};
+
 	return (
 		<>
 			<link rel="icon" href={logoUrl} />
 
+			<link rel="canonical" href={getCanonicalUrl()} />
+
 			<script
 				defer
 				src="https://cloud.umami.is/script.js"

app/pages/+onPageTransitionEnd.ts

@@ -1,8 +1,38 @@
-import type { OnPageTransitionEndAsync } from "vike/types";
+import type { OnPageTransitionEndAsync, PageContext } from "vike/types";
 
+import { buildPublicUrl } from "@/buildPublicUrl";
 import NProgress from "nprogress";
 
-export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
+export const onPageTransitionEnd: OnPageTransitionEndAsync = async (
+	pageContext,
+) => {
 	NProgress.done();
 	NProgress.remove();
+
+	updateCanonicalTag(pageContext);
+};
+
+const updateCanonicalTag = (pageContext: PageContext) => {
+	const canonicalTag = findOrCreateCanonicalTag();
+	const canonicalUrl = buildPublicUrl(
+		pageContext,
+		pageContext.urlParsed.pathname,
+	);
+
+	canonicalTag.href = canonicalUrl;
+};
+
+const findOrCreateCanonicalTag = () => {
+	const head = document.head;
+	let canonicalTag: HTMLLinkElement | null = head.querySelector(
+		"link[rel=canonical]",
+	);
+	if (canonicalTag) return canonicalTag;
+
+	canonicalTag = document.createElement("link");
+	canonicalTag.rel = "canonical";
+
+	document.head.appendChild(canonicalTag);
+
+	return canonicalTag;
 };