紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

HTMLでcanonicalタグを設定する方法【ブログサービスでも問題なし】

canonicalタグを設定する方法

「canonicalタグをHTMLで使う方法を知りたい。概要から注意点まで教えてほしいな。」

 

こんなお悩みにお答えします。

 

この記事でわかること

  • canonicalタグとは
  • canonicalタグの設定方法
  • canonicalタグを使うときに気を付けたいこと6つ

 

こんにちわ、紅蓮です。

 

ブログを書いていて、canonicalタグの使い方について悩んでいたりしませんか?

 

今回はそんな悩めるあなたにcanonicalタグの使い方についてお話をしていきましょう。

 

この記事を読み終わるころには、canonicalタグの概要から設定方法、使うときの注意点まで丸っとわかっちゃいますね。

 

この記事を書く僕はブログ運営歴は3年目。

 

最近ではアフィリエイトからの収益も徐々に上がってきて、3000円ほどもらえるようになってきました。

 

そんな僕も記事を書いても書いてもなかなかGoogle先生に認識してもらえない日々だったんです。

 

そんなある日ネットである記事を読んで、canonicalタグの存在を知り、設定してみたら認識されて上位表示がされるようになりました。

 

今回お話しするのはそんな方法ですのでぜひ最後までお読みくださいね。

 

では行ってみましょう。

 

Here We Go!!

 

 

canonicalタグとは

canonicalタグとは

まずcanonicalタグとは、Webサイトに重複したコンテンツや類似した記事がある時に、どれが正しいURLなのかを伝えて評価を統合するためのタグです。

 

SEO的にも、重要と言われているタグですね。


というのも、通常の検索エンジンは記事を認識するときにURL単位で認識しています。

 

そのため同じ内容であってもURLが違えば、別ページとして扱われます。

 

例えば、今回の記事のキーワード[canonical html]です。

 

以下の例をご覧ください。

 

  • https://www.affili-blog-of-gren.com/entry/canonical-html-howto
  • https://www.affili-blog-of-gren.com/entry/canonical-html-howto-use
  • https://www.affili-blog-of-gren.com/entry/canonical-html-using-howto

 

上記のURLでまったく同じ内容の記事を書いたとします。

 

しかし検索エンジンはURLが違うために、それぞれが違う記事として扱われるということです。

 

でここからが検索エンジンの賢いところなんですが、中身を見たときに「URL違うけど中身同じじゃん。

 

どれをインデックスすればいいの」となって混乱します。

 

「教えてくれないとこっちで勝手に判断するからな」となってインデックスされなくなるんです。

 

そのためにcanonicalタグを使って、伝えてあげないといけないのです。

 

canonicalタグでできること

canonicalタグでできることは以下の通り。

 

  • ①重複コンテンツになるのを避ける
  • ②被リンクの評価の合計
  • ③クローリングの最適化

 

では詳しく見ていきましょう。

 

①重複コンテンツになるのを避ける

canonicalタグでできることの1つ目は、重複コンテンツになるのを避けることですね。

 

というのも記事が多くなってくると、重複する内容のことをかいてしまうこともあったりしますよね。

 

例えばAという記事とBという記事が似ている内容だったとします。

 

すると、Aという記事とBという記事は同じ内容として重複コンテンツになってしまうんですよね。

 

Google先生は、ランキングを操作するための重複コンテンツに対して厳しくペナルティになる可能性があることなんですよね。

 

しかもGoogle先生は機械ですから、意図しているしていないにかかわらずペナルティになる可能性があるんですね。

 

ですからcanonicalタグを使って「こっちのほうが正しい記事だよ」と伝えてあげることで、重複コンテンツになるのを避けることができます。

 

②被リンクの評価の合計

canonicalタグでできることの2つ目は、被リンクの評価の合計ですね。

 

例えばAという記事とBという記事があった場合に、検索エンジンは一つずつに被リンクの評価をするんですよね。

 

Aは被リンクが5個、Bは被リンクが3個みたいな感じです。

 

この記事にcanonicalタグを使うと、2つが合計されてBは評価されないけどAは被リンクが8になるという感じにすることができるんですね。

 

③クローリングの最適化

canonicalタグでできることの3つ目は、クローリングの最適化ですね。

 

というのもcanonicalタグを設定すると、類似した記事のうち代表的なURLを中心にクロールするようになるからなんですね。

 

数が少なくなるのだからクロールする速度が早くなるのは当然ですよね。

 

そうすると結果的に新しいページやコンテンツの変更がGoogle検索に反映されやすくなっていきますよね。

 

