What is a Canonical Tag (rel="canonical")? SEO Guide

How Canonical Tags Work

When search crawlers discover multiple URLs returning identical or near-identical content—such as product filters (example.com/shoes?color=red vs example.com/shoes)—Google must decide which page to display in search results.

Without an explicit canonical directive, search engines split ranking metrics (link equity, CTR, and trust) across multiple URLs or mark your pages as duplicate content, which depresses overall domain rankings.

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

Canonical Tag vs 301 Redirect: When to Use Which?

Use a Canonical Tag when:

Multiple valid URLs exist for legitimate user experience (e.g. sorting, filtering, pagination).You cross-post content on Medium or LinkedIn and want search engines to rank your primary website.You want both URLs accessible to visitors, but consolidated for Google Search.

Use a 301 Redirect when:

A page has permanently moved to a new URL structure.You are consolidating HTTP to HTTPS or non-www to www domains.The old URL should no longer be accessible to human users.

Implementing Canonical Tags in Next.js (App Router)

In modern Next.js applications, canonical links are configured directly inside page or layout metadata objects using the alternates key:

export const metadata = {
  title: 'My Canonical Page Title',
  alternates: {
    canonical: '/learn/what-is-a-canonical-tag',
  },
};

Common Canonical Tag Mistakes to Avoid

1. Relative URLs: Always use absolute URLs (e.g. https://example.com/page) rather than relative paths inside raw HTML links to prevent crawl resolution errors.
2. Canonicalizing to a 404 or Redirect: Points a canonical tag at a URL that returns a 404 error or a redirect loop causes Google to ignore the signal entirely.
3. Conflicting Signals: Putting noindex tags on a page while canonicalizing it to another master page confuses search algorithms.

Audit Missing & Conflicting Canonicals with Igris Radar

Missing or improperly configured canonical tags can quietly bleed ranking authority from your top pages. Igris Radar scans 30+ technical SEO factors—including canonical self-references, redirect chains, and indexability rules—in seconds.

Explore SEO Audit Feature Read Core Web Vitals Guide

Frequently Asked Questions

What is the difference between a canonical tag and a 301 redirect?

A 301 redirect automatically routes both users and search engines to a new URL. A canonical tag allows users to stay on the original URL (such as URL parameters like ?color=red) while signaling to search engines to consolidate ranking signals to the master URL.

Should every page have a self-referencing canonical tag?

Yes. Google recommends that every indexable page include a self-referencing canonical tag. This prevents tracking parameters (like ?utm_source=twitter) from creating unintended duplicate pages in Google Search.

How do I add canonical tags in Next.js App Router?

In Next.js App Router, export an alternates object in your metadata configuration: export const metadata = { alternates: { canonical: "/your-path" } }.

What is a Canonical Tag? Complete Technical SEO Guide