The canonical tag (rel="canonical") is an HTML element that tells search engines which URL is the preferred version among duplicate pages. It prevents SEO value from being diluted across duplicate content.
What Is a Canonical Tag?
A canonical tag (rel="canonical") is an HTML element placed in the <head> section that tells search engines which URL is the preferred (original) version when the same or similar content exists at multiple URLs.
Google began supporting canonical tags in 2009. Today, it is the standard method for resolving duplicate content issues. While canonical is a "hint" rather than a directive, when set correctly it serves as a very strong signal to search engines.
/* Canonical tag basic syntax */
<head> <link rel="canonical" href="https://example.com/page" /> </head>
Why Are Canonical Tags Necessary?
Websites often have the same content accessible at multiple URLs unintentionally — due to URL parameters, www variations, HTTP/HTTPS, trailing slashes, and more. Search engines may treat these as separate pages, splitting your SEO value across duplicates.
25–30%
Percentage of web content that has duplicates
Up to 50%
Crawl budget wasted on duplicate URLs
1
Canonical URL Google indexes per duplicate group
When You Need Canonical Tags
Canonical tags are especially important in the following scenarios. Check if any apply to your site and set up proper URL canonicalization.
| Case | Example | Solution |
|---|---|---|
| www vs non-www | example.com and www.example.com | Canonicalize to one version |
| HTTP vs HTTPS | http://... and https://... | Set HTTPS URL as canonical |
| URL parameters | ?sort=price&page=1 (sorting/filtering) | Set parameter-free URL as canonical |
| Print pages | /article and /article/print | Set the regular page as canonical |
| Tracking parameters | ?utm_source=twitter&utm_medium=social | Set the clean URL as canonical |
| Mobile/Desktop URLs | m.example.com and example.com | Set desktop URL as canonical (responsive preferred) |
Best Practices
Add self-referencing canonicals to every page
Setting each page's own URL as canonical prevents value dilution from parameterized URLs and content scrapers.
Use absolute URLs
Always specify canonical URLs as absolute (e.g., "https://example.com/page"). Relative paths may not be processed correctly.
Specify HTTPS URLs
Always use the HTTPS version for canonical URLs. Specifying HTTP prevents proper migration signals to search engines.
Set only one canonical per page
Multiple canonical tags on the same page may cause search engines to ignore all of them. Always include exactly one.
Match sitemap URLs
Ensure the URLs in your sitemap match your canonical URLs. Mismatches send conflicting signals to search engines.
Common Mistakes to Avoid
Using relative URLs
Specifying canonical URLs with relative paths like "/page" may prevent search engines from correctly identifying the preferred URL. Always use absolute URLs starting with "https://".
Combining canonical with noindex
Canonical says "index this URL as the preferred version" while noindex says "don't index this page." These contradictory signals cause Google to ignore one of them.
Wrong pagination canonicals
Setting page 1 as the canonical for page 2, 3, etc. of a blog listing is incorrect. Each paginated page has unique content and should use a self-referencing canonical.
Canonical points to a redirecting URL
If the canonical URL redirects (301) to another URL, it sends confusing signals to search engines. Always specify the final destination URL as the canonical.
Setup by CMS / Framework
WordPress
In WordPress, SEO plugins like RankMath or Yoast SEO let you set canonical URLs from the admin panel. For manual setup, add a hook in functions.php.
/* functions.php */
function add_canonical_tag() {
if (is_singular()) {
echo '<link rel="canonical" href="'
. esc_url(get_permalink())
. '" />';
}
}
add_action('wp_head', 'add_canonical_tag');
/* RankMath / Yoast SEO */
/* SEO > General > Canonical URL */Next.js
In Next.js App Router, use the metadata API with alternates.canonical. In Pages Router, add a <link> tag inside the <Head> component.
/* Next.js App Router (metadata) */
export const metadata: Metadata = {
alternates: {
canonical: "https://example.com/page",
},
}
/* Next.js Pages Router (Head) */
import Head from "next/head"
<Head>
<link
rel="canonical"
href="https://example.com/page"
/>
</Head>Static HTML
For static HTML, add the <link rel="canonical"> tag directly in the <head> section. Since you need to set it manually on every page, managing it through templates is recommended.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ページタイトル</title>
<link
rel="canonical"
href="https://example.com/page"
/>
</head>
<body>...</body>
</html>