Add the website root to canonical URLs

Author: v--

code/common/constants/url.ts

@@ -1,3 +1,4 @@
+export const WEBSITE_CANONICAL_URL = 'https://ivasilev.net'
 export const CC0_URL = 'https://creativecommons.org/public-domain/cc0/'
 export const EMAIL_URL = 'mailto:ianis@ivasilev.net'
 export const TELEGRAM_URL = 'https://t.me/ianis_vasilev'

code/common/router.ts

@@ -27,6 +27,7 @@ export async function router(urlPath: UrlPath, env: WebsiteEnvironment): Promise
       pageData: undefined,
       preload: [{ contentType: 'image', href: '/images/home_page_photo.jpg' }],
       urlPath,
+      canonicalUrlPath: urlPath.clearQueryString(),
     }
   }
 
@@ -68,7 +69,7 @@ export async function router(urlPath: UrlPath, env: WebsiteEnvironment): Promise
       pageDataHydrationTag: 'pacman',
       pageData: await env.services.pacman.fetchRepository(),
       urlPath,
-      canonicalUrlPath: urlPath.pickQueryString(),
+      canonicalUrlPath: urlPath.clearQueryString(),
     }
   }
 
@@ -86,7 +87,7 @@ export async function router(urlPath: UrlPath, env: WebsiteEnvironment): Promise
       page: playgroundPage,
       pageData: undefined,
       urlPath,
-      canonicalUrlPath: urlPath.pickQueryString(),
+      canonicalUrlPath: urlPath.clearQueryString(),
     }
   }
 
@@ -104,7 +105,7 @@ export async function router(urlPath: UrlPath, env: WebsiteEnvironment): Promise
         ogImageName: 'playground',
         pageData: undefined,
         urlPath,
-        canonicalUrlPath: urlPath.pickQueryString(),
+        canonicalUrlPath: urlPath.clearQueryString(),
       }
 
       if (env.isContentDynamic()) {

code/common/support/url_path.ts

@@ -52,6 +52,10 @@ export class UrlPath {
     )
   }
 
+  clearQueryString() {
+    return this.pickQueryString()
+  }
+
   getQueryString() {
     return Array.from(this.query.entries())
       .map(([key, value]) => `${key}=${value.replace('&', '%24')}`)

code/server/components/root.ts

@@ -1,5 +1,6 @@
 import { body } from '../../common/components/body.ts'
 import { title } from '../../common/components/title.ts'
+import { WEBSITE_CANONICAL_URL } from '../../common/constants/url.ts'
 import { type WebsiteEnvironment } from '../../common/environment.ts'
 import { bcp47Encode } from '../../common/languages.ts'
 import { map } from '../../common/observable.ts'
@@ -30,7 +31,7 @@ export function root({ pageState, rehydrationData }: IRootState, env: WebsiteEnv
       ),
       c.html('link', { rel: 'icon', type: 'image/x-icon', href: '/images/favicon.png' }),
       c.html('link', { rel: 'stylesheet', href: '/styles/core.css' }),
-      pageState.canonicalUrlPath && c.html('link', { rel: 'canonical', href: pageState.canonicalUrlPath.toString() }),
+      pageState.canonicalUrlPath && c.html('link', { rel: 'canonical', href: WEBSITE_CANONICAL_URL + pageState.canonicalUrlPath.toString() }),
       c.html('script', { id: 'rehydrationData', type: 'application/json', text: JSON.stringify(rehydrationData) }),
       c.html('script', { type: 'module', src: '/code/client/core/index.js', defer: true }),
       // This "JavaScript-only" hack is based on https://stackoverflow.com/a/431554/2756776

code/server/meta/open_graph.ts

@@ -6,6 +6,7 @@
  */
 
 import { type IMetaTag } from './types.ts'
+import { WEBSITE_CANONICAL_URL } from '../../common/constants/url.ts'
 import { WEBSITE_LANGUAGE_IDS, bcp47Encode } from '../../common/languages.ts'
 import { type GetText } from '../../common/translation.ts'
 import { type IWebsitePageState } from '../../common/types/page.ts'
@@ -26,7 +27,7 @@ export function* iterOpenGraphTags(gettext: GetText, pageState: IWebsitePageStat
   if (pageState.canonicalUrlPath) {
     yield {
       name: 'og:url',
-      content: pageState.canonicalUrlPath.toString(),
+      content: WEBSITE_CANONICAL_URL + pageState.canonicalUrlPath.toString(),
     }
   }