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: https://example.com/page-a.

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

<link rel="canonical" href="https://example.com/page-b" />

While the source HTML refers to a different canonical URL:

<link rel="canonical" href="https://example.com/page-a" />


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

0 views0 comments

Recent Posts

See All

CSS file size too large discovered in SEO audit

In our SEO audits at Loud Interactive, we often come across a common yet significant issue that can heavily impact your website's loading speed and overall performance: CSS file size too large. Let's

CSS file size too large discovered in SEO audit

When conducting an SEO audit on your site, one issue that might come up is that your CSS file size is too large. But why does this matter, and what can you do about it? Let's dive in. What's the Issue

H1 tag missing or empty" Discovered in an SEO Audit

At Loud Interactive, we've encountered a common issue during our SEO audits that can significantly impact a website's performance on search engines: the "H1 tag missing or empty" warning. This problem

bottom of page