Canonical Tags Explained: A Guide with Real-World Examples

Most websites serve the same content at more than one URL. Tracking parameters, sort orders, www and non-www, trailing slashes, products listed in several categories: each creates a duplicate. Google groups those duplicates and picks one URL to show in search, called the canonical. The rel="canonical" tag is how you tell Google which one you prefer.

This canonical tags guide explains how that choice is made, then walks through the situations where canonicals most often go wrong, with the markup for each.

What a canonical tag does

A canonical tag is a link element in the page head that names the preferred URL for the content on that page:

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

When Google finds several URLs with the same or very similar content, it consolidates them into one cluster, indexes the canonical, and generally shows that URL in results. Signals such as links pointing at the duplicates are consolidated toward the canonical.

The important word is "prefer". A canonical tag is a strong hint, not a directive. Google can and does pick a different URL when other signals disagree.

How Google chooses the canonical

Google weighs several signals. Its documentation describes them roughly in this order of strength:

When these signals agree, Google almost always uses your preferred URL. When they conflict, for example a canonical pointing at URL A while internal links and the sitemap point at URL B, Google has to guess.

Where to see what Google chose

Use the URL Inspection tool in Search Console. It shows the user-declared canonical (yours) and the Google-selected canonical. In the Page indexing report, three statuses are canonical-related:

• Alternate page with proper canonical tag. Working as intended. The page is a duplicate and points at the indexed version.
• Duplicate without user-selected canonical. Google found duplicates and no canonical tag, so it picked one itself.
• Duplicate, Google chose different canonical than user. Google overrode your tag. This one needs investigation.

Ways to declare a canonical

HTML link element

The standard method, shown above. Rules:

• Use an absolute URL, including protocol and hostname.
• Exactly one canonical per page. If Google finds several conflicting canonical tags, it may ignore all of them.
• It must be in the head. A canonical in the body is ignored.

HTTP header

For PDFs and other non-HTML files:

Link: <https://www.example.com/guides/boot-care.pdf>; rel="canonical"

Framework examples

In a Next.js App Router project, set it through metadata. The relative path is resolved against metadataBase:

// app/layout.js
export const metadata = {
  metadataBase: new URL("https://www.example.com"),
};

// app/boots/[slug]/page.js
export async function generateMetadata({ params }) {
  const { slug } = await params;
  return { alternates: { canonical: `/boots/${slug}/` } };
}

WordPress core outputs a canonical on single posts and pages, and SEO plugins such as Yoast and Rank Math extend it to archives and let you override it per page. On Shopify, themes output canonical_url in the layout:

<link rel="canonical" href="{{ canonical_url }}">

Real-world examples

These are the situations that come up most often in audits, with the correct setup for each.

1. Tracking and campaign parameters

https://www.example.com/boots/ridgeway/?utm_source=newsletter&utm_campaign=spring shows the same content as the clean URL.

Setup: the page always outputs a canonical to the clean URL, with no parameters. Make sure your template strips parameters rather than echoing the requested URL back. A canonical that reflects the current URL is one of the most common bugs: it makes every parameter variant self-canonical.

2. Protocol, host and trailing slash variants

http://example.com/boots, https://example.com/boots, https://www.example.com/boots/.

Setup: canonical tags are not the right primary tool here. Use site-wide 301 redirects to one protocol, one host and one trailing-slash convention, then make the canonical match that final form. Redirects are the stronger signal and also fix the problem for users and other search engines.

3. One product in several categories

/mens/boots/ridgeway/ and /sale/ridgeway/ both show the same product.

Setup: pick one product URL, ideally one without category paths, such as /products/ridgeway/. Canonicalize every path to it and link to it internally. Shopify does this by default: /collections/boots/products/ridgeway declares /products/ridgeway as canonical. Check your theme links to the clean path too, since internal links are a supporting signal.

4. Sort orders and filters

