Canonical Links

One page, many addresses. It happens more than you would think:

https://thebreadbin.example/recipes/rye-bread
http://thebreadbin.example/recipes/rye-bread
https://www.thebreadbin.example/recipes/rye-bread
https://thebreadbin.example/recipes/rye-bread/
https://thebreadbin.example/recipes/rye-bread?utm_source=news
https://thebreadbin.example/recipes/rye-bread/index.html

To you, that is one page. To a search engine, it can look like six different pages with identical content. It then has to guess which one to show, and your signals (such as links from other sites) can be split between them.

A canonical link solves this. It says: "Whatever address you found me at, this one is the main version."

What You Will Learn

• What a canonical link is, and why duplicate addresses happen
• How to write one, and where it goes
• Self-referencing and cross-domain canonicals
• The difference between canonical, 301 redirect, noindex, and robots.txt
• How to handle parameters, pagination, and translations
• The most common mistakes
• How to check a canonical

The Big Idea

HTML Code

index.html

<head>
  <title>Rye Bread Recipe | The Bread Bin</title>

  <!-- The main address for this content -->
  <link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">
</head>

URL Normaliser

http://127.0.0.1:5500/index.html

An address people might arrive on

Your site's preferred style

Use www in the host Use a trailing slash on paths Remove tracking parameters

Steps to the preferred address:

• Use https.
• Use the host without www, to match your chosen style.
• Remove tracking parameters (utm_source, utm_medium).
• Remove the #fragment.
• Remove index.html.
• Use a lowercase path (only if your site treats paths as lowercase).
• Remove the trailing slash, to match your chosen style.

The tag every one of those variants should carry:

<link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

This is a teaching tool. Only your own site knows which forms of an address really show the same page. Paths can be case sensitive, and some parameters (such as a page number or a language) do change the content. Never remove a parameter that changes what the page shows.

Try the three examples, and change the style choices. Notice that very different-looking addresses all lead to the same clean one.

What a Canonical Link Is

<link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

• It goes in the head of the page. Outside the head, it is ignored.
• rel="canonical" says "this is about the preferred address."
• href is that preferred address, written in full.

It is a hint, not a command. Search engines usually follow it, but may choose a different address if other signals disagree (for example, if your internal links, sitemap, and redirects all point somewhere else).

Why Duplicates Happen

• Protocol and host: http versus https, with or without www.
• Trailing slashes and capital letters in paths.
• index.html and similar default files.
• Tracking parameters: utm_source, fbclid, and session ids.
• Sorting and filtering: ?sort=price&color=red.
• Printer-friendly and mobile versions (such as m. subdomains).
• The same content in two categories, at two addresses.
• Syndication: your article republished on another site.
• Staging or test sites that were left public.

Most duplicates are not malicious, and search engines are used to them. The goal is to make your preference clear, so you do not leave the choice to chance.

Self-Referencing Canonicals

A good habit is to give every page a canonical that points to itself. Even when there are no duplicates today, one may appear tomorrow (a tracking link, a typo, a scraper), and the self-referencing tag already names the right version.

<!-- On https://thebreadbin.example/recipes/rye-bread -->
<link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

<!-- Also on https://thebreadbin.example/recipes/rye-bread?utm_source=news -->
<link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

That second example shows the idea: the variant carries the same tag as the main page.

Canonical, 301, noindex, or robots.txt?

These tools do different jobs. Choosing the right one matters.

Tool	What it does	Use it when
Canonical link	Says which address is the main one, but both stay reachable	Variants must keep working (parameters, print versions)
301 redirect	Sends everyone to the new address, for good	A page moved, or you chose one host or protocol
noindex	Asks search engines not to list the page	The page should exist, but not appear in results
robots.txt	Asks crawlers not to visit certain paths	You want to save crawling effort (not to hide pages)

A few rules of thumb:

• If the old address should stop existing, use a 301 redirect. It is the strongest signal, and it also fixes things for people.
• If both addresses need to work, use a canonical.
• If you do not want the page in results at all, use noindex. Do not also point a canonical elsewhere. Mixed signals confuse.
• Do not block a page in robots.txt and expect its canonical to be seen. A crawler that cannot visit the page cannot read its canonical tag. See Robots Meta.

Try the decisions yourself:

http://127.0.0.1:5500/index.html

