Canonical URLs Explained: Why Your Site Needs Them
Duplicate content is one of the most common SEO problems, and most developers create it without realizing. Different URLs serving the same page, trailing slashes, www vs non-www, query parameters. Canonical tags tell search engines which version is the real one. Here is how to implement them correctly.
What is a canonical URL?
A canonical URL is specified using a <link rel="canonical">tag in the HTML head. It tells search engines: "This is the preferred version of this page. If you find the same content at other URLs, treat this one as the original."
Google uses canonical tags as a strong hint when deciding which URL to index and show in search results. Without them, Google makes its own choice, and it may not be the URL you want.
How duplicate content happens
Most duplicate content is accidental. These are the most common causes:
- www vs non-wwwyoursite.com/page and www.yoursite.com/page
- HTTP vs HTTPShttp://yoursite.com/page and https://yoursite.com/page
- Trailing slashesyoursite.com/page and yoursite.com/page/
- Query parametersyoursite.com/page and yoursite.com/page?ref=twitter
- Index page variantsyoursite.com/ and yoursite.com/index.html
- Content syndicationThe same article published on your site and Medium
Each of these creates two or more URLs serving identical content. Search engines see each URL as a separate page, splitting ranking signals between them.
How duplicate content hurts rankings
When the same content exists at multiple URLs, three things happen:
- Backlinks split. Some sites link to /page, others to /page/. The ranking power is divided instead of consolidated.
- Crawl budget wasted. Google spends time crawling duplicate URLs instead of discovering new pages on your site.
- Wrong URL indexed. Google may index the version with query parameters instead of the clean URL, which looks worse in search results.
Self-referencing canonical tags
Every indexable page should have a canonical tag that points to itself. This is called a self-referencing canonical. Even if there are no duplicates today, it prevents issues caused by future URL changes, query parameters, or misconfigured redirects.
<!-- On the page https://yoursite.com/blog/my-post --> <link rel="canonical" href="https://yoursite.com/blog/my-post" />
Google's John Mueller has confirmed that self-referencing canonicals are a best practice.
HTML implementation
Add the canonical tag inside the <head> of every page. Always use the full absolute URL, including the protocol:
<head> <link rel="canonical" href="https://yoursite.com/pricing" /> </head>
Next.js implementation
In Next.js App Router, use the alternates.canonical field in your metadata export. Next.js combines it with metadataBase to generate the full URL:
// app/layout.tsx: set the base URL once
import type { Metadata } from "next"
export const metadata: Metadata = {
metadataBase: new URL("https://yoursite.com"),
}
// app/pricing/page.tsx: set canonical per page
export const metadata: Metadata = {
title: "Pricing",
description: "Simple, transparent pricing.",
alternates: {
canonical: "/pricing",
},
}
// app/blog/[slug]/page.tsx: dynamic canonical
export async function generateMetadata({ params }): Promise<Metadata> {
return {
alternates: {
canonical: `/blog/${params.slug}`,
},
}
}Next.js automatically combines metadataBase with the relative canonical path to produce the full URL in the rendered HTML.
Common canonical mistakes
Using relative URLs
Canonical tags must use absolute URLs including the protocol. A relative path like /page is ambiguous and may be ignored by search engines.
Pointing to a redirected URL
If the canonical URL returns a 301 redirect, you have a chain: page A canonicals to page B, which redirects to page C. Point the canonical directly to the final destination URL.
Inconsistent trailing slashes
If your site serves pages without trailing slashes, but the canonical has one (or vice versa), search engines may treat them as different URLs. Pick one convention and stick to it everywhere.
Canonical pointing to a noindex page
If the canonical target has a noindex directive, search engines get conflicting signals. The canonical says this is the preferred page, but noindex says do not index it. Remove the noindex or change the canonical.
Missing canonical on paginated content
For paginated lists (page 1, page 2, page 3), each page should have a self-referencing canonical. Do not point all pages to page 1, because pages 2 and 3 have different content.
Canonical URL checklist
- ✓Every public page has a self-referencing canonical tag
- ✓All canonical URLs use https (not http)
- ✓All canonical URLs use your preferred domain (www or non-www, not both)
- ✓Trailing slash convention is consistent across all canonicals
- ✓No canonical points to a URL that returns a redirect
- ✓No canonical points to a noindex page
- ✓Paginated pages use self-referencing canonicals (not page 1)
- ✓Canonical URLs match the URLs in your sitemap
FAQ
What is a canonical URL?
A canonical URL is an HTML link element that tells search engines which version of a page is the original. It uses the format <link rel="canonical" href="https://yoursite.com/page" />. This prevents duplicate content issues when the same page is accessible at multiple URLs.
Should every page have a canonical tag?
Yes. Every indexable page should have a self-referencing canonical tag that points to its own URL. This is considered a best practice by Google even when there is no duplicate content, because it prevents future issues caused by URL parameters, trailing slashes, or protocol differences.
What happens if I have duplicate content without canonicals?
Google will choose one version as the canonical on its own, and it may not be the version you want. The duplicate pages split ranking signals (backlinks, engagement) between them, weakening both. In severe cases, Google may index the wrong version or deindex duplicates entirely.
Can a canonical URL point to a different domain?
Yes, cross-domain canonicals are valid. If you syndicate content to another site, the syndicated version should have a canonical pointing back to your original. Google treats this as a strong signal but not an absolute directive.
Find canonical issues automatically
SEOLint checks for missing canonicals, redirect chains, and trailing slash mismatches on every scan.