/boots/?sort=price-asc or /boots/?color=brown&size=10.

Setup: sort orders show the same set of products in a different order, so canonicalize them to the unsorted category. Filters are a judgment call. A filter with real search demand ("brown boots") deserves its own clean, indexable, self-canonical page. Low-value combinations should canonicalize to the parent category, and if there are many of them, keep them out of the crawl entirely. We cover this in depth in duplicate content issues in ecommerce.

5. Paginated category pages

/boots/, /boots/?page=2, /boots/?page=3.

Setup: each page in the series is self-canonical. Page 2 lists different products than page 1, so it is not a duplicate. Canonicalizing page 2 to page 1 tells Google to ignore the products that only appear deeper in the series. Google no longer uses rel="prev" and rel="next" as indexing signals, though they are harmless to keep. If you have a "view all" page that loads acceptably fast, canonicalizing the series to it is a valid alternative.

6. Syndicated content on other sites

Your article is republished by a partner site.

Setup: cross-domain canonicals are supported, but Google's guidance changed in 2023. It no longer recommends relying on canonical tags for syndication, because the partner page usually differs (different navigation, comments, related content). If you want your original to be the one that ranks, the most reliable option is for the partner to noindex their copy. A canonical from the partner page to yours remains a useful extra signal, and a link back to the original helps too.

7. Separate mobile URLs

Some older sites still serve mobile pages at m.example.com.

Setup: the desktop page declares an alternate, and the mobile page declares the desktop page as canonical:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/boots/ridgeway/">

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

The first line goes on the desktop page, the second on the mobile page. With mobile-first indexing, make sure the mobile version contains the same content, structured data and metadata as the desktop version. If you are planning a redesign, moving to a single responsive URL removes this complexity entirely.

8. International versions

/us/pricing/ and /uk/pricing/ are nearly identical apart from currency.

Setup: each version is self-canonical, and hreflang connects them. Do not canonicalize regional versions to one "main" version; that tells Google not to index them, and the hreflang is then ignored. Our guide to hreflang mistakes covers this conflict in detail.

Common canonical mistakes

JavaScript and canonicals

If your canonical is set or changed by JavaScript, Google may see a different value in the raw HTML than in the rendered page. Google recommends against changing the canonical with JavaScript; if you must set it client-side, leave it out of the initial HTML entirely so the two never disagree. Server-rendered canonicals are the safer default. More on this in our guide to JavaScript SEO and rendering.

How to audit your canonicals

1. Crawl the site and extract the canonical for every URL. Flag pages where the canonical differs from the URL, then group them by template.
2. Check every canonical target returns 200, is indexable, is not blocked and is itself self-canonical. A canonical pointing at a page that canonicalizes elsewhere is a chain, and chains are often ignored.
3. Compare with your sitemap. Sitemaps should contain only canonical URLs. A non-canonical URL in a sitemap sends a conflicting signal.
4. Compare with internal links. Most internal links should point at canonical URLs, not parameterized or redirected variants.
5. Review the Page indexing report for "Duplicate, Google chose different canonical than user", and use URL Inspection on a sample to understand why.
6. Check the rendered HTML for a few templates to confirm there is exactly one canonical, in the head.

Canonical tags tend to break during releases: a new template, a CMS upgrade or a plugin conflict. If you want to catch that within a day, AI Monitoring tracks canonicals on your key pages and alerts on changes. For a one-time review of everything above, see our audit pricing, or work through the technical SEO audit checklist yourself.

Summary

• A canonical tag is a strong hint for which duplicate URL Google should index, not a directive.
• Redirects, canonical tags, sitemaps and internal links should all point at the same preferred URL.
• Use one absolute canonical per page, in the head, pointing at a 200, indexable, self-canonical URL.
• Paginated pages and international versions are self-canonical; parameter, sort and tracking variants point at the clean URL.
• Check URL Inspection and the Page indexing report to confirm Google chose the canonical you declared.