For each situation, choose the best approach.

A unique page with no duplicates, at one address

Canonical to itself Canonical to another page 301 redirect noindex

The same article is reachable at /recipes/rye?utm_source=news

Canonical to itself Canonical to another page 301 redirect noindex

A page has moved to a new address for good

Canonical to itself Canonical to another page 301 redirect noindex

Your http pages also load over https

Canonical to itself Canonical to another page 301 redirect noindex

Your site's internal search results pages

Canonical to itself Canonical to another page 301 redirect noindex

A printer-friendly version of an article

Canonical to itself Canonical to another page 301 redirect noindex

Two different products that happen to look similar

Canonical to itself Canonical to another page 301 redirect noindex

A partner site republishes your article, and you asked for a canonical

Canonical to itself Canonical to another page 301 redirect noindex

Real sites have exceptions, and search engines make their own decisions. These are the usual, safe choices.

Cross-Domain Canonicals

A canonical can point to a different website. It is useful for syndication: if a partner republishes your article, their copy can carry a canonical pointing back to your original.

<!-- On the partner's copy -->
<link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

Two cautions:

• It is a hint. The partner's page may still appear in results.
• It gives away credit, so only do it when you mean to. Never point your pages at a site you do not trust, and be wary of requests to do so.

Parameters, Filters, and Pagination

Parameters

• Tracking parameters (utm_..., fbclid) never change the content. Canonicalise them to the clean address.
• Sorting and filtering often produce near-duplicates. Usually, canonicalise them to the main listing, unless a filtered view is a page people really search for (such as "red running shoes").
• Parameters that change the content (a page number, a language, a product id) are not duplicates. Do not strip them.

Pagination

For a listing split over pages, each page should have its own canonical (page 2 points to page 2). Do not canonicalise every page to page 1, or the content on later pages may be missed. Search engines have said they no longer use rel="next" and rel="prev" for indexing, as far as they have publicly stated.

Translations

Each language version should have a canonical that points to itself, not to the English page. Link the versions together with hreflang. See International SEO.

Be Consistent

A canonical is one signal among several. Make them all agree:

• Link to the canonical address in your own menus and content.
• List only canonical addresses in your sitemap.
• Redirect the other hosts and protocols to the canonical.
• Keep hreflang and canonical in step.
• Do not canonicalise to a page that redirects, returns an error, or has noindex. Point to a live, indexable page.
• Avoid chains and loops: A points to B, which points to C, or A and B point to each other.

Canonicals in HTTP Headers

HTML is not the only way. For files that have no head, such as PDFs, a server can send the canonical as a header:

Link: <https://thebreadbin.example/guide.html>; rel="canonical"

This is an advanced option, and needs access to your server's settings.

Canonicals in Docusaurus

Docusaurus builds your site into static pages, and uses the url and baseUrl in docusaurus.config.js to create full addresses. It adds a canonical link to your pages for you, using those settings. So:

• Set url correctly, to your real address with https.
• Choose a trailingSlash setting (true or false) and keep it, so your addresses are consistent.
• Check the output with "view source" after a build.

Options and behaviour can change between versions, so check the current Docusaurus documentation.

Check Your Canonical

http://127.0.0.1:5500/index.html

Check it for real

1. "View source" on a page, and search for canonical.
2. Google Search Console, URL inspection: it shows the address you declared and the address Google chose. If they differ, find out why.
3. The Pages report lists duplicates, such as "Duplicate without user-selected canonical."
4. A crawler tool can list the canonical of every page on a site.
5. Test with the variants: add ?utm_source=test to a page, and check that the canonical is unchanged.

Good Habits

• Add a self-referencing canonical to every page.
• Use full addresses, with https.
• Have exactly one, in the head.
• Point to a live, indexable, unredirected page.
• Prefer a 301 redirect when an address should not exist at all.
• Keep sitemaps, links, and redirects in line with your canonicals.
• Do not use canonical to hide thin or different pages.
• Check Search Console for the address Google chose.

Canonical Checklist

• Every page has one canonical link, in the head
• The address is absolute, uses https, and has no fragment
• It has no tracking or session parameters
• It points to a live, indexable page that does not redirect
• Pagination pages point to themselves
• Translations point to their own language version
• http, www, and non-www versions redirect to the preferred host
• Sitemaps and internal links use the canonical addresses
• No page has both a canonical elsewhere and noindex
• Search Console shows Google chose the address you declared

