feat(frontend): prerender canonical URL for subpages

[peterpeterparker]

Motivation

I'm not entirely sure this is a strict requirement for a SPA, even if the pages are prerendered, since each page is behind a login screen and ultimately rendered with JavaScript. However, while reviewing a PR in Internet Identity, it crossed my mind that it might be more accurate to use a canonical URL - and correspondingly an og:url - that reflects each subpage’s actual path rather than always pointing to the root. So, this PR introduces a similar change to what I just implemented for Juno (PR).

Test

I tested the change locally, but it definitely needs to be verified the next time you deploy to any environment.

Notes

I'm really not certain this is necessary, so feel free to reject and close the PR if you don’t think it adds value.

Changes

• Added a script to update the canonical and og:url after build
• Chained the script in the post-process step before calculating the CSP

[AntonioVentilii]

Thank you! I think it is very worth merging and testing "on the field"

[AntonioVentilii]

FOLLOW-UP

On this day I tested the following:

A robot/crawler (or a direct HTTP request) sees the canonical and og:url on the deep URLs you mentioned.

% curl -sL https://oisy.com/explore/ \
  | sed -n '1,200p' \
  | grep -E 'canonical|og:url'

                <link href="https://oisy.com/explore/" rel="canonical" />
                <meta content="https://oisy.com/explore/" property="og:url" />
                
% curl -sL "https://oisy.com/transactions/?token=0xdAC17F958D2ee523a2206206994597C13D831ec7&network=ETH" \
  | sed -n '1,200p' \
  | grep -E 'canonical|og:url'

                <link href="https://oisy.com/transactions/" rel="canonical" />
                <meta content="https://oisy.com/transactions/" property="og:url" />

% curl -sL "https://oisy.com/nfts/?nft=iivkv-pakor-uwiaa-aaaaa-buaph-yaqca-aad7b-q&collection=ol244-naaaa-aaaag-qb47a-cai&network=ICP" \
  | sed -n '1,200p' \
  | grep -E 'canonical|og:url'

                <link href="https://oisy.com/nfts/" rel="canonical" />
                <meta content="https://oisy.com/nfts/" property="og:url" />

True prerendering per route

% curl -sL https://oisy.com/ | shasum
curl -sL https://oisy.com/explore/ | shasum

07b6b9d014dbca189b8f49a760af3311e78bf04a  -
f19d4cccd00195945eaa326dc52e5ee00d8e7150  -

Verify in search console

I could verify in https://search.google.com/search-console since I am not the owner.

The tags are present for crawlers too

% curl -A "facebookexternalhit/1.1" -sL https://oisy.com/explore/
| grep -E 'canonical|og:url'

            <link href="https://oisy.com/explore/" rel="canonical" />
            <meta content="https://oisy.com/explore/" property="og:url" />