WEBマーケティングをもっと身近に。
SEO対策 2023/12/11

canonicalタグとは?書き方とURL正規化が必要なケースを解説

canonicalタグとは?書き方と正規化が必要なケース・SEO効果についてのサムネイル画像です

canonical(カノニカル)タグとは、検索エンジンに対して正規のページとして評価してもらいたいURLはどれなのかを伝えるHTMLタグです。この記事では、canonicalタグによるURLの正規化が必要なケースと使い方、注意点を解説します。

1

canonical(カノニカル)タグとは

canonical(カノニカル)タグとは、WEBページ内でコンテンツが重複した場合に、検索エンジンに対して「元となる」または「優先すべき」ページを指定するために使用されるHTMLタグです。

WEBサイトは、異なるURLで同じコンテンツが存在することがよくあります。例えばセッションID、トラッキングパラメータ、商品のカラー違い、など様々な理由で重複または類似したコンテンツが発生します。

この際、重複するコンテンツ間で「正規」とされるページを指定する役割を果たすのがcanonicalタグです。

検索エンジンはcanonicalタグで指定されたURLを見て、リンクの価値やコンテンツのランキングを決定する際にどのURLを基準にするかを判断します。

canonicalタグとは
2

canonicalタグを設定する理由

canonicalタグを設定する理由は、「URLの正規化」を行うためです。

URLの正規化とは、WEBサイト内で同じコンテンツを指す複数のURLを一つの「正規」または「標準」となるURLに統一する事を指します。URLの正規化を行う事で、重複コンテンツの問題を解決し、検索エンジンの混乱を避けることができます。

では、何故canonicalタグを使ってURLの正規化をする必要があるのでしょうか?

▼ URLの正規化をおこなう理由は以下の3つになります。

  • 重複コンテンツはSEOでマイナスになるため
  • 検索結果でユーザーに表示したいURLを指定するため
  • コンテンツシンジケーションを管理するため

それぞれ解説します。

2-1

重複コンテンツはSEOでマイナスになるため

WEBサイト上で同一のコンテンツが異なるURLでアクセス可能な場合、検索エンジンはこれらのページを別々のコンテンツとして認識し、それぞれにランクを付けようとします。

ただし、コンテンツの内容が同じである場合、重複コンテンツと見なされSEOの評価が下がってしまいます。

ここでcanonicalタグの役割が重要になります。

canonicalタグを使用することで、サイト運営者は検索エンジンに対し、どのURLが「正規」であるかを示すことができます。これにより、検索エンジンは他の重複するURLは無視することができるため、正規指定されたぺージだけを評価するようになります。

また、被リンクの評価も重複コンテンツを正規化する事で、正規ぺージに評価を集中させることができます。

2-2

検索結果でユーザーに表示したいURLを指定するため

canonicalタグを設定するもう一つの理由は、検索結果画面でユーザーに表示したいURLを指定するためです。

例えば、あるWEBサイトが商品ページを持っており、その商品ページにはカラー違いで複数のURLが存在する場合を考えてみましょう。

  • https://example.com/product/001:黒
  • https://example.com/product/002

上記の場合、黒を検索結果に表示したい時は、
https://example.com/product/001をcanonicalタグで正規のURLとして指定します。

その結果、
https://example.com/product/002は検索結果から除外されるため、ユーザーは常にサイト運営者が望む正規のページにアクセスするようになります。

このように検索結果に表示したいURLを指定する場合にも、canonicalタグを使ってURLを正規化します。

2-3

コンテンツシンジケーションを管理するため

コンテンツシンジケーションとは、作成した記事やコンテンツを自社のWEBサイト内だけで使用するのではなく、プレスリリースやメディアなど第3者が運営する媒体に記事提供・記事配信する仕組みのことです。

コンテンツシンジケーションの問題点は、配信先のサイトの「ドメインパワーが高い」「配信数が多い」場合、検索結果上で自社サイトよりも配信先のサイトの方がランキングが上になってしまうことです。

これを防ぐために配信先のページに自社のURLを指定したcanonicalタグを設定してもらい、自社のページを正規指定してもらいます。

