Webの専門用語をつい忘れがちな、50代のWeb担当こまおです！
canonicalタグって何？ どう利用すればいいの？
という人はわたしと一緒にこの記事で学んで行きましょう！
- canonicalタグの意味
- canonicalタグの記述方法
- canonicalタグを利用するケース
端的にお伝えすると、canonicalタグはWebページの記述方法（HTMLタグ）の一つで、検索エンジンに「正しいWebページはこちらです！」とアピール（宣言）するものです。
検索エンジンに正しくアピールする記述方法とはどのようなものか？さっそくみていきましょう！
【目次】読みたい所へジャンプ
canonicalタグの意味とは？
canonicalタグとはなんぞや？を知る前に、検索エンジンの性格を知っておきましょう。
検索エンジンは重複コンテンツが嫌い？
前提として検索エンジンはWebページのコピー（偽・真似）コンテンツが大嫌いです。
そのような偽物のコンテンツに対しては、厳しい態度で評価を下げます。
なぜってコピーコンテンツを高く評価してしまったら、検索エンジン自身の評価を下げてしまうからです。
こまお
それでは同じサイト内の似ているコンテンツ（いわゆる類似・重複コンテンツ）はどうなのでしょうか？
重複したページがある場合は、canonicalタグでページの統合や正規化をするようにとGoogleはアドバイスしています。
こまお
SEOとしてのcanonicalタグの意味
canonicalをGoogle翻訳で確認してみました。
英語：canonical ＝ 日本語訳：正規の
参考サイト：Google翻訳
「canonical」は「正規の」という意味があります。
つまりcanonicalタグはWebページを正規化するためのHTMLタグとおぼえておきましょう。
canonicalタグの記述方法
次はcanonicalの記述方法、つまりどのような書き方をすればよいのか？をお伝えしていきます。
canonicalタグの記述位置と記述形式
Webページを正規化するためのcanonicalタグは、どこの部分に・どのように書けばいいのでしょうか？ ここが肝心なポイントです。
- 記述位置：head部分
- 記述形式：＜link rel=”canonical” href=”https://www.abc.com/aaa”/＞
こまお
実際にheadタグに挿入した記述はこのようになります。URLは適当なアドレスです。
<head> <link rel=”canonical” href=”https://www.abc.com/aaa”/> </head>headタグはtitleタグやdescriptionタグを記載する部分で、HTMLソースの上の方にあります。
こまお
canonicalタグの使い方
canonicalタグは重複した複数ページのうちの一つを、正しいページはこれ！と検索エンジンに伝えるのがお仕事。
記述する位置や形式はわかったけど、どのように使えばいいのか方法がわからない・・・
使い方・書き方は一度理解すれば簡単です。たとえばこのような2つのURLのWebページがあるとしましょう。
- 正規化したいURL：https://www.abc.com/aaa
- 重複/類似したURL：https://www.abc.com/bbb
この場合、bbbのサイトのheadタグに、aaaのサイトのURLをcanonicalタグで記入すればOKです。
実際のHTMLソース例はこのようになります。
<head> <link rel=”canonical” href=”https://www.abc.com/aaa”/> </head>まさにbbbからaaaにcanonical（正規化）する！というイメージです。この場合に、正規化したい方のURLには何も記載する必要はありません。
こまお
担当者の間では「canonicalを向ける」なんて言ってます。そう言うと少しプロっぽく感じて使いたくなりますw
補足1：「rel」の意味とは？
「rel = ◯◯」の「rel」ってよく見る書き方ですが、そもそもの意味はなんなのでしょうか？。ググってみるとサルワカさんの記事がわかりやすかったです。
このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所（URL）を指定します。relは「relation（関係）」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。
参考サイト：サルワカ
そこそこWeb担当やっていて、HTMLもある程度知っているつもりでしたが、relが「relation（関係）」の略だったとは・・・恥ずかしながら知りませんでした。
こまお
次はさらに重要なcanonicalタグを使う利用ケースに進みましょう！どんなケースの時に使うのか？がわかれば初心者を卒業ですｗ
canonicalタグを利用するケース
Webサイトを構築しページを作成・運営してくと、どうしても重複ページが出てきます。たとえばこのようなコンテンツページです。
- httpsとhttpのURLアドレス
- wwwありとwwwなしのURLアドレス
- 商品のバリエーションが複数あるコンテンツ
- スマホとPCのWebページのURLが違うコンテンツ
このようなケースでcanonicalタグを使って、検索エンジンからのマイナス評価を避けましょう。
ケース1：httpsとhttpのURLアドレス
サイトをSSL化（暗号化）すると、「http」が「https」になったURLに変更になります。
SSL化することでサイトのセキュリティレベルが向上し、安全性を高めることができるんです。
でも元の「http」のURLアドレスは間違った情報に・・・
こまお
補足2：canonicalで正規化しても400エラーになってしまう
ここは意外と盲点です。
お客様の中にはURLがわからずに「https」なのに「http」で検索したりする場合があります。
その場合は次のようなエラー画面になってしまい遷移ができません。
- Bad Request – Invalid Hostname
- HTTP Error 400. The request hostname is invalid.
これはいわゆるHTTPエラーの400で、リクエストしたホスト名が無効というエラーです。
こまお
このエラーを避けるためには「301リダイレクト」や、サーバー側での処理が必要です。
システム担当に依頼するか、WordPressの場合はプラグインで対応しましょう。
wwwありとwwwなしのURLアドレス
次は「www」のある・なしのURLアドレスについてです。「www」のある・なしとはどういう意味でしょうか？ この「www」はURLのホスト名（サブドメイン）という部分で省略することが可能です。
つまりURLの表記方法の「決め」の問題です。結論としては「wwwあり」でも「wwwなし」でも、どちらでもOKなのです。
たとえば「Google.com」はどうなっているでしょうか？
- https://google.com
- https://www.google.com
実際にブラウザーのアドレス窓に入力（もしくはコピペ）してみればわかります。
「https://google.com」を入力すると、リダイレクトされて、URL表記が「https://www.google.com」になるのがわかりますね。
このことからわかるように、Googleは「wwwあり」の「https://www.google.com」に決めています。
こまお
ちなみに当サイトは「wwwなし」のURL「https://webmarketer101.com」としています。
商品のバリエーションが複数ある類似コンテンツ
ECサイトなどの通販系での商品ページに良くあるタイプです。
サイズや容量、カラーバリエーション（カラバリ）の違いで、内容に大きな差がないため類似ページとみなされてしまいます。
このような場合にはサブの商品ページから、メインの商品ページURLにcanonicalタグを向けましょう。
スマホとPCのWebページのURLが違うコンテンツ
規模の大きいサイトに良くあります。スマホとパソコンのサイトURLが違い、サイト構造も違います。
レスポンシブなサイトは同じHTMLのソース内で、PCとスマートフォンでの見え方を変えているのでURLは同じです。
PCとスマートフォンのサイトURLどちらにcanonicalタグを向けるかは、たいがいPCの方の正規URLになります。
canonicalタグ以外の対策方法
またその他にも対策方法があるのでリストアップしておきます。
- 301リダイレクト
- .htaccessでの修正
この手法は難易度が少し高いので、次の機会にお伝えしていきます！
まとめ：canonicalタグでページを正規化
canonicalタグは重複したページの評価を下げないために、検索エンジンに正規化したURLをアピールするタグです。
canonicalタグの用法を守って、検索エンジンと良好な関係を築きましょう！
