How should JavaScript-generated canonicals relate to the original HTML?

Definition: A JavaScript-generated canonical should have the same URL as the canonical in the original HTML. If the page lacks a way to set a canonical in the original HTML, the canonical can be omitted there and added only after JavaScript runs.

Key facts

• Google's canonicalization documentation describes a rel="canonical" link annotation as a strong signal for the URL that should become canonical.
• Google's JavaScript SEO guide says Google processes JavaScript through crawling, rendering, and indexing.
• The canonicalization documentation says the clearest client-side rendering pattern is to put the canonical in the HTML source and ensure JavaScript leaves the link element unchanged.
• The JavaScript SEO guide recommends HTML for setting the canonical, with JavaScript as the option when HTML lacks a way to set it.
• Google says canonical preference methods are optional, so a page can leave out a canonical preference when it has no value to specify.

What does Google recommend?

Google's canonicalization documentation, updated 10 July 2026, places rel="canonical" link annotations among the signals used for duplicate or very similar pages. It describes the annotation as a strong signal, while sitemap inclusion is a weak signal. The documentation also says that different canonicalization techniques should not specify different URLs for the same page.

For a page that can emit a canonical in its response HTML, keep the same URL in that HTML and in any JavaScript that examines or updates the document head:

<link rel="canonical" href="https://www.example.com/articles/example">

The canonicalization documentation's client-side rendering guidance is to specify the canonical in the HTML source and make sure JavaScript leaves the canonical link element unchanged. A self-referential canonical is the page's own canonical URL in this link.

What happens when Google renders the page?

The JavaScript SEO guide, updated 4 March 2026, describes Google Search as processing JavaScript through crawling, rendering, and indexing. Google queues eligible pages for rendering, executes JavaScript in a headless Chromium, parses the rendered HTML for links, and uses that rendered HTML to index the page.

This makes the relationship between the two representations important. The original HTML is the response received before page scripts run. The rendered HTML is the document after JavaScript execution. If both contain a canonical, the URL should remain identical. If the original response lacks one, Google documents the other supported pattern: omit the canonical from the original HTML and set it with JavaScript.

Which implementation pattern fits a site?

The preferred pattern is an HTML canonical that JavaScript leaves unchanged:

<!-- Original HTML and rendered HTML use the same canonical URL. -->
<link rel="canonical" href="https://www.example.com/articles/example">

When the application lacks a way to set the element in its HTML response, the original response can omit it and the script can add it during rendering:

<!-- Original HTML: no rel="canonical" link. -->

Google's JavaScript SEO guide says that JavaScript can set the canonical in this situation. The canonicalization documentation describes the same arrangement as leaving the element out of the HTML source and setting it only with JavaScript. The two patterns avoid presenting different canonical URLs to the same page.

Server-side or pre-rendering remains relevant for other reasons. Google says it can make a site faster for users and crawlers, and that some bots lack JavaScript support. That statement concerns delivery and processing, while the canonical rule concerns keeping the URL signal clear.

How can the relationship be checked?

Inspect the response HTML and record whether its <head> contains a rel="canonical" link. Then inspect the rendered HTML after JavaScript runs. When the response contains the link, compare its href with the rendered link's href; they should be the same URL. When the response omits the link because the application lacks a way to set it there, confirm that the rendered document adds the intended canonical.

This check follows Google's two documentation paths: the canonicalization page says to keep JavaScript from changing a canonical in the HTML source, while the JavaScript SEO guide says the rendered HTML is used for indexing and permits a JavaScript-only canonical when HTML lacks a way to set one.

Related terms

• Canonical URL
• JavaScript rendering and AI crawlers
• Rendered DOM
• Server-side rendering

FAQ

Can JavaScript replace a canonical in the original HTML?

Yes, when the page lacks a way to set the canonical in its HTML response. Google documents leaving it out of the original HTML and setting it only with JavaScript.

What if the JavaScript value differs from the HTML value?

Google advises against changing the canonical to a URL other than the one specified in the original HTML. Keep the URL identical in both representations.

Is a canonical required on every page?

No. Google says canonicalization methods are optional and that it can identify the version it considers objectively best when no canonical preference is specified.

Sources

1. Google Search Central, "How to specify a canonical URL with rel="canonical" and other methods", 10 July 2026
2. Google Search Central, "Understand the JavaScript SEO basics", 4 March 2026

---

Check how a page reads to answer engines. Open the GEO score analyzer