配信先のページcanonicalタグの
設定 自社のページ正規指定
3

canonicalタグの記述方法【書き方】

▼ canonicalタグを記述する方法は以下の3つです。

  1. 【基本】HTMLに記載する方法
  2. HTTPヘッダーに記載する方法
  3. WordPressを使用して記載する方法

基本的にはHTMLのhead内にcanonicalタグを記述しますが、PDFや画像ファイルを正規化する場合はHTTPヘッダーにcanonicalタグを記述します。

また、WordPressの利用ユーザーも多いため、プラグインを使ってcanonicalタグを指定する方法も合わせて紹介します。

3-1

【基本】HTMLに記載する方法

canonicalタグの記述場所は、HTMLドキュメントの<head>セクションにリンク要素として追加します。<head>セクション以外に記述すると無効になるため、必ず<head>セクションに記述しましょう。

▼ 以下はcanonicalタグの基本的な記述方法です。

例:<link rel="canonical" 正規指定するURLを記載" />


href=”の後ろに、ページの正規バージョンのURLを指定します。上記のように正規ページを指定したcanonicalタグを、重複するページの<head>セクションに設定します。

3-2

HTTPヘッダーに記載する方法

PDFファイルや画像ファイルなどHTML以外のドキュメントを正規化する場合は、HTTPヘッダーにcanonicalタグを指定します。

HTTPヘッダーにcanonicalタグを記載する場合は、HTTPレスポンスヘッダーにLink要素を使用して、正規URLを指定します。

例:Link: <正規指定するURLを記載>; rel="canonical"


このLinkヘッダーは、サーバーからのHTTPレスポンスの一部として送信され、検索エンジンがこのURLをページの正規バージョンとして認識するようにします。

3-3

WordPressを使用して記載する方法

WordPressでは、プラグイン「All in One SEO Pack」を利用することでcanonicalタグを設定できます。プラグインを使用すると、canonicalタグの手動記述に関する知識がなくても、簡単にcanonicalタグを設定できます。

▼ 以下、「All in One SEO Pack」を使用してcanonicalタグを設定する手順になります。

  1. All in One SEO Packのインストール
    WordPressのダッシュボードにログインして「プラグイン」セクションに移動し、「新規追加」をクリックします。
    検索バーで「All in One SEO Pack」を検索し、プラグインを見つけます。
    「今すぐインストール」をクリックし、その後「アクティベート」をクリックしてプラグインを有効化します。

  2. カノニカルURLの設定
    WordPressのダッシュボードの左側のメニューから「All in One SEO」オプションを選択します。
    「一般設定」または「SEO設定」セクションに移動し、canonicalタグを設定したいページを開きます。
    「All in One SEO」の設定部分で、「カノニカルURL」フィールドを見つけ、正規指定したいURLを入力します。

  3. 変更を保存する
    正規URLを入力したら、「更新」または「公開」ボタンをクリックして変更を保存します。
    canonicalタグの記述に自信がない場合には、プラグイン「All in One SEO Pack」でcanonicalタグを設定しましょう。
4

canonicalタグでURLの正規化が必要なケース

▼ canonicalタグによるURLの正規化が必要な主なケースは以下の4つです。

  • WEBサイト内に重複コンテンツが存在している場合
  • PCサイトとスマホサイトのURLが異なる場合
  • 計測用のパラメータなどがURL付与されている場合
  • AMPを実装している場合

それぞれ、詳細と正規化の方法を解説します。

4-1

WEBサイト内に重複コンテンツが存在している場合

前述した通り、「同じWEBサイト内に重複コンテンツが存在する」ケースではcanonicalタグを使ってURLを正規化します。ECサイトや求人サイトなど、データベースの情報も基に自動でページが生成されるWEBサイトでは、特に重複コンテンツが発生しやすくなります。

例えば、ECサイトのように同じデザインの商品を色違いやサイズ違いで販売している場合は、検索エンジンに重複コンテンツだと認識されます。そのため、このようなケースではcanonicalを使ってURLの正規化を行う必要があります。

