【canonical】タグって何?必要なの?WordPressですべてのページに自動挿入するには??など

公開日:2018年10月8日 使い方など

【canonical】タグ・・・意味不明な専門用語ですよね?より詳しい説明はウィキペディアなどで見ていただくとして、このタグはあなたのサイトに存在しますか??

え?分からない?何これ?必要なの??そう思った方には役立つ記事だと思います。知ってるよ!という方には全く不要なので別ページへどうぞ!!

まずはそもそも【canonical】タグって何?について簡単に解説しますね。

WordPressでサイトを作ろうが、その他のツールで作ろうが、最終的にページはhtmlという言語に変換されて表示されます。htmlタグを使ったページでは直接書いているだけで、Wordpressなどはその部品をデータベースという箱から必要な分だけ呼び出して表示しているというのがざっくりした違いです。ページが表示されるための一連のコードのことを『htmlソース』と言います。

そして【canonical】タグはhtmlタグの中の1つで、このコードがあることによって、『このページのURLはこれです!!とソース上に明示すること』で、検索エンジンクローラーなどからソースだけを見てもこのページのURLが分かるというものです。

サイトのURLは大きく分けると「wwwあり」と「wwwなし」のものがあります。

「http://www.hogehoge.com」・・・wwwありのサイト
「http://hogehoge.com」・・・wwwなしのサイト

あなたのサイトはどちら?どちらでも表示できてしまう?どちらでも表示できてしまう場合には今回のこととは別問題なのでここでは詳しくお話しないこととします・・・。

今ご覧いただいているサイトは「https://www.momosiri.info」、つまりこのサイトはwww付きのサイトということになります。なしの方が短くていいって??まあおっしゃる通りなのですが古い人間なので(笑)、wwwが付いているとなんだかインターネット!!って感じがするので私はwww付きにしてます(どちらでも大勢に影響はないものと考えられます)。

今ちょっとURLを書いてしまいましたけど、最近流行り?のSSLだとさらにURLのパターンが広がりますね。

「http://www.hogehoge.com」・・・wwwありのSSLでないサイトのURL
「http://hogehoge.com」・・・wwwなしのSSLでないサイトのURL
「https://www.hogehoge.com」・・・wwwありのSSL通信を行うサイトのURL
「https://hogehoge.com」・・・wwwなしのSSL通信を行うサイトのURL

・・・もうすでに分からなくなっている方もいるのかも(笑)。つまりSSL/非SSLのサイトそれぞれにwwwがあるかないかという選択肢が広がる可能性が出てくるということなんです。

え?うちのサイトはもうすでにアドレスバーへどう入力しても「https://hogehoge.com」で表示されるよ!という方、何でそうなってるんでしょう?(これも今回の件とは別ですので割愛します)。

なんと4パターンの可能性がある!!これを解消するためにこのページのURLはこれです!!とソース上に明示すること、すなわち【canonical】タグを各ページに設置するということが必要になってくるんですね。

どんな時に【canonical】タグを設置するのか?

ではどんな場合に【canonical】タグをページ内に設置するのがいいのか?

それは前の文章で「今回は関係ないので・・・」としたいろいろなURLで表示できてしまうサイトでは必ず必要な対策ということになります。

重複コンテンツって言葉を聞いたことありますか?多分アクセスアップしたい!!といろいろ検索した方ならご存知のはず。【重複コンテンツ】とは、全く(ほとんど)同じ構造や文章のページがインターネット上に複数ある状態のことを言います。

これが存在すると何がいけないのか??それは、検索エンジンから見て「このページコピーページなんじゃないの?」と勝手に?判断されてしまうこと。昔コピーページをたくさん用意してアクセス数を稼ごう!!なんて思う輩がいて、実際にそうなったことがある経緯から(ホンマかいな)、検索エンジンでは無意味にコピーされたページは悪意がある・・・なんて認識されてしまうことがあるんです。

これはゆゆしき問題ですね。でも中にはいろいろな形のURLからアクセスされてもそのまま表示されるようにしたい!!なんて場合もあるはず(あまりメジャーではありませんが・・・)。そんなとき、検索エンジン様が誤解しないように、このページのURLはこれです!!とソース上に明示することですと教えてあげるんですね。

簡単に書きすぎてますけど理解いただけたでしょうか?

つまり、どんな形でアクセスしても特定のURLで表示されるサイトには必要がない、逆を言うと不要なタグを入れることでかえって検索エンジン様が混乱するかも・・・という懸念もある、というのが今回紹介する【canonical】タグなんです。

