Canonical issues

How to Set a Canonical Tag (and Get It Right the First Time)

How to add a rel=canonical tag correctly in WordPress, Shopify, Next.js, and Webflow — plus the mistakes that make Google ignore it.

Updated Sep 1, 2026

TL;DR

A canonical tag is one line — `<link rel="canonical" href="https://example.com/page">` in the `<head>` — that tells Google which URL is the master copy when several URLs show similar content. Every page needs exactly one, it must be absolute and self-referencing by default, and it only works if your other signals (links, sitemap, redirects) agree with it. Set it once per template, verify in URL Inspection, and stop guessing.

A canonical tag is a one-line instruction: when you find pages that look alike, index this one. That's the entire feature. The confusion people run into isn't the tag itself — it's where to put it, what to point it at, and why Google sometimes ignores it anyway.

This is the practical version: how to add the tag correctly on the platform you're actually using, and the handful of mistakes that quietly break it.

What the tag actually does

rel=canonical doesn't hide a page, block it, or redirect it. The URL you tag stays live, visitors can still land on it, and it can still get crawled. What changes is which version Google considers the "real" one for ranking and indexing purposes. Signals from the duplicate — links, sometimes even some ranking credit — consolidate onto the canonical target instead of splitting across every near-identical URL.

You reach for it whenever the same content, or close to it, is reachable at more than one URL: tracking parameters, sort/filter combinations, http vs https leftovers, printer-friendly versions, syndicated posts, paginated series. Anywhere your CMS or e-commerce platform can generate two URLs for one piece of content, you want a canonical deciding which one counts.

The tag itself

In the <head> of the HTML, exactly once per page:

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

Four rules that cover almost every mistake people make with it:

Absolute URL, not relative. href="/page" is technically parsed by Google but is a common source of bugs when templates copy-paste incorrectly across environments. Always write the full https:// URL.
One canonical tag per page. Two conflicting canonical tags on the same page cause Google to ignore both and fall back to its own judgment.
Self-referencing by default. If a page has no duplicate, its canonical should point at itself. This isn't optional decoration — it's the clearest signal you can give Google that this URL is the one you intend to rank.
Point at a URL that returns 200 OK. Never canonicalize to a redirect, a 404, or a noindexed page. Google won't honor a broken target — see Google chose different canonical than user for what happens when it doesn't.

Setting it by platform

WordPress
Most WordPress sites already have this handled by an SEO plugin — check before adding anything manually.
- Yoast SEO / Rank Math — both plugins auto-generate a self-referencing canonical on every page. To override it for a specific post (e.g., pointing a duplicate at its original), open the post editor, find the SEO plugin's meta box, and look for "Canonical URL" (Yoast: Advanced tab; Rank Math: Advanced tab).
- No SEO plugin — add the tag to your theme's header.php, inside <head>, using <?php the_permalink(); ?> or the WordPress core function wp_get_canonical_url() (available since WP 4.6) to keep it dynamic per page.
- Avoid stacking a plugin-generated canonical with a manually hardcoded one in the theme — that's how sites end up with two conflicting tags.
Shopify
Shopify auto-generates canonical tags on most page types (products, collections, blog posts) pointing at the primary URL — you usually don't need to touch this.
- The template that outputs it is theme.liquid, using {{ canonical_url }}. Check it's present and unmodified if canonicals seem wrong site-wide.
- The common Shopify-specific bug: products assigned to multiple collections generate URLs like /collections/hats/products/cap and /collections/gloves/products/cap. Shopify's default canonical correctly points both at the product's primary URL — but a theme customization or app can override canonical_url and break this. If you see this pattern in GSC, check for a theme edit or app that touches canonical_url.
Next.js / React
There's no automatic canonical — you set it explicitly per route.
- App Router: export metadata with alternates.canonical:
```
export const metadata = {
  alternates: {
    canonical: "https://example.com/page",
  },
};
```
- Pages Router: use next/head inside the page component:
```
import Head from "next/head";

<Head>
  <link rel="canonical" href="https://example.com/page" />
</Head>;
```
- Build the URL from a single source of truth (an env var or config constant for your base domain) so every page's canonical is generated the same way — don't hand-type the domain per file. This is the most common Next.js bug: a hardcoded localhost or preview-deployment domain shipped to production because it was copy-pasted into a component.
Webflow
Webflow sets canonical tags per page under Page Settings → SEO → "Canonical URL." Leave it blank for a self-referencing canonical (the default and correct behavior for standalone pages); fill it in only when this specific page should defer to another URL.
For CMS Collection pages, the canonical field is in the Collection template settings and applies the same rule across every item — check it once at the template level rather than per item.

Why the tag alone isn't enough

This is the part every platform guide skips: Google treats rel=canonical as a hint, not a command. If you set the tag correctly but your internal links, sitemap, and redirects still point at the non-canonical URL, Google weighs the aggregate of what your site does over the one line that says what you want — and can override your tag. That's a different, more common problem than a missing or malformed tag — covered in Google chose different canonical than user.

The practical takeaway: after you set the tag, also point your nav, footer, body links, and sitemap at the same URL. A canonical tag fighting your own internal links is a canonical tag that loses.

How to verify it's working

Check the raw HTML
View source (view-source:https://example.com/page) or curl -s URL | grep -i canonical and confirm exactly one tag, with the correct absolute URL. Don't trust the DevTools Elements panel alone — it can show a tag injected by JavaScript that isn't in the actual response Google fetches.
Confirm in URL Inspection
In Search Console, run URL Inspection on the page. Compare User-declared canonical against Google-selected canonical. When they match, Google accepted your tag. When they don't, you have a signal conflict to resolve — see the linked guide above.
Give it a crawl cycle
Google needs to re-crawl before URL Inspection reflects a newly added or changed tag — typically a few days. There's nothing to "speed up" here beyond requesting indexing once; re-checking hourly won't move it faster.

When not to bother

Don't add canonical tags defensively to pages that have no duplicates and no reason to ever get one — a self-referencing tag on every page is good practice, but hunting for edge cases that don't exist yet wastes time. And don't use a canonical as a substitute for a 301 redirect: if a page is permanently gone and replaced by another, redirect it. Canonicals are for pages that legitimately need to keep existing side by side.

Let Percy watch this

Setting the tag right is half the job — the other half is noticing when Google disagrees with it. TurboConsole connects to your Search Console account, tells you which of your canonical signals are actually costing you traffic, and checks again every week. Percy doesn't fix it for you — he tells you exactly what to change and where. Sign in to connect Search Console.

Frequently asked

Does every page need a canonical tag?

Yes, as a default. Every indexable page should carry a self-referencing canonical — a tag pointing at its own URL. It costs nothing and removes ambiguity. You only point a canonical at a different URL when this page is a genuine duplicate or near-duplicate of another one.

Can a canonical tag point to a page on a different domain?

Yes — cross-domain canonicals are valid and commonly used for syndicated content, republished articles, or migrated sites still serving old URLs. The mechanics are identical to a same-domain canonical.

Should the canonical URL use http or https, www or not?

Always the final, live, secure version — https, with whichever of www or non-www is your actual site. Never canonicalize to a URL that itself redirects; point straight at the version that returns 200 OK.

Is a canonical tag the same as a 301 redirect?

No. A 301 redirect sends both users and Google to a new URL — the old one stops existing as far as anyone visiting it is concerned. A canonical tag lets both URLs stay live and viewable, but tells Google which one to index and rank. Use a redirect when a page should no longer exist; use a canonical when it needs to exist but shouldn't compete with another page.

Percy