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

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

この記事でわかること

こんにちわ、Jouji(@jouji0720)です。

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

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

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

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

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

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

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

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

では行ってみましょう。

Here We Go!!

canonicalタグとは

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

SEO的にも、重要と言われているタグですね。というのも、通常の検索エンジンは記事を認識するときにURL単位で認識しています。

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

例えば、今回の記事のキーワード[canonical　html]です。以下の例をご覧ください。

www.affili-blog-of-gren.com/entry/canonical-html-howto
www.affili-blog-of-gren.com/entry/canonical-html-howto-use
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という記事があった場合に、検索エンジンは1つずつに被リンクの評価をするんですよね。

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テストをしているとき

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

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

AとBのサイトに書かれる内容はほぼ同じですから、コピーコンテンツの状態になります。そのためにcanonicalタグを使って、統合しておいたほうが間違いないです。

amp実装したとき

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

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

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

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

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

例えばカットソーのページがあるとします。
そのページには、サイズ違いがあったりします。

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

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

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

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

canonicalタグを使うのがいいですが、これはデザインテーマをレスポンシブデザインに変えたほうがいいです。

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

canonicalタグの設定方法

canonicalタグの設定方法についてお話していきましょう。
やり方に関しては2通りあり、以下の通り。

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

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

手順は以下の通り。

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

コードをコピー

必要なコードをコピーしましょう。
コードは以下の通り。

コード

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

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

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

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

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

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

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

Javascriptを使ってヘッダにねじ込んでいこう

じゃあどうするんだよって思いますよね。やり方は簡単です。無理やり、ねじ込んでしまいましょう。

Javascriptを使います。やり方は以下の通り。

では見ていきましょう。

コードをコピー

まずはコードをコピーしていきましょう。
必要なコードは以下の通り。

<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に設定しない

canonicalタグを使うときに気を付けたいことの1つ目は、すべて同じURLに設定しないことです。というのもすべてのページが一つのコンテンツとして扱われてしまうからですね。

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

そうなると、逆によくない結果になることもあります。設定するときには、対象のページに向いているかを確認して使うようにしましょう。

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

canonicalタグを使うときに気を付けたいことの2つ目は、1記事に1つのURLだけを設定することです。

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

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

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

canonicalタグを使うときに気を付けたいことの3つ目は、正規化するurlは絶対URLを使うことです。絶対URLとは、https://がついているURLのことですね。

それがついていないと、相対URLとして判断されるんですよね。
例えば以下のような感じのものは、相対URLです。

joujilog.com/canonical-tag-html-howto

このブログのドメインはjoujilog.comです。だから、https://joujilog.com/joujilog.com/canonical-tag-html-howtoとして読み込まれます。そんなサイトないですよね。

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

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

canonicalタグを使うときに気を付けたいことの4つ目は、カテゴリーページなどに設定はしないことです。

カテゴリーページの内容が同じことが原因で、canonicalタグを設定する人がいるんです。でもこれをしてしまうと、カテゴリーページがインデックスされなくなるからですね。

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

body要素には記述しない

canonicalタグを使うときに気を付けたいことの5つ目は、body要素に記述しないことです。body要素に入れてしまうと、クローラーにcanonicalタグって無視されてしまうからです。

例えるなら、ダイエットしたいのに、ぜい肉を気にしないような感じです。これじゃいくら運動しても痩せないですよね。

それと同じです。ですから、headに入れるようにしましょう

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

canonicalタグを使うときに気を付けたいことの6つ目は、必ず処理されるわけではないということです。というのもcanonicalタグというのは、クローラーに対してのシグナルになるからです。

とはいえ、シグナルをもらったからと言って、処理するかどうかはGoogle先生次第です。例えるなら電話がかかってきて、とるかはあなた次第なのと同じです。

それなのに、「何で出ないの？」なんて催促はうざいだけです。ですから「されれば儲けもの」位の感じでいましょう。

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

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

まとめると以下の通り。

まとめ

という感じですね。

結論から言うと、重複コンテンツは、SEOによくないです。ですからぜひcanonicalタグの使い方を知り、対策を打つ必要がありますね。

ぜひこれを機にやってみては、いかがでしょうか。きっとブログの評価も上がって運営も楽しくなっていくはずです。

今回は以上です。