canonicalタグとは?重複コンテンツを防ぐ正しい設定方法を徹底解説
canonicalタグとは?
canonicalタグ(<link rel="canonical">)は、HTMLの<head>セクション内に記述するタグで、同一または類似のコンテンツが複数のURLに存在する場合に、検索エンジンに対して「このURLが正規版です」と宣言する役割を持ちます。
<link rel="canonical" href="https://example.com/blog/canonical-guide" />
いわば「このコンテンツを他の場所で見つけたとしても、本物はここにあります」と示す道標のようなものです。Google、Bing、その他の検索エンジンはこのシグナルを参考に、どのURLをインデックスし、検索結果に表示するかを判断します。ただし、canonicalタグはあくまで「ヒント」であり、強制力のある「ディレクティブ」ではない点を覚えておきましょう。他のシグナルと矛盾する場合、検索エンジンがcanonicalタグを無視することもあります。
なぜ重複コンテンツが問題になるのか
重複コンテンツが存在しても、Googleからペナルティを受けることはありません。しかし、検索パフォーマンスを静かに蝕む実害が発生します。
よくある重複パターン
重複コンテンツのほとんどは意図せず発生します。よくある原因は以下のとおりです。
- www有無の違い:
https://www.example.com/pageとhttps://example.com/page - 末尾スラッシュの有無:
/aboutと/about/ - URLパラメータ:
/products?color=red&size=mと/products?size=m&color=red - HTTPとHTTPS:
http://example.com/とhttps://example.com/ - 印刷用・AMP版ページ:
/articleと/article?print=true - モバイル用URL:
https://example.com/とhttps://m.example.com/
重複がもたらす実害
検索エンジンが重複ページを検出すると、3つの問題が発生します。
- 被リンクの評価が分散する。 同じページの異なるバージョンに向けられた被リンクは、SEO評価が1つのURLに集約されず、本来のポテンシャルを発揮できません。
- クロールバジェットが浪費される。 検索エンジンのクローラーが同じ内容のページを何度もクロールすることで、新しいコンテンツの発見が遅れます。
- 意図しないURLがインデックスされる。 Googleがパラメータ付きURLや優先でないバージョンをインデックスしてしまい、検索結果でのユーザー体験が低下します。
canonicalタグを設定すべき場面
自己参照canonical(セルフリファレンシング)
すべてのページに、自分自身のURLを指すcanonicalタグを設定することが推奨されています。これは「自己参照canonical」と呼ばれます。
<!-- https://example.com/blog/my-post のページ内 -->
<link rel="canonical" href="https://example.com/blog/my-post" />
「自分自身を指すなら不要では?」と思うかもしれませんが、URLにトラッキングパラメータやクエリ文字列が予期せず付加された場合でも、正規URLを明確にしておく防御策になります。Googleも自己参照canonicalの設定を公式に推奨しています。
パラメータ違いのURL
ECサイトのフィルタリング、ソート、ページネーションによって生成されるURLは、canonicalタグで正規版を指定しましょう。
<!-- /products?sort=price&page=1 のページ内 -->
<link rel="canonical" href="https://example.com/products" />
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" />
クロスドメインcanonical
他のサイトにコンテンツを配信する場合(シンジケーション)、配信先のページからオリジナルのURLにcanonicalを向けることで、オリジナルコンテンツの評価を守れます。
<!-- partner-site.com に掲載した記事 -->
<link rel="canonical" href="https://example.com/original-article" />
ただし、クロスドメインcanonicalは同一ドメイン内の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>
React(シングルページアプリケーション)
React SPAでReact HelmetなどのライブラリでHTMLメタ要素を管理している場合は、以下のように設定します。
import { Helmet } from "react-helmet";
function BlogPost({ slug }) {
return (
<Helmet>
<link rel="canonical" href={`https://example.com/blog/${slug}`} />
</Helmet>
);
}
ただし、検索エンジンがcanonicalタグを認識するためにはJavaScriptのレンダリングが必要です。SEOにとって重要な要素は、可能な限りサーバーサイドレンダリング(SSR)で出力するのが確実です。
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の併用
canonicalタグは「代わりにこのURLをインデックスしてください」という意味で、noindexは「このページをインデックスしないでください」という意味です。この2つは矛盾した指示です。インデックスさせたくないなら noindex のみ、正規URLを指定したいなら canonical のみにしましょう。
間違い4:リダイレクト先とcanonicalの不一致
ページAが301リダイレクトでページBに転送されるのに、ページBのcanonicalがページCを指しているような場合、検索エンジンに矛盾したシグナルを送ることになります。リダイレクトの向き先とcanonicalタグが指すURLは必ず一致させてください。
間違い5:1ページに複数のcanonicalタグ
1つのページに複数のcanonicalタグが存在する場合、検索エンジンはすべてのcanonicalタグを無視する可能性があります。CMSが自動的にcanonicalを出力し、さらにプラグインやカスタムコードが別のcanonicalを追加してしまうケースがよくあります。ページソースを確認し、canonicalタグが1つだけであることを確認しましょう。
間違い6:HTTPのURLを指定する
サイトをHTTPS化しているにもかかわらず、canonicalタグに http:// のURLを指定してしまうケースがあります。必ず実際に配信しているプロトコル(https://)と一致させましょう。
canonicalタグの設定を確認する方法
canonicalタグが正しく設定されているかは、複数の方法で確認できます。
- ブラウザの開発者ツール: ページのソースコードを表示して
rel="canonical"を検索する。タグの内容を直接確認できます。 - Google Search Console: 「URL検査」ツールで、Googleが実際にどのcanonical URLを選択したかを確認できます。自分の宣言したURLと一致しているかどうかがわかるため、特に有用です。
- IndexReady: 当サイトの無料スコアリングツールでは、SEOカテゴリの「canonicalタグ」項目(6点配点)でcanonicalタグの有無を自動チェックします。URLを入力するだけで、canonicalタグの検証を含む22以上の項目を一括で診断できます。
canonicalタグとAI検索
GoogleのAI Overview、ChatGPT、Perplexityなど、AIを活用した検索ツールの台頭により、canonicalタグは間接的ですが重要な役割を果たしています。これらのAIシステムは、検索エンジンがインデックスしたコンテンツを情報源としています。canonicalタグが設定されていないか、誤って設定されているために、意図した正規URLがインデックスされていない場合、AIツールは誤ったバージョンのページを引用したり、あなたのコンテンツをまったく見逃したりする可能性があります。
正確なcanonicalシグナルを維持することは、従来のSEOだけでなく、GEO(Generative Engine Optimization)の観点からも重要な施策の一部です。
まとめ
canonicalタグは地味ながら、サイトのSEO評価を守る上で欠かせない要素です。ポイントは以下のとおりです。
- すべてのページに自己参照canonicalを設定する
- 必ず正しいプロトコルの絶対URLで記述する
- リダイレクト先とcanonical先を一致させる
- 1ページにつきcanonicalタグは1つだけにする
- サイトの移行やリニューアル後は必ず監査を行う
正しいcanonicalタグの設定は技術的には簡単ですが、サイトが成長するにつれて見落としが生まれやすいポイントでもあります。一度設定して終わりではなく、サイトの変更やリニューアルのたびに見直す習慣をつけ、canonicalタグの監査をSEO定期メンテナンスの一環に組み込んでください。
よくある質問(FAQ)
canonicalタグを設定しないとペナルティを受けますか?
いいえ、Googleは重複コンテンツに対して手動ペナルティを課すことはありません。ただし、重複コンテンツが存在する場合、Googleが独自に正規URLを判断するため、意図しないURLがインデックスされたり、被リンクの評価が複数のバージョンに分散したりするリスクがあります。トラブルを未然に防ぐためにも設定しておくべきです。
canonicalタグと301リダイレクトはどう使い分けますか?
ユーザーがアクセスできるURLを1つだけに限定したい場合は、301リダイレクトを使います。古いURLにアクセスすると自動的に新しいURLに転送され、元のURLにはアクセスできなくなります。一方、複数のURLにユーザーがアクセスできる状態を維持しつつ、検索エンジンには正規版を伝えたい場合はcanonicalタグを使います。例えば、フィルタ付きの商品一覧ページはユーザーにとって必要だがインデックスは不要というケースでは、canonicalタグが適しています。
異なるドメイン間でcanonicalタグを使用できますか?
はい、クロスドメインcanonicalはGoogleにサポートされており、シンジケーションコンテンツでよく使われます。ただし、同一ドメイン内のcanonicalに比べて弱いシグナルとして扱われます。両方のドメインのコンテンツが大幅に異なる場合、タグは完全に無視される可能性があります。
CMSが自動的にcanonicalタグを追加している場合はどうすればよいですか?
WordPress、Shopifyなどの最新のCMSプラットフォームやSEOプラグインの多くは、canonicalタグを自動的に出力しています。これは通常便利ですが、手動やプラグイン経由で2つ目のcanonicalタグを追加してしまうリスクがあります。ページソースを必ず確認し、canonicalタグが1つだけ存在することを確認してください。CMSが正しく処理してくれている場合は、手動での追加は不要です。