What causes conflicts between your canonical tags in raw HTML and rendered output?

The raw HTML refers to the initial source code sent by the server, the one you see in 'View Page Source'. The rendered HTML, on the other hand, is the result after JavaScript execution — this is what Googlebot sees after its rendering phase.

A conflict occurs when the raw HTML contains a <link rel="canonical" href="https://example.com/page-a"> tag, and then JavaScript injects or modifies this tag to point to https://example.com/page-b. Googlebot receives two contradictory directives for the same page.

Modern architectures heavily rely on JavaScript frameworks — React, Vue, Angular — that manipulate the DOM after loading. A CMS might insert a canonical tag on the server side while an application script dynamically rewrites it based on navigation or application state.

A/B testing, personalization modules, or headless content management systems exacerbate the phenomenon. A developer adds a canonical tag through a React component without checking if the server template already injects a different one — and voila, the conflict arises.

Google must make a decision. It generally prioritizes the rendered HTML, but not always — and that's where it gets tricky. If the rendering partially fails, if JavaScript takes too long to execute, or if Googlebot crawls the page before rendering is complete, it may fall back on the raw HTML.

The result: your page might be indexed under a canonical URL you didn’t intend. Worse, if conflicts are frequent, Google may lose trust in your canonical signals and apply its own heuristics — which dilutes SEO control.

• Raw HTML = initial source code sent by the server, without JavaScript execution
• Rendered HTML = code after full JavaScript execution, what Googlebot sees after rendering
• Conflict = two different canonical tags for the same page, one in each version
• Impact = unpredictable indexing, dilution of PageRank, loss of control over the canonical URL
• Prioritization = Google favors rendered content, but may switch to raw in case of technical issues

Absolutely. Sites are regularly observed being indexed under unexpected URLs while the canonical tags appear correct on the surface. Digging deeper reveals that the raw HTML and rendered HTML diverge — and Google has made a choice that aligns with neither but with its own interpretation.

What’s frustrating is that Google does not precisely document how it resolves these conflicts. [To verify]: the exact weighting between raw HTML and rendered output remains unclear. We know it favors rendered content, but to what extent? What are the latency or error thresholds that trigger a fallback to raw? No official data clarifies this.

Google refers to 'indexing issues', but in practice, it’s not binary. A page generally remains indexable — it doesn’t simply disappear. The real concern is that the chosen canonical URL may not be the one you want.

This fragments signals: if Google indexes an unexpected URL variant, backlinks, internal PageRank, and ranking metrics become scattered. You might intend to push /product-a, but Google consolidates on /product-a?utm_source=test — and your internal linking strategy falls apart.

E-commerce sites with dynamic product facets are particularly exposed. A JavaScript filter rewrites the canonical to point to a category URL — while the server already sends another canonical. Media sites that personalize content based on user profiles also encounter this issue.

Headless or SPA (Single Page Application) architectures amplify the risk: all critical SEO content is generated client-side, and a synchronization oversight between SSR (Server-Side Rendering) and CSR (Client-Side Rendering) creates conflicts. If your tech stack relies on deferred rendering, this is a priority audit point.