とはいえ、そのページのURLがこれ、そして【canonical】タグが同じものだったらより正確に判断してもらえるのでは?ということで、特定のURLのみで表示されるサイトでも設置されていることが多いのです。

よくSEO対策で必ず設置した方がいい!!という意味合いのページが検索に引っかかりますけど、実は設置するかどうかは自己判断が大切なんですね。そもそもSEO対策(検索エンジン最適化)はどれをどうやったら正解かなんて検索エンジンごとに違うんですからね。

htmlで作ったサイト(いわゆるペラページの集まりのサイト)であれば各ページの<header>~</header>へ

<link rel=”canonical” href=”ページのURL”>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

というコードを挿入すれば済むのですが、どんどん投稿できるWordpressなどの動的なサイトでは逆に設置が難しいので、これから簡単に設定できるコードを紹介していきます。

WordPressで【canonical】タグを自動挿入(表示)させる方法

このコードは

で掲載されていたものを自身の備忘録を兼ね、そのまま紹介させていただいております(このページにはもっと詳しく分かりやすく【canonical】タグのことが書かれていると思います)。

コピー用コードはこちら

remove_action('wp_head', 'rel_canonical');
add_action( 'wp_head', 'add_canonical' );
function add_canonical() {
 $canonical = null;
 if( is_home() || is_front_page() ) {
 $canonical = home_url();
 } elseif ( is_category() ) {
 $canonical = get_category_link( get_query_var(‘cat’) );
 } else if(is_tag()){
 $canonical = get_tag_link(get_queried_object()->term_id);
 } elseif ( is_search() ) {
 $canonical = get_search_link();
 } elseif ( is_page() || is_single() ) {
 $canonical = get_permalink();
 } else{
 $canonical = home_url();
 }
 echo '<link rel=”canonical” href=”'.$canonical.'”>'.”\n”;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

コードを簡単に解説すると、まず1行目でテーマなどが自動で【canonical】タグを挿入している場合には一旦削除してちょ!としています

そこから下はヘッダー(各ページの<header>~</header>の間)へトップページだったらこのコード、カテゴリー一覧だったらこのコード・・・みたいに順番に条件を付けて、きちんと【canonical】タグが挿入されるようなコードになっています。

私もWordpressの各ページへ【canonical】タグを自動挿入しちゃお!といろいろなページを閲覧しましたが、

  1. トップページへのタグ挿入がない
  2. そもそも挿入される【canonical】タグが間違っている(トップページのURLになってしまうものがほとんど)

といったものが多く、このコードを挿入したらきちんと動作したので紹介させていただきました。

上のコードをテーマのfunctions.phpへ追記するだけの簡単作業ですから【canonical】タグを自動挿入したい方はぜひやってみてください。

こうしたカスタマイズで注意したいことはだいたい共通なのですが

  1. functions.phpの編集に失敗すると画面が真っ白になったりすることがある
  2. functions.phpやCSSはより後ろに記述したものが適用される

1はバージョン4.9以降ではコードチェック機能が働くので間違ったコードだった場合にはエラー前で止まる(ロールバックされる)ようになっていますから、エラーが出たら「何だろう・・・」とチェックすればOKかと思います。

2については先頭に追加したCSSが適用されない!!なんて相談を受けることが多いことから案外知らない方が多いようです。今回の場合も現状正常に動いているサイトであれば、functions.phpの一番後ろに挿入するか、子テーマのfunctions.phpの最後に追記するのがベストです。

※そうは言っても環境によりいろいろですから、カスタマイズはあくまでも自己責任でお願いしますね

さいごに

ここまでで書いた通り、SEOに有利になるのか?というとどうなの?って感じですし、逆に不利になることもあるかもしれないという懸念の中ではありますが、このサイトでは挿入することにしました。

このサイトで使っている【Simplicity2】テーマではもともと挿入される機能が備わっていた(本当に痒い所に手が届くテーマです)のですが、一部ページで挿入されなかったのでこのコードで実装させていただきました。

まあそもそも前述したようにどんな形でアクセスされてもきちんとリダイレクトされるのでどっちでもいいかなーーー?とは思っていたのですが一応・・・というのが実際です。

もしも設置されるなら、リスクがあるかもしれない・・ということを理解した上で、また、現状がどうなっているかを確認した上での設置をおすすめします。

  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】