How to fix non self canonical on Gatsby

Steps for Gatsby

1. Centralize your site origin in gatsby-config.js under siteMetadata.siteUrl (e.g. `siteUrl: 'https://www.example.com'`) so every canonical is derived from one source of truth.
2. Replace any ad-hoc <Helmet> canonical tags with Gatsby's built-in Head API: export a named `Head` function from every page file (pages/ and templates/) that constructs the canonical from `siteUrl + location.pathname`, stripping trailing slashes consistently.
3. In each page template (e.g. src/templates/product.jsx, src/templates/collection.jsx) destructure `pageContext` and `location` props inside the `Head` export, build `canonicalUrl` as `siteUrl + location.pathname` (never from a CMS field unless you explicitly validate it matches the rendered URL), then render `<link rel='canonical' href={canonicalUrl} />`.
4. For paginated routes (e.g. /collection/shoes?page=2) strip the query string from the canonical so it always points to the base paginated URL or page-1, whichever is your chosen strategy — use `location.pathname` only, not `location.search`.
5. Add a Gatsby SSR/Browser audit helper: in gatsby-ssr.jsx implement `onRenderBody` to log any page where the injected canonical href does NOT start with siteUrl, catching cross-origin canonicals at build time.
6. Run `gatsby build && gatsby serve` and spider the output with a tool (e.g. `npx @sitespeed.io/sitespeed` or a custom script) to assert every `<link rel='canonical'>` matches its own page URL before deploying.

What is non self canonical?

A canonical tag is a small snippet of HTML code, placed in the `<head>` of a page, that tells Google "this is the definitive version of this content." A self-canonical means the tag points back to the page itself — the norm for any page you want indexed. A non-self-canonical means the tag points to a different URL, effectively telling Google: "don't index me, index that other page instead." This is sometimes intentional (e.g., a filtered product-listing page deferring to the main category page), but when it happens by accident, Google will ignore the page entirely and index the wrong destination instead.

When a page has a non-self-canonical by mistake, Google treats it as a duplicate and removes it from search results — meaning all the organic traffic that page could earn is lost. If important product, category, or landing pages are accidentally canonicalized to the wrong URL, your store effectively disappears from Google for those queries. Even if Google doesn't fully honour the tag, it still dilutes your crawl budget and creates confusing ranking signals. Fixing accidental non-self-canonicals can restore lost rankings quickly, while verifying intentional ones ensures you're not accidentally de-indexing pages you need.

See the complete Non self canonical guide for every platform and the full background.