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

公開日：2018(平成30)年10月8日／最終更新日： 2018(平成30)年10月9日

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

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

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

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

そして【canonical】タグはhtmlタグの中の１つで、このコードがあることによって、『このページの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」で表示されるよ！という方、何でそうなってるんでしょう？（これも今回の件とは別ですので割愛します）。

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

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

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

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

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

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

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

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

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

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

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

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

<link rel="canonical" href="ページのURL">

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

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

このコードはコピペでOK！全ページにcanonicalを設定するWordPressカスタマイズで掲載されていたものを自身の備忘録を兼ね、そのまま紹介させていただいております（このページにはもっと詳しく分かりやすく【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";
}

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

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

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

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