Canonical via JavaScript, tested with four URLs

Why we ran the test

At Google I/O in May 2018 there was a talk on JavaScript SEO. It said that Google does not look for canonical tags in the rendered HTML. That did not match our test with Google Tag Manager from the year before, where a canonical added via Tag Manager had worked.

That earlier finding was based on a single URL, though. With canonicals, this is a known problem. A canonical only works between very similar pages, and Google often canonicalizes those even without a canonical. A single hit can therefore be chance. So the day after the talk we set up the test again, with more pages and a control group.

Our question was how Google treats websites that depend on client-side JavaScript. Whether you should set canonicals via JavaScript is a different question. The answer to that comes further down.

Test setup

On 11 May 2018, Google Tag Manager added a canonical pointing to the blog overview on four pages. The source code of these pages contained no canonical pointing to the overview. The script looked roughly like this.

The control pages were meant to show whether Google would merge such pages into the overview even without our canonical. If that had happened, the test would have proved nothing. At the time, we checked the status with the info: search query, which showed the URL Google had chosen.

Result

All four test pages ended up on the target of the canonical added via JavaScript. As far as we know, none of these pages had ever been canonicalized that way before.

Requesting indexing barely helped

On 11 May we used “Fetch and render” with “Request indexing” in Search Console for all test pages. On 22 May we did the same for the blog overviews with all linked pages, and on 1 June once more for the three pages that had not been canonicalized by then. For new URLs this usually works almost immediately. Here the first request had no visible effect. The request on 1 June may have triggered the changes on 3 and 4 June. Perhaps Google also has to render a page several times before it picks up an inserted canonical.

Search Console showed something else

In the index coverage report of the time, the canonicalized test pages were listed as “Submitted URL not selected as canonical”. We would have expected “Alternate page with proper canonical tag”. Our explanation was that the report followed the official rules. It overlooked canonicals that only appear in the rendered HTML, even though Search used them.

Our conclusion

• Google used canonicals that only appeared in the rendered HTML, contrary to what the talk said.
• For some pages, it took more than three weeks for the canonical to be picked up.
• “Request indexing” did not noticeably speed up rendering.
• Search Console ignored the inserted canonicals in its reports.
• The statement in the talk may have been based on a misunderstanding or a mistake.

What has changed since then?

Google now describes this behavior itself. According to its JavaScript SEO documentation, Google Search picks up a canonical inserted via JavaScript during rendering. It is still not recommended. Google advises setting the canonical in the HTML. If you set it via JavaScript, it should name the same URL as the canonical in the source code. If that is not possible, leave it out of the source code. In the end, the page may only contain one canonical. According to Google, multiple or conflicting canonicals lead to unexpected results.

The tools of that time no longer exist in that form. Today, the URL Inspection tool in Search Console shows the canonical URL Google has selected, next to the canonical you declared. The index coverage report is now called “Page indexing”. We have not re-tested how it handles canonicals from the rendered HTML today. According to Vercel (December 2024), AI crawlers such as GPTBot and ClaudeBot do not execute JavaScript and do not see such a canonical at all. The basics are covered in the canonical tag guide.

How to check your canonicals

1. Set the canonical in the source code, with an absolute URL and only once in the head.
2. Check whether a script, a plugin or a tag in Tag Manager adds a second canonical or changes the existing one.
3. Compare the source code and the rendered HTML. The following script shows both values.
4. Use URL Inspection to check which URL Google has selected as canonical.

Common mistakes

• The source code contains a self-referencing canonical, and JavaScript changes it to a different URL.
• A tag in Tag Manager adds a canonical, and the old one stays in place.
• A script closes the head too early. The canonical then ends up in the body and does not count.
• A result is judged after a few days, even though Google needs longer to render.

FAQ