50代のWeb担当ウェブ太です！
canonicalタグって何？どう利用すればいいの？
という人はわたしと一緒にこの記事で学んで行きましょう！
- canonicalタグの意味とは？
- canonicalタグの記述方法
- canonicalタグの使い方
端的にお伝えすると、canonicalタグはWebページの記述方法の一つで、検索エンジンに「正しいWebページはこちらです！」とアピール（宣言）するものです。
検索エンジンに正しくアピールする記述方法とはどのようなものか？さっそくみていきましょう！
読みたい所へジャンプ
canonicalタグの意味とは？
canonicalタグとはなんぞや？を知る前に、検索エンジンの性格を知っておきましょう。
検索エンジンは重複コンテンツが嫌い？
前提として検索エンジンはWebページのコピー（偽・真似）コンテンツが大嫌いです。
そのような偽物のコンテンツに対しては厳しい態度で、検索エンジンはその評価を下げます。だってコピーコンテンツを検索エンジンが評価してしまったら、検索エンジン自身の評価を下げてしまうからです。
それでは同じサイト内の似ているコンテンツ（いわゆる類似・重複コンテンツ）はどうなのでしょうか？
Googleは上記の記事で重複ページがある場合は、ページの統合や正規化をしてくださいと言っています。
ウェブ太
SEOとしてのcanonicalタグの意味
canonicalをGoogle翻訳で確認すると下記の意味が出てきます。
英語：canonical ＝ 日本語訳：正規の
参考サイト：Google翻訳
そのままなのですが「canonical」は「正規の」という意味です。
つまり意味合いとして、canonicalタグはWebページを正規化するためのHTMLタグとおぼえておきましょう。
canonicalタグの記述方法
canonicalタグの意味が理解できたら、次は記述方法、つまり書き方の作法です。
さきほど「Webページを正規化するためのHTMLタグ」と言いましたが、どこの部分に・どのように書けばいいのでしょうか？ここが肝心なポイントです。
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タグというと、WordPressでブログ運用している方が思い浮かべる のは、titleタグやdescriptionタグではないでしょうか。
WordPressのCMSの仕組みで、意識せずともWebページに記述してくれている部分です。
ウェブ太
canonicalタグの記述方法
canonicalタグは重複した複数ページの、一つを正しいページとするものです。
たとえば下記の2つのURLのWebページ（正規化したいのと重複したコンテンツ）があるとします。
- 正規化したいURL：https://www.abc.com/aaa
- 重複/類似したURL：https://www.abc.com/bbb
上記②のサイトのheadタグに、①のURLを記載したcanonicalタグを記載します。
ウェブ太
担当者の間では「canonicalを向ける」なんて言ってますね。
「rel =」の「rel」の意味とは？
「rel」ってよく見る書き方ですが、そもそもの意味はなんなのでしょうか？。ググってみるとサルワカさんの記事がわかりやすかったです。
このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所（URL）を指定します。relは「relation（関係）」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。
参考サイト：サルワカ
そこそこWeb担当やっていて、HTMLもある程度知っているつもりでしたが、relが「relation（関係）」の略だったとは・・・恥ずかしながら知りませんでした。
ウェブ太
次はさらに重要な使い方に言ってみましょう！どんな時に使うのというやつです。
canonicalタグの使い方・使い所
Webページを作成していると、どうしても重複してしまうページが出てきたりします。
- httpsとhttp、wwwありとwwwなしなどのコンテンツ
- 商品のバリエーションが複数あるコンテンツ
- スマホとPCのWebページのURLが違うコンテンツ
httpsとhttp、wwwありとwwwなしなどのURLアドレス
ここは意外と盲点です。お客様の中にはURLがわからずに「https」なのに「http」で検索したりすると下記のエラー画面になって遷移できません。
- Bad Request – Invalid Hostname
- HTTP Error 400. The request hostname is invalid.
これはいわゆるHTTPエラーの400で、リクエストしたホスト名が無効というエラーです。
ウェブ太
このような事がないようにするのが、canonicalタグなんですね。
商品のバリエーションが複数ある類似コンテンツ
ECサイトなどの通販系での商品ページに良くあるタイプです。
サイズや容量、カラーバリエーション（カラバリ）の違いで、内容に大きな差がないため類似ページとみなされてしまいます。
このような場合にはメインの商品ページURLにcanonicalタグを向けましょう。
スマホとPCのWebページのURLが違うコンテンツ
規模の大きいサイトに良くあります。スマホとパソコンのサイトURLが違い、サイト構造も違います。
レスポンシブなサイトは同じHTMLのソース内で、PCとスマートフォンでの見え方を変えているのでURLは同じです。
PCとスマートフォンのサイトURLどちらにcanonicalタグを向けるかは、PCの方の正規URLになります。
canonicalタグ以外の対策方法
またその他にも対策方法があるのでリストアップしておきます。
- 301リダイレクト
- .htaccessでの修正
この手法は難易度が少し高いです。次の機会にお伝えしていきます！
まとめ：canonicalタグでページを正規化
canonicalタグは重複したページの評価を下げないために、検索エンジンに正規化したURLをアピールするタグです。
canonicalタグの用法を守って、検索エンジンと良好な関係を築きましょう！