Google先生もサーチコンソールのヘルプにて、以下のように重複コンテンツを統合するようにいわれていますよね。

 

重複したページのクロールに時間がかかるのを防ぐため。Googlebot でサイトが最大限に活用されるようにするには、サイト内の同一ページの PC 版とモバイル版のクロールよりも、新しい(または更新された)ページのクロールに多くの時間をかけられるようにするのが効果的です。

重複した URL を正規 URL に統合する

 

クローリングの最適化は必要なことですね。

 

canonicalタグを使うとき

とはいえcanonicalタグを使うときってわからないものですよね。

 

ここではcanonicalタグの使うときをお話していきましょう。

 

使うべき時は以下のような感じです。

 

  • ABテストをしているとき
  • amp実装したとき
  • 重複ページになりえるとき

 

では詳しく見ていきましょう。

 

ABテストをしているとき

使うときの1つ目は、ABテストをしているときですね。

 

ABテストというのは画像や文章の一部分を変えて、どっちのほうが読者の反応がいいかをテストすることですね。

 

このときってAとBのサイトに書かれる内容というのはほぼ同じ、コピーコンテンツの状態になるのです。

 

そのためにcanonicalタグを使って、統合しておいたほうが間違いないですね。

 

amp実装したとき

使うときの2つ目は、amp実装したときですね。

 

amp実装すると、amp用のHTMLが必要となり、重複コンテンツとしてGoogle先生に判断されてしまうようになります。

 

canonicalタグを使って、統合しておいたほうがいいですね。

 

ECサイトなどで類似した商品があるとき

使うときの3つ目は、ECサイトなどで類似した商品がある時ですね。

 

例えばカットソーのページがあるとしますよね。

 

そのページにはもちろんサイズ違いがあったりしますよね。

 

この場合書かれている商品説明などはすべて一緒で、違うのはサイズと価格だけなので重複コンテンツになりえるんですよね。

 

ですからcanonicalタグの設定をするのがいいんですね。

 

スマホとパソコンでurlが違うとき

使うときの4つ目は、スマホとパソコンでURLが違うときですね。

 

スマホとパソコンでURLが違うときも中身は基本的に同じだったりしますので、重複コンテンツとして見られる可能性があるんですよね。

 

canonicalタグを使うのがいいのですが、これに関してはデザインテーマをレスポンシブデザインのものに変えてあげたほうがよさそうですね。

 

はてなブログならおすすめのデザインテーマの選び方に関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】 にて詳しく書いているのでぜひどうぞ。

 

canonicalタグの設定方法

設定方法

canonicalタグの設定方法についてお話していきましょう。

 

やり方に関しては2通りあり、以下の通り。

 

  • CMSなどのサーバーを使っている場合
  • ブログサービスを使っている場合

 

では詳しく見ていきましょう。

 

CMSなどのサーバーを使っている場合

手順は以下の通り。

 

  • ①コードをコピー
  • ②ページのhead要素に以下のコードを入れる

 

では詳しく見ていきましょう。

 

①コードをコピー

まずは必要なコードをコピーしましょう。

 

コードは以下の通り。

 

コード

<link rel"canonical" href="正規化したいurl">

 

②ページのhead要素にコピーコードを貼り付ける

次にページのhead要素にコピーコードを貼り付けましょう。

 

ブログサービスを使っている場合

ブログサービスを使っている場合ですね。

 

ブログサービスの場合は記事毎にheadをいじれない。

ブログサービスの場合は記事毎にheadの要素を入れることができないんですよね。

 

javascriptでねじ込んでいこう

javascriptでねじ込んでいきましょう。

 

やり方は以下の通り。

 

  • ①コードをコピー
  • ②記事のHTMLの一番下にコピーコードを張り付ける

 

では見ていきましょう。

 

①コードをコピー

まずはコードをコピーしていきましょう。

 

必要なコードは以下の通り。

 

コード

<script>
<!--
var doc = document;
var head = doc.getElementsByTagName("head")[0];
var meta = doc.createElement("link");
meta.setAttribute("rel","canonical");
meta.setAttribute("href","ここに正規化したいURL");
head.appendChild(meta);
// -->
</script>

 

②記事のHTMLの一番下にコピーコードを張り付ける

次に記事のHTMLの一番下の部分にコピーしたコードを貼り付けましょう。

 

リダイレクトの時にも使える

リダイレクトの時にも使うことができますね。

 

やり方に関しては、HTMLで新ページにリダイレクトする方法【コピペで簡単】にて詳しく書いているのでぜひお読みくださいね。

 

