The issue at hand is that the canonical tag for a certain URL only exists within the DOM after it has been processed by JavaScript and is not present in the raw HTML source.
Why is this important?
When it comes to page indexing, it is essential for Google’s initial scan -- which utilizes the source HTML -- to have consistent indexing signals, including canonical tags, robots meta directives, hreflang attributes, and the like.
What does the Optimization check?
This Optimization will activate if any internal URL being audited by Sitebulb includes a canonical tag after Chrome's rendering, but the tag is absent in the preliminary HTML source code.
Note: This check is conducted only if the evaluation has been set up to use Chrome's crawling capabilities.
Examples that trigger this Optimization:
Imagine the URL: https://example.com/page-a
The Optimization would trigger if this URL has a canonical tag in the
<head>
after rendering:
<link rel="canonical" href="https://example.com/page-b" />
and lacks the canonical tag in the raw HTML.
How do you resolve this issue?
A canonical link that's only rendered and not present in the source HTML is not acknowledged by Google for indexing purposes. As per Google’s recommendation, canonical tags shouldn’t be managed through JavaScript; instead, they should be included in the source HTML without any alterations during rendering.
Google's documentation does offer guidance if managing canonical tags with JavaScript is unavoidable, suggesting a specific method if it's necessary.