What Is a Canonical Tag?

A canonical tag (<link rel="canonical">) is an HTML element placed in the <head> section of a web page. It tells search engines which URL represents the primary version of a page when identical or very similar content exists at multiple addresses.

<link rel="canonical" href="https://example.com/blog/canonical-guide" />

Think of it as a signpost that says: "If you find this content elsewhere, the real version lives here." Google, Bing, and other search engines use this signal when deciding which URL to index and display in search results. It is worth noting that canonical tags are treated as hints, not directives. Search engines may choose to ignore them if other signals contradict the tag.

Why Duplicate Content Is a Problem

Duplicate content does not trigger a penalty from Google. However, it creates real problems that can quietly erode your search performance.

How Duplicates Appear

Most duplicate content is unintentional. Common causes include:

www vs. non-www: https://www.example.com/page and https://example.com/page
Trailing slashes: /about and /about/
URL parameters: /products?color=red&size=m and /products?size=m&color=red
HTTP vs. HTTPS: http://example.com/ and https://example.com/
Print or AMP versions: /article and /article?print=true
Separate mobile URLs: https://example.com/ and https://m.example.com/

The Real Cost

When search engines encounter duplicate pages, three things happen:

Link equity splits. Backlinks pointing to different versions of the same page divide their SEO value instead of consolidating it on one URL.
Crawl budget gets wasted. Search engine bots spend time crawling duplicate pages instead of discovering new content.
The wrong URL may rank. Google might index a parameterized URL or a non-preferred version, leading to a poor user experience in search results.

When to Use Canonical Tags

Self-Referencing Canonicals

Every page on your site should include a canonical tag pointing to its own URL. This is called a self-referencing canonical. It might seem redundant, but it protects you when URL parameters or tracking codes get appended to your URLs unexpectedly.

<!-- On the page https://example.com/blog/my-post -->
<link rel="canonical" href="https://example.com/blog/my-post" />

Google explicitly recommends self-referencing canonicals as a best practice.

Parameter Variations

E-commerce sites frequently generate multiple URLs for the same product through filters, sorts, and pagination. Use canonical tags to point these variations back to the main page.

<!-- On /products?sort=price&page=1 -->
<link rel="canonical" href="https://example.com/products" />

Separate Mobile URLs

If your site serves different URLs for desktop and mobile (rather than using responsive design), use canonical and alternate tags together.

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

<!-- Mobile version (https://m.example.com/page) -->
<link rel="canonical" href="https://example.com/page" />

Cross-Domain Canonicals

When you syndicate content to partner sites, the republished version should include a canonical tag pointing back to the original.

<!-- On partner-site.com -->
<link rel="canonical" href="https://example.com/original-article" />

Cross-domain canonicals are weaker signals and more likely to be ignored by search engines. Where possible, supplement them with a noindex tag or a visible link back to the original source.

Implementation Across Frameworks

Next.js (App Router)

In Next.js 14+ with the App Router, set canonical URLs through the metadata object.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  return {
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`,
    },
  };
}

WordPress

Plugins like Yoast SEO and Rank Math handle canonical tags automatically. For manual control, use the wp_head action hook.

function add_canonical_tag() {
  echo '<link rel="canonical" href="' . esc_url(get_permalink()) . '" />';
}
add_action('wp_head', 'add_canonical_tag');

Static HTML

Add the tag directly in the <head> section of each page.

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

React (Single-Page Apps)

For React SPAs using React Helmet or similar libraries:

import { Helmet } from "react-helmet";

function BlogPost({ slug }) {
  return (
    <Helmet>
      <link rel="canonical" href={`https://example.com/blog/${slug}`} />
    </Helmet>
  );
}

Keep in mind that search engines must be able to render your JavaScript to read the tag. Server-side rendering is always more reliable for SEO-critical elements.

Common Canonical Tag Mistakes

Mistake 1: Using Relative URLs

Always use absolute URLs in canonical tags. Relative paths can be misinterpreted by search engines.

