canonicalタグとは？重複コンテンツを防ぐ正しい設定方法を徹底解説
canonicalタグとは？
canonicalタグ（<link rel="canonical">）は、同一または類似のコンテンツが複数のURLに存在する場合に、検索エンジンに対して「このURLが正規版です」と宣言するためのHTMLタグです。
<link rel="canonical" href="https://example.com/blog/canonical-guide" />
このタグは <head> セクション内に記述します。Googleをはじめとする主要な検索エンジンは、このタグを参考にしてインデックスすべきURLを判断します。ただし、canonicalタグはあくまで「ヒント」であり、検索エンジンが必ずしもそのとおりに従うわけではない点は覚えておきましょう。
なぜ重複コンテンツが問題になるのか
Webサイトでは、意図せず同じコンテンツが複数のURLでアクセス可能になるケースが頻繁に発生します。
よくある重複パターン
- www有無の違い:
https://example.com/とhttps://www.example.com/ - 末尾スラッシュの有無:
/blog/postと/blog/post/ - URLパラメータ:
/products?color=red&size=mと/products?size=m&color=red - HTTPとHTTPS:
http://example.com/とhttps://example.com/ - 印刷用ページ:
/articleと/article?print=true - モバイル用URL:
https://example.com/とhttps://m.example.com/
これらの重複が存在すると、検索エンジンは以下のような問題を抱えます。
- 評価の分散: 被リンクやページの評価が複数URLに分散し、本来のSEO効果を発揮できない
- クロールバジェットの浪費: 検索エンジンのクローラーが同じ内容のページを何度もクロールする
- 意図しないURLのインデックス: パラメータ付きURLなど、望ましくないURLが検索結果に表示される
canonicalタグを設定すべき場面
1. 自己参照canonical（セルフリファレンシング）
すべてのページに、自分自身のURLを指すcanonicalタグを設定することが推奨されています。これは「自己参照canonical」と呼ばれます。
<!-- https://example.com/blog/my-post のページ内 -->
<link rel="canonical" href="https://example.com/blog/my-post" />
「自分自身を指すなら不要では？」と思うかもしれませんが、自己参照canonicalを設定しておくことで、URLパラメータが付加された場合や、意図しない形でURLが変わった場合でも、正規URLを明確にできます。Googleも自己参照canonicalの設定を推奨しています。
2. パラメータ違いのURL
ECサイトのフィルタリングやソート機能によって生成されるURLは、canonicalタグで正規版を指定しましょう。
<!-- /products?sort=price&page=1 のページ内 -->
<link rel="canonical" href="https://example.com/products" />
3. PCとモバイルで別URLの場合
レスポンシブデザインではなく、PC用・モバイル用で別URLを運用している場合、canonicalとalternateを組み合わせます。
<!-- PC版 (https://example.com/page) -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page" />
<!-- モバイル版 (https://m.example.com/page) -->
<link rel="canonical" href="https://example.com/page" />
4. クロスドメインcanonical
他のサイトに同じコンテンツを配信する場合（シンジケーション）、配信先のページからオリジナルのURLにcanonicalを向けることで、オリジナルコンテンツの評価を守れます。
<!-- partner-site.com に掲載した記事 -->
<link rel="canonical" href="https://example.com/original-article" />
ただし、クロスドメインcanonicalは検索エンジンに無視されやすい傾向があるため、可能であれば noindex の併用や、配信元への被リンク設置も検討しましょう。
フレームワーク別の実装方法
Next.js（App Router）
Next.js 14以降のApp Routerでは、metadata オブジェクトでcanonicalを設定できます。
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
return {
alternates: {
canonical: `https://example.com/blog/${params.slug}`,
},
};
}
WordPress
WordPressでは、Yoast SEOやRank Mathなどのプラグインが自動的にcanonicalタグを出力します。手動で設定する場合は、wp_head アクションフックを使います。
function add_canonical_tag() {
echo '<link rel="canonical" href="' . esc_url(get_permalink()) . '" />';
}
add_action('wp_head', 'add_canonical_tag');
静的HTMLサイト
各ページの <head> セクションに直接記述します。
<head>
<link rel="canonical" href="https://example.com/about" />
</head>
canonicalタグでよくある間違い
間違い1：相対URLで記述する
canonicalタグのhref属性には、必ず絶対URLを指定してください。相対URLだと検索エンジンが正しく解釈できない可能性があります。
<!-- NG -->
<link rel="canonical" href="/blog/post" />
<!-- OK -->
<link rel="canonical" href="https://example.com/blog/post" />
間違い2：全ページをトップページにcanonicalする
サイト内のすべてのページからトップページにcanonicalを向けるのは重大な誤りです。各ページの固有のコンテンツがインデックスされなくなります。
間違い3：canonicalとnoindexの併用
noindex を設定しているページにcanonicalタグを付けるのは矛盾した指示です。Googleはどちらを優先すべきか判断に困ります。インデックスさせたくないなら noindex のみ、正規URLを指定したいなら canonical のみにしましょう。
間違い4：リダイレクト先とcanonicalの不一致
301リダイレクトの向き先とcanonicalタグが指すURLが異なると、検索エンジンに混乱を与えます。両者は必ず一致させてください。
間違い5：HTTPのURLを指定する
サイトをHTTPS化しているにもかかわらず、canonicalタグに http:// のURLを指定してしまうケースがあります。必ず実際に配信しているプロトコルと一致させましょう。
canonicalタグの設定を確認する方法
canonicalタグが正しく設定されているかは、以下の方法で確認できます。
- ブラウザの開発者ツール: ページのソースコードを表示して
rel="canonical"を検索する - Google Search Console: 「URL検査」ツールでGoogleが認識しているcanonical URLを確認する
- IndexReady: 当サイトの無料スコアリングツールでは、SEOカテゴリの「canonicalタグ」項目（6点配点）でcanonicalタグの有無を自動チェックできます。URLを入力するだけで、canonicalタグを含むSEO/GEO対策の総合診断が可能です
まとめ
canonicalタグは地味ながら、サイトのSEO評価を守る上で欠かせない要素です。特に以下の点を意識しましょう。
- すべてのページに自己参照canonicalを設定する
- 絶対URLで記述する
- リダイレクト先とcanonical先を一致させる
- サイトの成長に伴って重複が発生していないか定期的にチェックする
正しいcanonicalタグの設定は、技術的には簡単ですが、見落としやすいポイントでもあります。一度設定して終わりではなく、サイトの変更やリニューアルのたびに見直す習慣をつけてください。
よくある質問（FAQ）
canonicalタグを設定しないとペナルティを受けますか？
canonicalタグがなくても、Googleからペナルティを受けることはありません。ただし、重複コンテンツが存在する場合、Googleが独自に正規URLを判断するため、意図しないURLがインデックスされたり、評価が分散したりするリスクがあります。トラブルを未然に防ぐためにも設定しておくべきです。
canonicalタグと301リダイレクトはどう使い分けますか？
ユーザーがアクセスできるURLがひとつだけでよい場合は301リダイレクトを使います。複数のURLにユーザーがアクセスできる状態を維持しつつ、検索エンジンには正規版を伝えたい場合はcanonicalタグを使います。例えば、パラメータ付きURLはユーザーにとって必要だがインデックスは不要という場合、canonicalタグが適しています。
複数のcanonicalタグが同じページにあるとどうなりますか？
1つのページに複数のcanonicalタグが存在する場合、Googleはすべてのcanonicalタグを無視する可能性があります。必ず1ページにつき1つのcanonicalタグのみを設定してください。CMSやプラグインが自動的にcanonicalを出力している場合、手動で追加すると重複するため注意が必要です。
canonicalタグはJavaScriptで動的に挿入しても有効ですか？
Googleはレンダリング後のHTMLからcanonicalタグを読み取ることができるため、JavaScript経由でも技術的には機能します。しかし、レンダリングのタイミングや失敗のリスクを考えると、サーバーサイドでHTMLに直接含める方が確実です。可能な限りSSRまたは静的HTMLで出力することを推奨します。