【黒色のパーカー(基準URL)】

<link rel="canonical" href="http://www.○○○.com/product?color=black" />

黒色の商品ページは自己参照のcanonicalタグを持ちます。これは、このURLが正規であることを示します。

【青色と赤色のパーカー(他のカラーバリエーション)】

青色のページ
<link rel="canonical" href="http://www.○○○.com/product?color=black" />

赤色のページ
<link rel="canonical" href="http://www.○○○.com/product?color=black" />

青色と赤色のページでは、canonicalタグは黒色のページ(正規URL)を指します。これにより、検索エンジンは青と赤のページを重複と見なさず、黒色ページのみを正規として扱います。

4-2

PCサイトとスマホサイトのURLが異なる場合

PCサイトとスマホサイトのURLが異なる場合は、canonicalタグを使ってURLの正規化を行います。

スマホサイトとPCサイトのURLを正規化


スマホサイトとPCサイトのURLを正規化する場合はPCサイトを正規ページとしますが、PCサイト側にはalternate属性を使いスマホサイトの存在を知らせる設定を行います。

そして、スマホサイトにはこのページがPCサイトのスマホページであることをGoogleに伝えるために、canonical属性のリンク先をPCサイトのURLに記述します。

  • 【PCサイトのURL】:https://www.〇〇〇.com/△△△
  • 【スマホサイトのURL】:https://www.sp.〇〇〇.com/△△△

■ PCサイト側の設定
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.sp.〇〇〇.com/△△△">

■ スマホサイト側の設定
<link rel="canonical" href="https://www.〇〇〇.com/△△△">

4-3

計測用のパラメータなどがURL付与されている場合

計測用のパラメータなどがURLに付加されている場合も、canonicalで正規化するケースに該当します。計測用のパラメータを付与している場合、URLに追加されたパラメータによって同じコンテンツが複数の異なるURLでアクセス可能になります。

例えば、マーケティングキャンペーンやトラッキング目的で、URLに特定のクエリパラメータが追加される場合以下のように重複します。

  • 基本的な商品ページURL:https://white-link.com/
  • パラメータが付与されたURL:https://white-link.com/product?campaign=summer

このような場合、検索エンジンは異なるURLとしてそれぞれ評価するため、canonicalを使用して、検索エンジンに対して「https://white-link.com/」がこのコンテンツの正規URLであることを示す必要があります。

4-4

AMPを実装している場合

AMPを実装している場合にも、canonicalタグを使ってURLの正規化を行います。AMPとは、モバイルサイトを閲覧する際にページを高速表示させるために開発されたオープンソースプロジェクトです。

AMPを実装しているケースでは、AMPに対応しているページと非対応のページの2つが存在している場合があります。この場合も2つのページが重複して存在しているため、canonicalタグを使ってURLを正規化する必要があります。

■ 非AMPページにcanonicalタグを設定する

例:<link rel="canonical" href="http://www.○○○.com/regular-page.html">

通常のWEBページでは、カノニカルタグはそのページ自身を指すように設定します。

■ AMPページにcanonicalタグを設定する

例:<link rel="canonical" href="http://www.○○○.com/regular-page.html">

AMPページでは、canonicalを通常のWEBページのURLに設定します。

5

canonicalタグを設定する際の注意点

canonicalタグはWEBサイトのSEOにおいて重要な役割を果たしますが、設定にはいくつかの注意点があります。

canonicalタグを正しく使用した場合、検索エンジンにページの正規バージョンを正確に伝え、重複コンテンツの問題を解決し、サイトの全体的なランキングを改善することができます。

しかし、誤った実装は逆にSEOに悪影響を及ぼす可能性があるため、注意が必要です。

▼ canonicalタグを設定する際の注意点は以下の4つになります。

  1. 絶対URLを正しく記述する
  2. 1つのページに複数のcanonicalタグを設定をしない
  3. canonicalタグの指定先URLをすべて同じにしない
  4. canonicalタグは必ずhead要素内に記述する

それぞれ詳しく解説します。

5-1