<!-- Wrong -->
<link rel="canonical" href="/blog/post" />

<!-- Correct -->
<link rel="canonical" href="https://example.com/blog/post" />

Mistake 2: Canonicalizing Everything to the Homepage

Pointing every page's canonical tag to the homepage is a critical error. It tells search engines that only your homepage has unique content, effectively de-indexing all your other pages.

Mistake 3: Combining Canonical with Noindex

A canonical tag says "index this URL instead." A noindex tag says "don't index this page." These are contradictory signals. Use one or the other, not both.

Mistake 4: Mismatched Redirects and Canonicals

If page A redirects to page B via 301, but page B's canonical points to page C, search engines receive conflicting signals. Ensure your redirect targets and canonical URLs align.

Mistake 5: Multiple Canonical Tags on One Page

Having more than one canonical tag on a page may cause search engines to ignore all of them. This commonly happens when a CMS outputs a canonical tag and a plugin or custom code adds another. Audit your pages to ensure only one canonical tag exists per page.

Mistake 6: HTTP in the Canonical URL

If your site runs on HTTPS, make sure the canonical URL uses https:// as well. Pointing to an HTTP version creates an unnecessary mismatch.

How to Verify Your Canonical Tags

Several methods exist to check whether your canonical tags are correctly configured:

Browser DevTools: View the page source and search for rel="canonical" to inspect the tag directly.
Google Search Console: Use the URL Inspection tool to see which canonical URL Google has selected for a given page. This is particularly useful because it shows you Google's actual decision, not just your declaration.
IndexReady: Our free scoring tool checks for canonical tag presence as part of the SEO category (worth 6 points out of 100). Simply enter a URL to get a comprehensive SEO and GEO audit that includes canonical tag validation alongside 22 other checks.

Canonical Tags and AI Search

As AI-powered search tools like Google AI Overview, ChatGPT, and Perplexity become more prominent, canonical tags play an indirect but important role. These systems rely on indexed content from search engines. If your preferred URL is not the one indexed due to missing or incorrect canonical tags, AI tools may cite the wrong version of your page or miss your content entirely.

Maintaining clean canonical signals is part of a broader strategy that benefits both traditional SEO and the emerging field of Generative Engine Optimization (GEO).

Summary

Canonical tags are a small piece of HTML with outsized importance for your site's search health. Here are the key takeaways:

Add a self-referencing canonical tag to every page.
Always use absolute URLs with the correct protocol.
Align canonical URLs with your redirect targets.
Use one canonical tag per page, never more.
Audit your canonicals regularly, especially after site migrations or redesigns.

Getting canonical tags right is straightforward. The challenge is maintaining them as your site evolves. Make canonical tag audits part of your regular SEO maintenance routine.

FAQ

Does Google penalize sites for duplicate content?

No. Google does not impose a manual penalty for duplicate content. However, it will choose which version to index on its own, which may not be the URL you prefer. You may also see link equity diluted across multiple versions, reducing the ranking potential of your preferred page.

Should I use canonical tags or 301 redirects?

Use a 301 redirect when users should only access one URL. The old URL becomes inaccessible and all traffic flows to the new one. Use a canonical tag when both URLs need to remain accessible to users, but you want search engines to consolidate indexing on one version. For example, filtered product pages that users actively browse but should not appear in search results are a good candidate for canonical tags.

Can I use canonical tags across different domains?

Yes. Cross-domain canonical tags are valid and supported by Google. They are commonly used for syndicated content. However, search engines treat cross-domain canonicals as weaker signals compared to same-domain canonicals. If the content on both domains is substantially different, the tag may be ignored entirely.

What happens if my CMS adds a canonical tag automatically?

Most modern CMS platforms and SEO plugins add canonical tags automatically, which is generally helpful. The risk arises when you add a second canonical tag manually or through another plugin, resulting in duplicate tags. Always check your page source to confirm only one canonical tag is present. If your CMS handles it correctly, there is usually no need to add one manually.