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

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

50代のWeb担当ウェブ太です!

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

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

この記事を読んでわかること
  • canonicalタグの意味とは?
  • canonicalタグの記述方法
  • canonicalタグの使い方

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

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

canonicalタグの意味とは?

canonicalタグの意味とは?

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

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

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

そのような偽物のコンテンツに対しては厳しい態度で、検索エンジンはその評価を下げます。だってコピーコンテンツを検索エンジンが評価してしまったら、検索エンジン自身の評価を下げてしまうからです。

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

Googleは上記の記事で重複ページがある場合は、ページの統合や正規化をしてくださいと言っています。

ウェブ太

そこで使えるのが「canonicalタグ」なんです

SEOとしてのcanonicalタグの意味

canonicalをGoogle翻訳で確認すると下記の意味が出てきます。

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

参考サイト:Google翻訳

そのままなのですが「canonical」は「正規の」という意味です。

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

canonicalタグの記述方法

canonicalタグの記述方法

canonicalタグの意味が理解できたら、次は記述方法、つまり書き方の作法です。

さきほど「Webページを正規化するためのHTMLタグ」と言いましたが、どこの部分に・どのように書けばいいのでしょうか?ここが肝心なポイントです。

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タグというと、WordPressでブログ運用している方が思い浮かべる のは、titleタグdescriptionタグではないでしょうか。

WordPressのCMSの仕組みで、意識せずともWebページに記述してくれている部分です。

ウェブ太

これがcanonicalタグの記述なんですねw

canonicalタグの記述方法

canonicalタグは重複した複数ページの、一つを正しいページとするものです。

たとえば下記の2つのURLのWebページ(正規化したいのと重複したコンテンツ)があるとします。

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

上記②のサイトのheadタグに、①のURLを記載したcanonicalタグを記載します。

ウェブ太

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

担当者の間では「canonicalを向ける」なんて言ってますね。

「rel =」の「rel」の意味とは?

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

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

参考サイト:サルワカ

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

ウェブ太

勉強になります!

次はさらに重要な使い方に言ってみましょう!どんな時に使うのというやつです。

canonicalタグの使い方・使い所

canonicalタグの使い方・使い所

Webページを作成していると、どうしても重複してしまうページが出てきたりします。

  1. httpsとhttp、wwwありとwwwなしなどのコンテンツ
  2. 商品のバリエーションが複数あるコンテンツ
  3. スマホとPCのWebページのURLが違うコンテンツ
参考 canonicalとは?URLの正規化でSEOのマイナス評価を避けようferret

httpsとhttp、wwwありとwwwなしなどのURLアドレス

ここは意外と盲点です。お客様の中にはURLがわからずに「https」なのに「http」で検索したりすると下記のエラー画面になって遷移できません。

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

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

ウェブ太

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

このような事がないようにするのが、canonicalタグなんですね。

商品のバリエーションが複数ある類似コンテンツ

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タグの用法を守って、検索エンジンと良好な関係を築きましょう!