Insert or update the canonical link

If you want to update the canonical link with the page parameter after a page change, you'll need to implement this manually. You can hook into the "twn.request.navigation.success" event to do so.

The example below takes the full current page URL, appends the current page number as a query string parameter, and updates the existing canonical link. If a canonical link doesn't already exist, it inserts one.

window["twn-starter-config"].on = window["twn-starter-config"].on || {};
window["twn-starter-config"].on["twn.request.navigation.success"] = function (event) {
  if (window["twn-starter-config"].history !== 'query')
    	return;

  const page = event.data.properties.currentpage || 1;
  const canonicalUrl = window.location.href.split('?')[0] + '?tn_p=' + page;
  let linkTag = document.querySelector('link[rel="canonical"]');
  if (linkTag) {
    linkTag.href = canonicalUrl;
  } else {
    linkTag = document.createElement('link');
    linkTag.setAttribute('rel', 'canonical');
    linkTag.href = canonicalUrl;
    document.head.appendChild(linkTag);
  }
};