canonicalタグってどうやって使用するの？記述方法や注意点など分かりやすく解説
2021.07.16
canonical(カノニカル)タグとは、重複したコンテンツを一つのURLにまとめるHTMLタグのことです。
設定することで、重複ページを排除し検索エンジンのクローラーに正しくページを評価してもらうことができるので、検索上位を狙うなら必ず設定しておきたいタグです。
canonical(カノニカル)タグとは
canonicalタグとはURLを正規化させるタグです。
ここでは定義からSEO効果まで解説していきます。
canonicalタグの定義
canonicalタグのcanonicalとは「標準的な」という意味です。このタグを設定することで、重複したコンテンツを一つのURLにまとめてくれます。これをURLの正規化と言います。
URLは例えるなら、ウェブサイト上の住所のようなものです。検索エンジンのクローラーは、このURL(住所)単位でサイトを訪問してページの評価をしていきます。
なので、canonicalタグを設定してURLを正規化することは、検索エンジンのクローラーに評価してほしいページを正しく伝える事につながります。
canonicalタグのSEO効果
canonicalタグを設定するだけでは直接的に大きなSEO効果はありません。
しかし、先ほど述べたようにcanonicalタグは検索エンジンのクローラーに、評価してほしいページを正しく伝える事ができます。
重複したページがあるとクローラーの評価が分散するだけでなく、質の低いコンテンツとみなされて評価も下がってしまう可能性もあります。
なのでSEOの効果があるというよりは、canonicalタグはSEOへの悪影響を防いでくれると言えます。
そのため下記のようなケースに当てはまる場合は必ず設定しておきましょう。
canonicalタグはこんなときに使う
canonicalタグはどういった場合に使うのでしょうか。
代表的なパターンを中心に紹介していきます。
重複した内容のページが複数あるとき
これは、よくECサイトなどで見られます。
例えば、ECサイトで服を選ぶ際に、カラーやサイズによってページが複数ありますよね。
これはコンテンツの内容は同じですが、ページのURLと服のカラーやサイズの掲載されている画像が異なります。
コンテンツの内容が同じでも、URLが違う場合は、それぞれ別のコンテンツと認識され、重複ページとして評価されてしまいますので、代表のページを1つ決めcanonicalタグでURLの正規化を行います。
▼関連記事
複数のURLで同じ内容のページが表示されるとき
複数のURLで同じ内容のページとは、例えば以下URLの「有る無し」があります。
- URL末尾の/(スラッシュ)の有る無し
- index.htmlの有る無し
- httpsとhttp
- www有る無し
このケースは、URLの転送設定(301リダイレクト)をしていない場合に起こりうるパターンです。
先ほど述べたように、検索エンジンのクローラーはサイトのURLごとにページを評価しています。
複数のURLで同じ内容のページが表示されると、重複したページと認識されてしまいますので、正規とするURL以外のページにcanonicalタグを設定する必要があります。
これにより、クローラーに「このページの正規化URLは●●です」と伝える事ができるわけです。
しかし、このようなケースの場合は、301リダイレクトを行うことをGoogleは推奨しておりますので、.htaccessに301リダイレクトの記述をし、なるべくリダイレクトの設定を行うことをおススメします。
パラメータ付きURLを使うとき
よくweb広告などで流入アクセス解析のために、パラメータをURLに付与することがあると思います。
この場合も、クローラーに本来の正規ページを評価してもらえるようにcanonicalタグでURLの正規化をします。
▼関連記事
PCとスマホ(モバイル)で別のページを使っているとき
PCとスマホでページの内容が同じでも、URLが異なる場合があります。
この場合、スマホ(モバイル)側ページに、canonicalタグを設定して正規化ページ（ここではPC用ページのURL）をクローラーに伝えましょう。
ちなみに、この場合PC側ページには「canonicalタグ」ではなく「alternateタグ」を設定します。
alternateタグをPC側のページに設定すると、クローラーはサイトのスマホ(モバイル)用ページの場所を認識できるようになります。
PCページとスマホページをそれぞれ作成する際に行うことについては、「Google検索セントラル」でも解説されていますので、一読しておくことをおすすめします。
canonicalタグの記述方法（書き方）
ここでは、canonicalタグの記述方法について解説していきます。
絶対パスと相対パス
まずcanonicalタグの記述方法には、絶対パスと相対パスの二種類があります。
絶対パスは、リンク先URLを「https://」も含んでそのままフルで記述することを言います。
相対パスは、「https://」を省きファイルの場所だけ指定する記述方法です。
例）
▼絶対パス
- https://pecopla.net/seo-column/canonical-tag
▼相対パス
- /seo-column/how-to-use-canonical
Googleは絶対パスで記述することをおススメしていますので、絶対パスで記述しましょう。
▼関連記事
canonicalタグを記述する場所
canonicalタグを記述する場所は、ページソースの<head>内に設定します。
コンテンツの内容部分にあたる<body>ではなく、ページの情報を記載する<head>部分に記述しましょう。
また検索エンジンのクローラーは、ページの構造を上から順に見ていきますので<head>内でも、なるべくソースの上の方にcanonicalタグを記述しましょう。
canonicalタグの記述内容
canonicalタグの記述内容は、ページソースの<head>内に以下を記述します。
【記述例】
<head>
<link rel="canonical" href="正規化したいURL">
</head>
実際に記述してみるとこんな感じです。
<link rel="canonical" href="https://pecopla.net/company">
これをソースの<head>内に記述します。
canonicalタグの注意事項
ここでは、canonicalタグを設定するうえでの注意事項を説明していきます。
canonicalタグの記述するURLは正しいか
URLは、ウェブサイト上の住所(番地)のようなものです。
canonicalタグで設定する正規化のURLを間違えてしまうと、検索エンジンのクローラーに誤った住所を伝えてしまうのと同じです。
そのため正しく評価されず、下手すると検索結果に表示されない可能性もあります。
よくテンプレートをそのままコピー＆ペーストして正規URLとは違うURLを設定してしまうことがありますので、必ず正しいURLとなっているか確認し設定してください。
記述は絶対パス
先ほど記述方法には、絶対パスと相対パスがあると紹介しました。
確実に正しいURLをクローラーに伝えるため、リンク先URLを「https://」も含んでそのままフルで記述する「絶対パス」で記述してください。
記述する場所は間違えないように
先ほど述べたように、canonicalタグはページソースの<head>内に設定します。
コンテンツの内容部分にあたる<body>部分ではありませんので注意してください。
canonicalタグの設置が正しいかチェックしよう
ページをウェブに公開する前に、canonicalタグが正しく設定されているかチェックしましょう。
Google Search Consoleでチェック
canonicalタグを設定した後、Google がどのページを正規と見なすか確認するには、Google Search Consoleの「URL 検査ツール」を使用します。
確認したいページのURLを入力後、「カバレッジ」をチェックしてみましょう。
このようにGoogleが選択した正規URLを確認する事ができますので、指定したURLとGoogleが選択した正規URLが一致しているか確認しましょう。
万が一、一致していない場合は、ページ自体に問題がある場合やサイト構造に問題がある場合もありますので、問題点がどこにあるか調査する必要があります。
▼関連記事
Google Chromeの拡張機能でチェック
Google Chromeが拡張機能として提供している「Checkbot」でも正規化URLの設定が正しいか確認する事ができます。
Google Search Consoleがおススメですが、使用できない場合は「Checkbot」で確認ください。
まとめ
このように、canonical（カノニカル）タグは、重複ページを排除し、検索エンジンのクローラーに評価してほしい正規のURLを伝える重要なものです。
設定を間違えると検索順位に影響が出るなど重大な機会損失につながりますので、正しく設定していきましょう。
関連
Webサイト制作サイト制作
Webサイト制作
