JavaScript: Canonical Mismatch

Pages that contain a different canonical link in the raw HTML to the rendered HTML after JavaScript execution.

Google can process canonicals in the rendered HTML after JavaScript has been processed, however conflicting rel=”canonical” link tags may lead to unexpected results.

How to Analyse in the SEO Spider

Enable JavaScript rendering mode via ‘Config > Spider > Rendering’ and select ‘JavaScript’ to crawl JavaScript websites.

View URLs with this issue in the ‘JavaScript’ tab and ‘Canonical Mismatch’ filter and export all URLs using the ‘Export’ button.

The ‘HTML Canonical’ column shows the canonical URL found in the original HTML before JavaScript.

The ‘Rendered HTML Canonical’ column shows the canonical URL found in the rendered HTML after JavaScript has been processed.

Read our tutorial on ‘How To Crawl JavaScript Websites‘.

What Triggers This Issue

This issue is triggered when pages have different canonical links in the raw HTML compared to the rendered HTML after JavaScript execution.

For example:

https://www.screamingfrog.co.uk/technical-seo/

Has the canonical link element in the raw HTML:

<link rel="canonical" href="https://www.screamingfrog.co.uk/technical-seo/" />

However, it then has the following canonical link element in the rendered HTML:

<link rel="canonical" href="https://www.screamingfrog.co.uk/seo/" />

After JavaScript is executed.

How To Fix

Ensure the correct canonical is in the raw HTML and rendered HTML to avoid conflicting signals to search engines.