canonicalタグとは？
canonicalタグ（rel="canonical"）とは、同じまたは類似のコンテンツが複数のURLに存在する場合に、検索エンジンに対して「このURLが正規版（オリジナル）です」と伝えるためのHTMLタグです。HTMLの<head>内に記述します。
Googleは2009年にcanonicalタグのサポートを開始しました。現在では、重複コンテンツ問題を解決するための標準的な手法として広く使われています。canonicalはあくまで「ヒント」であり、Googleが必ずしも従うとは限りませんが、正しく設定すれば非常に強力なシグナルになります。
/* canonicalタグの基本構文 */
<head> <link rel="canonical" href="https://example.com/page" /> </head>
なぜcanonicalタグが必要なのか？
Webサイトでは、意図せず同じコンテンツが複数のURLでアクセス可能になることがあります。URLパラメータ・www有無・http/https・末尾スラッシュの有無など、さまざまな原因で重複URLが発生します。検索エンジンはこれらを「別のページ」と認識し、SEO評価が分散してしまいます。
25〜30%
Web上のコンテンツのうち重複が存在する割合
最大50%
重複URLによるクロール予算の浪費率
1つ
Googleがインデックスする正規URL数（重複群あたり）
canonicalタグの設定が必要なケース
以下のようなケースでは、canonicalタグの設定が特に重要です。該当するものがないか確認し、正規URLへの正規化を行いましょう。
| ケース | 例 | 対策 |
|---|---|---|
| www有無の重複 | example.com と www.example.com | どちらか一方をcanonicalに統一 |
| http/httpsの重複 | http://... と https://... | httpsのURLをcanonicalに指定 |
| パラメータ付きURL | ?sort=price&page=1 などの並び替え・フィルタ | パラメータなしのURLをcanonicalに指定 |
| 印刷用ページ | /article と /article/print | 通常ページをcanonicalに指定 |
| トラッキングパラメータ | ?utm_source=twitter&utm_medium=social | パラメータなしの正規URLをcanonicalに指定 |
| モバイル版/PC版の別URL | m.example.com と example.com | PC版URLをcanonicalに指定（レスポンシブ推奨） |
設定のベストプラクティス
自己参照canonicalを全ページに設定
各ページに自身のURLをcanonicalとして設定することで、パラメータ付きURLやコピーサイトからの評価分散を防ぎます。
絶対URLで記述する
canonical URLは必ず「https://example.com/page」のような絶対URLで指定してください。相対パス（/page）では正しく処理されない場合があります。
HTTPSのURLを指定する
canonical URLには常にHTTPS版のURLを使用してください。HTTP版を指定すると、HTTPSへの移行が正しく検索エンジンに伝わりません。
1ページに1つだけ設定
同一ページに複数のcanonicalタグがある場合、検索エンジンはすべてを無視する可能性があります。必ず1つだけ設定してください。
サイトマップのURLと一致させる
サイトマップに記載するURLとcanonical URLを一致させてください。不一致があると検索エンジンに混乱したシグナルを送ります。
よくある失敗パターン
相対URLで記述している
canonical URLを「/page」のように相対パスで指定すると、検索エンジンが正規URLを正しく認識できない場合があります。必ず「https://」から始まる絶対URLを使用してください。
canonicalとnoindexを併用している
canonicalは「このURLを正規版としてインデックスしてください」という指示ですが、noindexは「インデックスしないでください」という指示です。矛盾するシグナルを送ることになり、Googleはどちらか一方を無視します。
ページネーションでの誤設定
ブログ一覧の2ページ目以降に1ページ目のcanonicalを設定するのは間違いです。各ページは固有のコンテンツを持つため、自己参照canonicalを設定してください。
canonical先がリダイレクトURLになっている
canonicalに指定したURLが301リダイレクトで別のURLに転送される場合、検索エンジンに混乱したシグナルを送ります。必ずリダイレクト後の最終URLを指定してください。
CMS・フレームワーク別の設定方法
WordPress
WordPressではRankMathやYoast SEOなどのSEOプラグインを使うと、管理画面からcanonical URLを簡単に設定できます。手動で追加する場合は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
Next.js App Routerではmetadata APIのalternates.canonicalで設定します。Pages Routerでは<Head>コンポーネント内に<link>タグを記述します。
/* 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>静的HTML
静的HTMLの場合は、<head>タグ内に直接<link rel="canonical">を記述します。全ページに手動で設定する必要があるため、テンプレートで一括管理することを推奨します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ページタイトル</title>
<link
rel="canonical"
href="https://example.com/page"
/>
</head>
<body>...</body>
</html>