Google Updated Its JS SEO Docs — Your Canonical Tags May Be "Fighting" Each Other

Hi everyone, this is Neo.

Fellow independent site builders — especially those of you using front-end frameworks like React or Vue, or B2B/B2C sites running lots of JS plugins — today’s post is one you need to read carefully.

Recently, Google quietly updated its official JavaScript SEO documentation, and the focus was on a very technical but absolutely critical issue — how canonical URLs are handled.

That might sound dry, but if I don’t tell you, you might never figure out why your pages get indexed inconsistently, or why Google keeps indexing the wrong page.

In short: if your HTML and your JS are “fighting each other,” Google gets confused.

What Is the “Double Canonicalization” Trap?

First, let’s understand how Google views your site. For modern websites, Google actually “looks” twice:

  1. First Wave: The crawler fetches your Raw HTML (the original code the server returns). At this point, JS hasn’t run yet.
  2. Second Wave: Google’s rendering service (WRS) runs the JavaScript on the page, producing the Rendered HTML (the page end users see).

The problem lives between those two passes.

Google warns in its latest docs: canonicalization can happen twice.

If your Raw HTML says: <link rel="canonical" href="https://site.com/page-a" />

But after JS runs, the page content changes, or some clever plugin rewrites the canonical tag to: <link rel="canonical" href="https://site.com/page-b" />

Now you’ve got a problem. Google receives two conflicting signals.

Neo’s take: It’s like applying for a passport. The application form you submit (Raw HTML) says “John Smith,” but when you stand in front of the camera (Rendered HTML), you’re wearing a name tag that says “Jane Doe.” The visa officer (Google) isn’t just confused — it might think you’re committing fraud, or it’ll just pick one (usually the wrong one).

Google’s Official Advice: Consistency

In this update, Google spelled out the best practices:

1. The Golden Rule: Raw HTML = Rendered HTML

This is the safest approach. No matter what your JS does, make sure the canonical tag in the server-returned HTML and the tag after final JS rendering are completely identical.

That way, Google can determine the canonical on the first crawl, confirm it again after rendering — the signal gets reinforced and indexing stays rock solid.

2. If You Must Modify the Canonical With JS

Google says it supports injecting canonical tags via JavaScript (supported but not recommended) — but honestly, that’s walking a tightrope.

If you must generate the canonical tag with JS, Google’s advice is: don’t put a canonical tag in the Raw HTML at all.

Why leave it empty? Because if the Raw HTML has an old/wrong tag and JS injects a new/right one, the time gap and conflict in between is enough to cause a search engine to misjudge.

But — Neo strongly advises against this. Relying on JS to tell Google which page is the real one is inefficient and risky. What if the JS renders wrong? What if rendering times out? Then your page is left “streaking.”

Why This Matters for Independent Sites

A lot of independent sites (especially Shopify, and even some WordPress sites) install tons of plugins.

  • Scenario A: Your SEO plugin generates a canonical tag server-side.
  • Scenario B: A multilingual switcher or currency switcher plugin runs on JS. After the page loads, it might dynamically change the URL structure — and casually rewrite the canonical too.

That’s when the “gods fight” breaks out.

Neo’s Practical Guide: How to Check

Don’t just take my word for it — go check your site right now. You don’t need to know code; Google Search Console (GSC) is enough.

  1. Open GSC and enter your page URL.
  2. Use the URL Inspection tool.
  3. Click View Crawled Page -> view the HTML source -> search for canonical. This is what Google sees the first time.
  4. Click Test Live URL -> view the tested code -> search for canonical. This is what Google sees after JS runs.

Compare the two values:

  • If they match: congratulations, you’re safe.
  • If they don’t: get your developer or tech vendor on it right now — this is a bug that must be fixed.

Summary

With this documentation update, Google is really hammering one core point: don’t create confusion for search engines.

In SEO, certainty is your most valuable asset. Don’t let your code logic be ambiguous.

Neo’s key takeaways:

  • Set your canonical tags server-side whenever possible.
  • Never let JS “gild the lily” by modifying them — unless you’re very sure what you’re doing.
  • Regularly use GSC to check the consistency between Raw HTML and Rendered HTML.

I hope this breakdown helps you dodge this sneaky SEO pit. With independent sites, the details decide success or failure.

References: