Canonical changes after JS: how to fix it
A canonical that JavaScript rewrites after load can confuse Google. Find pages whose canonical differs before and after render, and align them.
What it means
The canonical URL in the raw HTML differs from the canonical URL after JavaScript renders. This usually happens when a framework sets the canonical tag server-side, then a client-side script or router updates document.title or the canonical meta tag after hydration.
Why it matters
Googlebot may index the wrong URL or consolidate signals to the wrong page, since it parses the canonical from raw HTML during crawling. If the rendered canonical points to a different page, internal link equity and structured data can get misaligned, and AI agents that scrape the final DOM may read conflicting versions.
How to fix it
- Set canonical as a server-rendered <link rel="canonical"> in the initial HTML response, not injected by JS.
- If you must update it client-side, ensure the JS injection happens before the page finishes rendering and that the value matches the server version.
- Verify via URL Inspection → Rendered HTML that the canonical tag in the final DOM matches the one in the source HTML.
Example
<!-- Raw HTML -->
<link rel="canonical" href="https://example.com/page"><!-- After JS renders -->
<link rel="canonical" href="https://example.com/other">JS rewrote the canonical after load. Google may honor either version — set the final canonical in the server HTML and don't let client JS change it.
When it's not a problem
This is fine when the canonical is set correctly in the raw HTML and the JS only updates it to the same value — a harmless no-op. It's also acceptable if the JS sets the canonical to a different but valid URL and the page is intentionally a client-side redirect.
How Crawlinx detects it
We compare the rel=canonical in the raw HTML against the value after JavaScript renders. When they differ, we report both — a canonical that flips at render time gives Google conflicting signals.
How common is it?
Not yet observed in our audit sample. We publish this explainer because the check runs on every crawl; once an audited site trips it, this page will break the issue down by platform, gatekeeper, vertical and country.
Related guides
Audit your own site — free
157 checks, internal PageRank, render-diff. No signup, results in ~30s.