top of page
  • Writer's pictureBrent Payne

Rendered canonical is different to HTML source

The webpage in question contains a canonical link within the rendered Document Object Model (DOM) that varies from the one present within the HTML source code.

Why is this important?

Historically, search engines have indexed websites by solely analyzing the HTML source code, and the practice of indexing both the source and the rendered content is relatively new. For instance, Google employs a two-stage indexing process, as explained at Google I/O 2018.

<Image: Two-Stage Indexing process from Google I/O 2018>

It's essential to recognize that Google initially relies on the source HTML during what can be referred to as the 'first wave of indexing.' On this topic, Google's John Mueller has indicated via Twitter that only canonicals from the "first wave" are processed, disregarding any canonicals that are added or altered during the subsequent rendering phase.

<Image: John Mueller's tweet confirming the treatment of canonicals in indexing>

Though there have been experiments suggesting otherwise, the recommendation from Google stands and should be adhered to for peace of mind regarding search indexing.

Discrepancies between canonicals in the source HTML and the rendered DOM can result in confusion or, more severely, in search engines indexing unintended versions of content, which could detrimentally affect organic search visibility.

What does the Optimization check?

This Optimization is activated when any internal URL has a canonical link element in the HTML that differs from its counterpart after rendering the page with a headless Chrome browser.

Note: This Optimization is evaluated only when the Chrome Crawler is used during the audit process.

Examples that trigger this Optimization:

Suppose a webpage has the URL:

The Optimization would be triggered if, upon rendering, the canonical link within the <head> was set to:

<link rel="canonical" href="" />

While the source HTML refers to a different canonical URL:

<link rel="canonical" href="" />

How do you resolve this issue?

Google has clearly stated that the canonical from the rendered page is not accounted for when it comes to indexing. The priority is to determine which canonical is correct, whether the one present in the source or the one rendered. Below are methods to ensure correct canonicalization:

  1. Implement canonical tags via the HTTP headers instead of the page's HTML <head>.

  2. Verify that the canonical is included in the HTML source and remains unchanged post-rendering.

  3. Deliver search engines with pre-rendered pages.

Should you opt for solution #3, this Optimization might be disregarded. Nonetheless, it's crucial that the canonical used in the rendered HTML is the correct one.

Further reading


Recent Posts

See All

ClubReq Gets A Link (Because They Asked)

I am a mentor for Techstars and have been for over 10 years. In those ten years I have mentioned to startups to ask ANYONE and everyone that they meet to link to their site. Yet, in all those times on


bottom of page