絶対URLを正しく記述する

canonicalタグの設定では、検索エンジンに正しく正規ページを理解してもらう必要があるため、相対URLではなく絶対URLを記述します。

  • 絶対URLの例:https://www.〇〇〇.com/△△△/index.html
  • 相対URLの例:/△△△/index.html


canonicalタグの設定 絶対URLの記述について


また、canonicalタグで設定したURLが間違っていると、設定したURLのページが検索結果に表示されなくなります。

  • :<link rel="canonical" href="https://www.〇〇〇.com/△△△">
  • :<link rel="canonical" href="htps://www.〇〇〇.com/△△△">
    ※ htpsになっているためURLが間違っている


サイト全体の評価が低下する恐れもあるので、canonicalタグを設定する際は絶対URLを正しく記載し間違いがないかを確認しましょう。

5-2

1つのページに複数のcanonicalタグを設定をしない

canonicalタグの設定は、1つのページに対して複数の設定をしてはいけません。1つのページに対して複数のcanonicalタグが存在すると、検索エンジンが混乱し、どのURLが実際に正規であるかを正確に判断できなくなる可能性があります。

このような場合、検索エンジンは異なるcanonicalタグ間で矛盾があると判断し、どのURLも正規として扱わないか、または予期しない方法でいずれかのURLを選択する可能性があります。

この問題を避けるためには、各ページにつき一つのcanonicalタグのみを設定し、それがそのページの正規URLを正確に反映していることを確認する必要があります。

5-3

canonicalタグの指定先URLを全ぺージ同じにしない

canonicalタグの指定先URLを全ページ同じにしてはいけません。異なるページがすべて同一のURLを正規として指定している場合、検索エンジンは1つのページしか無いWEBサイトと判断する可能性があります。

また、検索エンジンが混乱し全てのページがインデックスされない可能性もあるため、サイトのSEOに悪影響を与える可能性があります。複数のぺージに致してcanonicalタグを一括で設定する際に起こるミスのため、一括で設定する際は十分注意して設定をおこないましょう。

5-4

canonicalタグは必ずhead要素内に記述する

canonicalタグは、head要素内に記述する必要があります。

【正】

<head>
<link rel="canonical" href="https://www.〇〇〇.com/△△△">
</head>

<body>
</body>


<head>
</head>

<body>
<link rel="canonical" href="https://www.〇〇〇.com/△△△">
</body>


<body>タグ内にcanonicalタグを入れても検索エンジンに無視されてしまうため、必ず<head>タグ内に記述するようにしましょう。

6

canonicalタグ実装後、検索エンジンに正しく認識されているか確認する方法

Googleサーチコンソールを使って、canonicalタグで設定したURLが検索エンジンから正しく読み取られ正規URLに指定されているかを確認します。

  1. Googleサーチコンソールにログインします。
  2. canonicalタグを設定したURLを画面上部の検索窓に入力します。
    ※重複しているURLを入力します。
  3. 「ページのインデックス登録」をクリック
  4. Google が選択した正規 URL」に「ユーザーが指定した正規 URL と同じ」と表示されていれば正しく認識されています。
    「Google が選択した正規 URL」に「ユーザーが指定した正規 URL と同じ」と表示
7

canonicalタグを確認する方法

▼ canonicalタグの確認方法は2つあります。

  1. 【手動】ソースコードからcanonicalタグを確認する方法
  2. 【ツール】Screaming Frogでcanonicalタグを確認する方法

それぞれ確認方法を詳しく解説します。

7-1

【手動】ソースコードからcanonicalタグを確認する方法

確認したいWEBページをブラウザで開きます。その後、ブラウザの右クリックメニューから「ページのソースを表示」を選択して、ページのHTMLソースコードを表示します。

ソースコードからカノニカルタグの確認


ソースコードが表示されたら、<head>セクション内を調べて、<link rel="canonical" href="...">という形式のタグを探します。

<head>セクション内 <link rel="canonical" href="...">タグ
7-2

【ツール】Screaming Frogでcanonicalタグを確認する方法