Security and Privacy Notes

• Do not build the canonical from untrusted input. If your server creates the tag from the request's host header or from a parameter without checking, an attacker may be able to point your canonical at their site. Build it from a fixed, configured address, and escape it.
• Escape the address when you write it into HTML, so a stray quote cannot break out of the attribute.
• Do not leak private addresses. A canonical on a staging or admin page may reveal an internal address. Keep private areas behind a login, and keep them out of public builds.
• Strip secrets from URLs. Session ids, tokens, and email addresses in a URL end up in logs, history, and referrers. Never let them become your canonical.
• Be careful with cross-domain canonicals. Pointing your content to another site transfers credit to them, and accepting requests to do so from unknown parties could be a trick.
• Watch for scrapers and hijacks. A copied page that keeps your canonical tag points back to you, which helps. Check your pages from time to time for unexpected copies.

Global Audience Notes

• Each language or country version needs its own canonical, pointing to itself, with hreflang links between them. See International SEO.
• Choose one URL style per country site, such as /fr/ folders or a .fr domain, and be consistent.
• Non-Latin paths may be encoded in addresses (%E4%BD...). Use the same form everywhere, so canonicals match.
• Do not point translated pages at the original language, unless the translation is only a machine copy you do not want indexed.
• Check regional hosting and CDNs, which may serve the same page from several hosts or domains.

Common Mistakes to Avoid

1. No canonical at all.
2. A relative address (/recipes/rye-bread) instead of a full one.
3. More than one canonical on a page.
4. A canonical in the body, where it is ignored.
5. Pointing every page to the home page.
6. Pointing page 2 and 3 of a list to page 1.
7. Pointing to a page that redirects, errors, or is noindex.
8. Canonical plus noindex, which sends mixed signals.
9. Blocking the page in robots.txt, so the canonical is never seen.
10. Including tracking parameters or fragments in the canonical.
11. Using canonical when a 301 redirect is right.
12. Never checking what search engines chose.

Practice Time

Try these in your browser and your editor:

1. Use the URL normaliser with each example, and turn the style options on and off.
2. Take the decision quiz. Which scenario made you hesitate?
3. Run the checker on the messy page, fix every problem, and run it again.
4. Open a page you built, and use "view source." Does it have a canonical?
5. Add ?utm_source=test to a page you own. Does the canonical stay clean?
6. List all the ways a page of yours can be reached. Which should redirect?
7. Open Search Console's URL inspection on a page, and compare the declared and chosen canonical.
8. Write the canonical tags for a product with two color variants, and explain your choice.
9. Find your sitemap. Does it contain only canonical addresses?
10. Bonus: draw a map of the addresses a page can have, and decide for each one: redirect, canonical, or noindex.

Quick Recap

Click a question to check your answer.

1. What does a canonical link do?

It tells search engines which address is the main version of a page, so duplicates and variants are grouped together, and signals are not split.

2. Is a canonical a command?

No, it is a hint. Search engines usually follow it, but may pick another address if your other signals disagree.

3. What is a self-referencing canonical?

A canonical that points to the page's own address. It is a safe habit, because it already names the right version if a duplicate ever appears.

4. When should you use a 301 redirect instead of a canonical?

When an address should stop existing, such as after a move, or to choose one host or protocol. Use a canonical when both addresses must keep working.

5. Why not point every page of a paginated list to page 1?

The content on later pages could be missed. Each page should have its own canonical.

6. What mistakes make a canonical ignored?

Putting it outside the head, having several, pointing to a page that redirects, errors, or is noindex, or blocking the page in robots.txt so the tag can never be read.

Key Takeaways

• A canonical link names the main address for a page that can be reached in several ways.
• It is a hint, so keep your other signals in line.
• Give every page a self-referencing canonical, with a full https address.
• Use a 301 redirect when an address should go away, and noindex to keep a page out of results.
• Do not canonicalise pagination or translations to a different page.
• Point to a live, indexable page, and avoid chains.
• Never build a canonical from untrusted input.
• Check Search Console to see what search engines chose.

Next, learn how to ask search engines to index, skip, or follow, and what that can and cannot do, in Robots Meta.