【簡単】canonicalタグの意味や書き方、使い方を理解して検索エンジンと良好な関係を築こう

【簡単】canonicalタグの意味や書き方、使い方を理解して検索エンジンと良好な関係を築こう

Webの専門用語をつい忘れがちな、50代のWeb担当ウェブ太です!

canonicalタグって何? どう利用すればいいの?

という人はわたしと一緒にこの記事で学んで行きましょう!

この記事を読んでわかること
  • canonicalタグの意味
  • canonicalタグの記述方法
  • canonicalタグを利用するケース

端的にお伝えすると、canonicalタグはWebページの記述方法(HTMLタグ)の一つで、検索エンジンに「正しいWebページはこちらです!」とアピール(宣言)するものです。

検索エンジンに正しくアピールする記述方法とはどのようなものか?さっそくみていきましょう!

canonicalタグの意味とは?

canonicalタグの意味とは?

canonicalタグとはなんぞや?を知る前に、検索エンジンの性格を知っておきましょう。

検索エンジンは重複コンテンツが嫌い?

前提として検索エンジンはWebページのコピー(偽・真似)コンテンツが大嫌いです。

そのような偽物のコンテンツに対しては、厳しい態度で評価を下げます。

なぜってコピーコンテンツを高く評価してしまったら、検索エンジン自身の評価を下げてしまうからです。

ウェブ太

そんな検索エンジンだったら利用したくないなぁ・・・

それでは同じサイト内の似ているコンテンツ(いわゆる類似・重複コンテンツ)はどうなのでしょうか?

重複したページがある場合は、canonicalタグでページの統合や正規化をするようにとGoogleはアドバイスしています。

ウェブ太

コピー(偽・真似)コンテンツ同様に、重複ページも嫌なようです

SEOとしてのcanonicalタグの意味

canonicalをGoogle翻訳で確認してみました。

英語:canonical = 日本語訳:正規の

参考サイト:Google翻訳

「canonical」は「正規の」という意味があります。

つまりcanonicalタグはWebページを正規化するためのHTMLタグとおぼえておきましょう。

canonicalタグの記述方法

canonicalタグの記述方法

次はcanonicalの記述方法、つまりどのような書き方をすればよいのか?をお伝えしていきます。

canonicalタグの記述位置と記述形式

Webページを正規化するためのcanonicalタグは、どこの部分に・どのように書けばいいのでしょうか? ここが肝心なポイントです。

canonicalタグの位置と形式
  • 記述位置:head部分
  • 記述形式:<link rel=”canonical” href=”https://www.abc.com/aaa”/>

ウェブ太

HTMLタグとしては見慣れない感じですね。。。

実際にheadタグに挿入した記述はこのようになります。URLは適当なアドレスです。

canonicalタグの記述イメージ
<head> <link rel=”canonical” href=”https://www.abc.com/aaa”/> </head>

headタグはtitleタグdescriptionタグを記載する部分で、HTMLソースの上の方にあります。

ウェブ太

実際のWebページ上では見ることができない裏の部分ですね!

canonicalタグの使い方

canonicalタグは重複した複数ページのうちの一つを、正しいページはこれ!と検索エンジンに伝えるのがお仕事。

記述する位置や形式はわかったけど、どのように使えばいいのか方法がわからない・・・

使い方・書き方は一度理解すれば簡単です。たとえばこのような2つのURLのWebページがあるとしましょう。

  1. 正規化したいURL:https://www.abc.com/aaa
  2. 重複/類似したURL:https://www.abc.com/bbb

この場合、bbbのサイトのheadタグに、aaaのサイトのURLをcanonicalタグで記入すればOKです。

実際のHTMLソース例はこのようになります。

重複したURLのheadタグ
<head> <link rel=”canonical” href=”https://www.abc.com/aaa”/> </head>

まさにbbbからaaaにcanonical(正規化)する!というイメージです。この場合に、正規化したい方のURLには何も記載する必要はありません。

ウェブ太

間違っても正規化したいURLと重複したURLを逆にしたり、URLのアドレスを間違えないようにしましょう!

担当者の間では「canonicalを向ける」なんて言ってます。そう言うと少しプロっぽく感じて使いたくなりますw

補足1:「rel」の意味とは?

「rel = ◯◯」の「rel」ってよく見る書き方ですが、そもそもの意味はなんなのでしょうか?。ググってみるとサルワカさんの記事がわかりやすかったです。

このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所(URL)を指定します。relは「relation(関係)」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。

参考サイト:サルワカ

そこそこWeb担当やっていて、HTMLもある程度知っているつもりでしたが、relが「relation(関係)」の略だったとは・・・恥ずかしながら知りませんでした。

ウェブ太

勉強になります!

次はさらに重要なcanonicalタグを使う利用ケースに進みましょう!どんなケースの時に使うのか?がわかれば初心者を卒業ですw

canonicalタグを利用するケース

canonicalタグの使い方・使い所

Webサイトを構築しページを作成・運営してくと、どうしても重複ページが出てきます。たとえばこのようなコンテンツページです。

  1. httpsとhttpのURLアドレス
  2. wwwありとwwwなしのURLアドレス
  3. 商品のバリエーションが複数あるコンテンツ
  4. スマホとPCのWebページのURLが違うコンテンツ

このようなケースでcanonicalタグを使って、検索エンジンからのマイナス評価を避けましょう。

ケース1:httpsとhttpのURLアドレス

サイトをSSL化(暗号化)すると、「http」が「https」になったURLに変更になります。

SSL化することでサイトのセキュリティレベルが向上し、安全性を高めることができるんです。

でも元の「http」のURLアドレスは間違った情報に・・・

ウェブ太

だから「http」のURLから「https」のURLにcanonicalを向ける必要があるんですね。

補足2:canonicalで正規化しても400エラーになってしまう

ここは意外と盲点です。

お客様の中にはURLがわからずに「https」なのに「http」で検索したりする場合があります。

その場合は次のようなエラー画面になってしまい遷移ができません。

  • Bad Request – Invalid Hostname
  • HTTP Error 400. The request hostname is invalid.

これはいわゆるHTTPエラーの400で、リクエストしたホスト名が無効というエラーです。

ウェブ太

要は、そのURLのページは有りません!と言うエラーです。

このエラーを避けるためには「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タグ以外の対策方法

またその他にも対策方法があるのでリストアップしておきます。

  1. 301リダイレクト
  2. .htaccessでの修正

この手法は難易度が少し高いので、次の機会にお伝えしていきます!

まとめ:canonicalタグでページを正規化

まとめ:canonicalタグでページを正規化

canonicalタグは重複したページの評価を下げないために、検索エンジンに正規化したURLをアピールするタグです。

canonicalタグの用法を守って、検索エンジンと良好な関係を築きましょう!