Screaming Frog(スクリーミングフロッグ)は、WEBサイトのSEO監査に広く使用されるツールです。

このツールを使う事で、WEBサイト全ぺージのcanonicalタグを一覧で確認する事ができます。

  1. スクリーミングフロッグの起動
    Screaming Frogのサイトからダウンロードをおこないツールを開きます。
  2. WEBサイトのクロール
    ツール上部の「Enter URL to spider」ボックスに確認したいWEBサイトのURLを入力し、「Start」ボタンをクリックして、WEBサイトのクロールを開始します。
  3. canonicalタグの確認
    クロールが完了したら、メインウィンドウのタブの中から「Canonicals」を選択します。
    各URLに設定されたcanonicalタグが表示され、設定したURLを確認する事ができます。
    canonicalタグの確認
8

canonicalタグを使ってはいけない正規化の例

canonicalタグは、WEBページの正規化に役立ちますが、特定の状況では301リダイレクトの使用が適切です。ここではcanonicalタグを使うべきでない例について説明します。

canonicalタグは基本的に、同じまたは非常に似た内容を持つ複数のページが存在する場合に適しています。例えば異なるURLパラメータを持つ商品ページや、印刷用と通常ビューのページなどが該当します。

一方で、ユーザーにとってどちらか片方のURLしか見せる必要の無い場合は、301リダイレクトを行い正規ページにリダイレクトをかける事でURLを正規化します。

例えば、WWWのあり無しや、httpとhttpsの違いなどは、ユーザーはどちらか片方のURLだけ見れれば良いため301リダイレクトで正規化を行います。

このように、ユーザーや検索エンジンに対して片方のURLの情報だけを見せたい場合は、canonicalタグではなく301リダイレクトでURLを正規する事を覚えておきましょう。

状況適した方法
同じ内容のページが異なるURLパラメータを持つcanonicalタグ
印刷用ページと通常のページcanonicalタグ
URLのwwwあり/なしバージョン301リダイレクト
似たテーマのページを統合301リダイレクト
9

まとめ

canonicalタグの正しい使用は、検索エンジンに対して正規ぺージを提供し、SEO効果を最大限に発揮する上で不可欠です。

しかし、間違った使用は逆効果を招く可能性があるため、適切な知識と注意が必要です。canonicalタグを正しく活用することで、WEBサイトのSEO戦略全体が強化され、より多くのトラフィックを獲得することができます。

ホワイトリンク 記事内用バナー


この記事を書いたライター

SEO施策部

SEMを軸にSEOの施策を行うオルグロー内の一部署。 サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超のノウハウをSEOサービスに反映し、3,000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。

RECOMMENDED ARTICLES

ぜひ、読んで欲しい記事

  • h1タグとは?SEO効果と使い方のポイントを解説のサムネイル画像です
    SEO対策
    2024/03/26

    h1タグとは?SEO効果と使い方のポイントを解説

    2024/03/26

  • サイトマップとは?作り方とデザイン例・SEO効果についてのサムネイル画像です
    SEO対策
    2024/03/26

    サイトマップとは?種類と作るメリット・注意点を分かりやすく解説

    2024/03/26

  • CPMとは│計算方法・CPCとの違いを解説のサムネイル画像です
    SEO対策
    2024/03/18

    CPMとは?計算式とCPM課金方式のメリット・CPCとの違いを解説

    2024/03/18

  • CVR(コンバージョンレート)とは│計算式と改善方法を解説のサムネイル画像です
    SEO対策
    2024/03/15

    コンバージョン率(CVR)とは│計算式と平均値・改善方法を解説

    2024/03/15

  • 直帰率とは|離脱率との違いと計算方法を分かりやすく解説のサムネイル画像です
    SEO対策
    2024/03/21

    直帰率とは|計算方法と目安をわかりやすく解説

    2024/03/21

  • 検索順位の仕組みとは?Googleの評価プロセスを解説のサムネイル画像です
    SEO対策
    2024/03/26

    検索順位の仕組みとは?Googleの評価プロセスを解説

    2024/03/26

backtotop