今回はCanonicalというタグの概要と、その使い方を紹介したいと思います。
ブログ運営する上でSEOを気にしている人は知っているかもしれませんが、自然体でWordPressとそのテーマを使っている人はあまり気にしたことがないのではないでしょうか。
一言でいうと、「検索エンジンにこの記事は本命ではなくて本体のアドレスはここなんだよ」と教えてあげるためのタグです。
とてもシンプルなもので、<head></head>の間に
<link rel="canonical" href="https://example.com/">
と記述するだけです。
記述は簡単なのですが、そもそもなぜこれが必要なのか、どうやって実現したら良いのかを説明していきます。
なぜCanonicalが必要なのか
Canonicalは、そのページのご本尊を知らせてあげるためのものですが、そもそもなぜそのようなものが必要なのでしょうか。
Canonicalが必要となるパターンは大まかに2つあります。
ページが複数に分かれる場合
分量の多い記事を書くときは、きりの良いところでページ送りを入れて、2ページ目以降へ遷移させていく場合があると思います。
この場合、
1ページ目 https://example.com/sample
2ページ目 https://example.com/sample/page/2
3ページ目 https://example.com/sample/page/3
のように、ページごとにアドレスが変わります。
そして検索エンジンもそれぞれのアドレスごとに中身を評価して、検索順位に反映させます。
せっかく書いた記事の3ページ目だけが検索エンジンでひっかかるなんてことを経験された方もいるのではないでしょうか。
そのようなときに、2ページ目以降のページで
<link rel="canonical" href="https://example.com/sample">
としてあげることで、この記事の本体はここだよと検索エンジンに伝えることができ、各ページの評価が本体に集約され、検索エンジンにもきちんと記事の本体を載せることができます。
なお、この時のご本尊とするのは1ページ目ではなく、全ページがひとつになっているURLにするのが適切であると言われています。
ですが、場合によっては全量を載せたページを作れない可能性もあるため、2ページ目以降はnoindexとnofollowを設定しておくのが良いそうです。
これにより、2ページ目以降が検索エンジンの検索結果に反映されず、1ページ目が記載されるようになります。
また、以下のようにページの前や後ろを明示してあげるタグがついていれば、noindexは不要とのことです。
<link rel="prev" href="https://example.net/sample" />
<link rel="next" href="https://example.net/sample/page/3/" />
似たような記事がたくさんある場合
私はこのパターンに該当するのですが、特に資産運用の実績を紹介しているようなブログはどこも該当するのではないでしょうか。
私の資産運用ブログでは株価指数CFDの運用実績を記事にしていて、これまでは
のように同じようなアドレスで実績紹介の記事を作っていましたが、これでは評価が分散してしまい、それどころか検索エンジンからコピーして記事を増やしていると思われかねません。
実際、Googleの検索でひっかかる記事は昔の記事で、最近更新した記事は全然ひっかかりません。
そこで、このブログではひとつ毎回最新の情報で更新する記事を作り、Canonicalで検索エンジンを過去の履歴記事から誘導するようにしています。
Canonicalの設定方法
プラグインを使う
一番手っ取り早い方法はプラグイン「All in One SEO Pack」を導入することです。
導入後、「All in One SEO Pack」の設定から「Canonical URLs」と「Enable Custom Canonical URLs」にチェックを入れてあげます。
これにより、記事の編集ページで「Custom Canonical URL」が表示されるようになりますので、そこにご本尊のURLを入力すればOKです。
function.phpとカスタムフィールドで実現（Cocoonの場合）
Cocoonバージョン1.9.0から標準機能として搭載されました。
公式の記事をご参照ください。
最初は「All in One SEO Pack」を使って実現しようとしていたのですが、このプラグインの機能で使いたい部分はほとんど利用中のテーマ（Cocoon）に標準で搭載されていたため、タグが二重に表示されたりとおかしくなっている部分がありました。
この部分はプラグインでこの部分はCocoonでと分けるのが嫌だったので、結局Cocoonだけで何とかする方法を探した結果、function.phpとカスタムフィールドで実現できるということが分かりました。
まず、WordPressの管理画面上で、「外観→テーマの編集」を選んでfunction.phpを編集します。
上記の画像の33行目以降が追加した部分で、以下コードを貼り付けています。
//Canonical
function generate_canonical_tag(){
$result = get_post_meta(get_the_ID(), 'canonical', true);
if(empty($result) === false){
$canonical_url = $result;
} else {
$canonical_url = generate_canonical_url();
}
// var_dump($canonical_url);
if ($canonical_url && !is_wpforo_plugin_page()) {
echo '<!-- '.THEME_NAME_CAMEL.' canonical -->'.PHP_EOL;
echo '<link rel="canonical" href="'.$canonical_url.'">'.PHP_EOL;
}
}次に、カスタムフィールドの使い方ですが、Canonicalを使用したい記事の編集画面で、カスタムフィールドの新規追加を押します。
そこに以下のようにご本尊のURLを入力して「カスタムフィールドを追加」を押せばOKです。
2回目以降は名前のリストからcanonicalを選べるので、そこで選択後にURLを入れてあげましょう。
これで記事の<head></head>の間に
と記述されているはずです。
なお、Cocoonでは自動的に、以下のようなタグが挿入されるため、2ページ目以降のnoindexとnofollowは指定していません。
<link rel="prev" href="https://example.net/sample" />
<link rel="next" href="https://example.net/sample/page/3/" />
おわりに
そもそもなぜこんなことを気にし始めたのかというと、Twitter上でいろんな人のブログのSEOについて解説してくれている人がいて、そのツイートを見たのがきっかけでした。
★SEO無料コンサル・1,000フォロワーで終了★
あなたのサイトを2ツイートで課題・改善案を指摘させて頂きます。出来る限りSEO調査の上、2ツイートにまとめさせて頂きますので、お気軽にどうぞ(๑˃̵ᴗ˂̵)
★手順
・私をフォロー
・本ツイートを公式RT
・本ツイートを引用RTしてURLをご共有くださいませ— みすてろん@SEOコンサル (@mysterooooon) 2018年12月9日
元々SEOのなんたるかも分かりませんでしたが、何事も形から入りたがる私は、この人のツイートを見て、うちの実績紹介の記事だめじゃん！！と思い、今回の設定をいじりはじめました。
これがなかなかうまくいかなくて、数日間かけてやっとできたものの、その間全くブログを更新できないという本末転倒な事態に…
Cocoon限定ではありますが、すごい苦労したこともあり、他にもきっと苦労する人がいるに違いないと思い、今回記事にまとめました。（今では標準機能になってしまいましたが…）
また、プラグインを使えばテーマを問わず設定できますので、ぜひ使ってみてください。
この記事がみなさんの参考になればうれしいです。
コメント
はじめまして。
私もcocoonを利用していまして、カノニカルURLを記事別で変えたいと思い検索していたところ、こちらのブログにたどり着きました。
「function.phpとカスタムフィールドで実現（Cocoonの話です）」の部分を実現したく、コードをコピペしたのですが、反映されず、試行錯誤し、
結果、カスタムフィールドを追加の名前を「Canonical」から「canonical」に変更したところ（最初の文字を大文字から小文字に変えた）ちゃんと動きました！
細かいですが、カスタムフィールドの画像の名前は「Canonical」ですが、
function.phpの３行目の
$result = get_post_meta(get_the_ID(), 'canonical', true);
の「canonical」が小文字だったからそのままでは動かなかったのですよね？
私のコードの理解力がないのが原因ですが、
もし時間があれば記事を修正するとより見た人にわかりやすいと思いました。
また、問題が解決したのでとても助かりました。
記事をかいてくださりありがとうございます。
はじめまして。
コメントありがとうございます。
おっしゃる通り、大文字小文字が区別されるので、あわせないといけません。
カスタムフィールドの画像を後付けでつけたため、
頭文字が大文字になっているのに気づいていませんでした。
カスタムフィールド設定の画像の頭文字を小文字に直しておきました。
ご指摘ありがとうございました。
すばやい修正とご返信ありがとうございました。