Gatsby: [gatsby-plugin-canonical-urls] <link rel="canonical"> doesn't update on navigation to another page

[brandonmp]

gif below of effect on gatsbyjs.org

Navigating from one page to another leaves the former page's canonical tag intact. This is probably bad for google bot, but also for libs like segment.com's snippet, which tracks pageviews on the value of the canonical tag.

[KyleAMathews]

Hmmm yeah.

Perhaps we could add a gatsby-browser.js that checks if react-helmet is available and then update the canonical definition there.

Interested in trying that?

try {
  const Helmet = require(`react-helmet`)
} catch (e) {
  // ignore
}

exports.onRouteUpdate = () => // Update canonical setting here

[brandonmp]

ah sry, I have a a few gatsby contributions on my to do list already :)

i'd add this one but the workaround is pretty straightforward in my case. In my layout/index.js I just add this:

{
                props.currentPathname &&
                    <link
                        rel="canonical"
                        href={`https://www.admitbrain.com${props.currentPathname}`}
                    />
}

Is that a sufficient workaround do you think? or is there a problem w/ it I'm missing?

[KyleAMathews]

Perhaps better to use props.layout.pathname thought but otherwise looks great!

[arielger]

I think that you meant props.location.pathname.

I will try to fix this and send a PR to update the route on transitions

[arielger]

Not sure how to update the canonical url in the exported onRouteUpdate following the react-helmet advice. I don't have access to the setHeadComponents method in that function.

We could try changing the href attribute using plain js:

exports.onRouteUpdate = ({ location }) => {
  const domElem = document.querySelector(`link[rel='canonical']`)
  domElem.setAttribute(`href`, `${window.location.origin}${location.pathname}`)
}

What do you think?

[benjaminhoffman]

@arielger [side bar] AFAIK, Segment does _not_ track page views based on the canonical URL. It tracks pageviews based on analytics.page() firing. What it uses the canonical URL for is set the url property in a page call according to the following logic: _"defaults to a canonical url, if available, and falls back to document.location.href."_

source: https://segment.com/docs/sources/website/analytics.js/

But please correct me if I'm wrong!

[arielger]

Hey @benjaminhoffman, not sure of how the Segment library works but I guess that we nonetheless
should fix this for SEO related issues.