a

app/root.jsx

@@ -17,6 +17,7 @@ import * as Toast from '@radix-ui/react-toast';
 import env from "./environment.server.js";
 import WebsocketContext from "./components/websocket-context.jsx";
 import useWebSocket from 'react-use-websocket';
+import { useLocation } from "@remix-run/react";
 
 export const links = () => [
   { rel: "stylesheet", href: radixStyles },
@@ -38,6 +39,8 @@ export const loader = async ({ request }) => {
 function App() {
   const data = useLoaderData();
 
+  const location = useLocation();
+
   const { lastJsonMessage, sendJsonMessage } = useWebSocket(data.wsUrl, {
     heartbeat: true,
     onOpen: () => {
@@ -60,6 +63,7 @@ function App() {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <meta name="darkreader-lock" />
+        <link rel="canonical" href={`https://www.wikid.app${location.pathname}`}/>
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
         <link rel="icon" type="image/png" sizes="512x512" href="/android-icon-512x512.png" />