Canonical URLs are incorrect and limited to a single domain

[aldeed]

Type: minor

Describe the bug
There are a couple problems I noticed with the current "canonical" URL/link implementation. Currently there is a CANONICAL_URL environment variable and this is set as the "canonical" link on every page.

• The rel="canonical" should be the canonical link for that specific page, not for the home page. This will negatively impact SEO since crawlers use this to avoid duplicates.
• The root URL should not come from CANONICAL_URL environment variable because someone may want to serve a single instance of the app on many different URLs, potentially with different canonical URLs to go with them. Instead, the root domain for the canonical URL could come from the request URL, or could be based on the request URL but potentially overridden by routing rules.

Expected behavior
The canonical URL should be page-specific and its domain should not be hard-coded.

See https://support.google.com/webmasters/answer/139066#6

If a proper fix will take time, it might actually be better to have no canonical URL for now, versus every page having the same one.

Reproduction
Go to some page other than the home page and view the <link rel="canonical" in the head. Notice that the href has the root URL rather than the canonical URL for the page you are on.

[aldeed]

@rosshadden @mikemurray Is this something that your routing work can/will fix?

[rosshadden]

@aldeed No, I do not see the routing work as related to this.

[aldeed]

If we assume the domain of the canonical URL should always match the domain on which you visited the page, then I don't think routing need be involved. If we need to retrieve a canonical domain somewhere, then it is related to routing, but maybe only tangentially.

[ghost]

In attempting to workaround this problem for product pages in version 3.1.0 of the Storefront I've added:

To product JS near imports at top:

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

Then in render method:

const canonicalUrl = `${publicRuntimeConfig.canonicalUrl}/product/${product && product.slug}`

Then added link inside the Helmet component inside the return statement of product page like:

<Helmet
  title={`${product && product.title} | ${shop && shop.name}`}
  meta={[{ name: "description", content: product && product.description }]}
  link={[{ rel: "canonical", href: canonicalUrl }]}
  script={[{ type: "application/ld+json", innerHTML: this.buildJSONLd() }]}
/>

Oddly this results in a duplicate link tag with rel="canonical" so I'm operating under the presumption (a) there may be a bug in Helmet v5 for updating the canonical link tags already inserted by _document.js and (b) a second canonical URL defined in a page head will win when the crawler next parses the document.

I'll report back here with my findings on the workaround for 3.1.0.

UPDATE 2020-10-15:

Above change indeed resolves the duplicate canonical URLs for products as reported by Google as shown here:

Expand to view Duplicate Pages from Google Search Console

The fix to canonical URLs shows this issue is also occurring for Tag pages, which also incorrectly show the domain root as the canonical instead of the actual page URL—a similar fix to that described above can be applied. Note, however, making this change, while it leads to more semantic pages, does not seem to have had much immediate effect on rankings in Google.

[ghost]

Note for future reference this issue by way of use of CANONICAL_URL is related to #690