canonicalタグを使うときに気を付けたいこと6つ

気を付けたいこと

ここではcanonicalタグを使うときに気を付けたいことをお話していきましょう。

 

気を付けたいことは、以下の通りです。

 

  • ①同じURLに設定しない
  • ②一つだけ設定する
  • ③正規化するURLは絶対URLを使う
  • ④カテゴリーページなどに設定しない
  • ⑤body要素には記述しない
  • ⑥必ず処理されるわけではない

 

では詳しく見ていきましょう。

 

①同じURLに設定しない

1つ目は、すべて同じURLに設定しないことですね。

 

というのもすべてのページが一つのコンテンツとして扱われてしまうからですね。

 

例えばトップページに正規化した場合にはトップページだけがコンテンツとして扱われるようになるということですね。

 

そうなると逆によくない結果になることもあります。

 

設定するときには対象のページに向いているかを確認して使うようにしましょう。

 

②1記事に1つのurlだけを設定する

2つ目は1記事に1つのURLだけを設定することですね。

 

というのも1つの記事に対して2つ以上のurlを設定すると、「おいおいどっちに行ったらいいねん」となって混乱するからうまく動けなくなるんですよね。

 

ですから1記事1URLとして覚えておき、2つ以上設定しないようにしておきましょう。

 

③正規化するURLは絶対URLを使う

3つ目は正規化するurlは絶対URLを使うことですね。

 

絶対URLとは、https://がついているURLのことですね。

 

それがついていないと相対URLとして判断されるんですよね。

 

例えば以下のような感じのものは相対URLですね。

 

affili-blog-of-gren.com/entry/canonical-tag-html-howto

 

このブログのドメインはwww.affili-blog-of-gren.comですから、https://www.affili-blog-of-gren.com/affili-blog-of-gren.com/entry/canonical-tag-html-howtoとして読み込まれるんです。

 

そんなサイトないですよね。

 

そうならないようにhttpsからしっかりと書いておきましょう。

 

④カテゴリーページなどに設定しない

4つ目はカテゴリーページなどに設定はしないことです。

 

例えばですがカテゴリーページの内容が同じことが原因で、canonicalタグを設定する人がいるんですね。

 

でもこれをしてしまうと、カテゴリーページがインデックスされなくなるからですね。

 

ですからcanonicalタグを設定しないほうがいいですね。

 

⑤body要素には記述しない

5つ目はbody要素に記述しないことですね。

 

というのもbody要素に入れてしまったcanonicalタグって無視されるんですよね。

 

そのためにheadに入れるようにしましょう

 

⑥必ず処理されるわけではない

6つ目は、必ず処理されるわけではないということですね。

 

というのもcanonicalタグというのはクローラーに対してのシグナルになるんですよね。

 

シグナルをもらったからと言って、処理するかどうかはGoogle先生次第なんですよね。

 

ですから「されれば儲けもの」位の感じでいましょうね。

 

まとめ|canonicalタグを使って検索エンジンの評価を下げるのを避けよう

おつかれさまでした。

 

ここまでcanonicalタグの使い方に関して、お話していきました。

 

まとめると以下の通り。

 

まとめ
  • canonicalタグとは、Webサイトに重複したコンテンツや類似した記事がある時に、どれが正しいURLなのかを伝えて評価を統合するためのタグ
    • できることは以下の通り。
      • ①重複コンテンツになるのを避ける
      • ②被リンクの評価の合計
      • ③クローリングの最適化
    • 使いどころは以下の通り。
      • ABテストをしているとき
      • amp実装したとき
      • ECサイトなどで類似した商品があるとき
      • スマホとパソコンでurlが違うとき
  • canonicalタグの設定方法は以下の通り。
    • CMSなどのサーバーを使っている場合には、headでコードを張り付ける。
    • ブログサービスを使っている場合には記事中にjavascriptのコードを張り付ける
  • 注意点は6つあって、以下の通り
    • ①同じURLに設定しない
    • ②一つだけ設定する
    • ③正規化するURLは絶対URLを使う
    • ④カテゴリーページなどに設定しない
    • ⑤body要素には記述しない
    • ⑥必ず処理されるわけではない

 

という感じですね。

 

重複コンテンツは、正直かなりSEOによくないですね。

 

ですからぜひcanonicalタグの使い方を知り、対策を打つ必要がありますね。

 

ぜひこれを機にやってみてはいかがでしょうか。

 

きっとブログの評価も上がって運営も楽しくなっていくはずです。

 

ってことで今回は以上です。

また次回に。