アメブロで記事ごとに rel="canonical"を書き換える
- December 26, 2016 8:26 PM
- web
こっちがカノン(正典)だよ、ということで「 canonical」。ブログを移転したさい、旧サイト側の記事と新サイト側のそれが不可避に「重複コンテンツ」化する場合に、
<link rel="canonical" href="新サイト側の記事URL">
と旧サイト側の記事のヘッダーに記すことで、Googleが後発の新サイト側を「コピー」と見なすことなく、正規なページとして認識してくれる。このタグをアメブロの各記事に設定する方法。
もちろんアメブロでは、記事単位でヘッダーをカスタマイズできるようなインターフェイスは用意されていない。また、件のタグはヘッダー内にその記述がないと Googleが認識してくれず、記事本文=ボディ内に書かれてあっても無効である。ただ、JavaScriptを使い、ページの読み込み後にヘッダー内の件のタグを書き換える(もしくは書き加える)といった処理をした場合、ありがたいことに Googleのクローラーはその処理後の HTMLを拾っていってくれるらしい。
そこで、任意の外部 JavaScriptファイルを全ページにたいし一括で挿入できる「フリープラグイン」というアメブロの機能を利用する。アメブロの「ブログ管理」の画面から「設定・管理」に進み、「サイドバーの設定」枠内にある「プラグインの追加」を選択、タブを「フリープラグイン」のほうに切り替えて、以下のように記入、保存する。
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://example.com/ameblo.js"></script>
処理にあたってもちろん jQueryは必須ではないが、ここで示すコード例は jQueryを使ったものなので、まず 1行目でそのライブラリを読み込んでいる。2行目で参照する JavaScriptファイルは自身のサイト内に置くもの(中身は後述)なので、その URLは適宜変更いただきたい。あるいは外部ファイル化せず、後述するスクリプトを直接ここに書き込んでもいいが、「フリープラグイン」には「半角3800文字相当まで」という制約があるので外部ファイル化してしまうのが無難だろう。
で、2行目で読み込んでいるスクリプトはこんな具合。
var lists = {
"記事Aのアメブロ側URL":"記事Aの新サイト側URL",
"記事Bのアメブロ側URL":"記事Bの新サイト側URL",
"記事Cのアメブロ側URL":"記事Cの新サイト側URL"
};
var c_url = location.href;
for(key in lists){
if(key == c_url){
var c_canonical = lists[key];
break;
}
}
if(!c_canonical){
$("link[rel='canonical']").attr('href','新サイトのトップページとか');
} else {
$("link[rel='canonical']").attr('href',c_canonical);
}
言うまでもなく肝となるのは 2- 4行目にある新旧 URLの対応リスト(配列)で、この場合、このリスト作りがいちばんたいへん(記事が 100件あれば、ここが 100行必要)。いや、新サイト側の記事のパーマリンク設定をアメブロの記事 URL(記事 ID)と連動したものにするなど多少の工夫をかませばもっとスマートに処理できるわけだが、最悪、両者の関連性がまったくなかったとしてもこのような手がある、という例。
それ以降のスクリプトでは現在のページ URLを取得して対応リストの左側の URLと比較、一致するものがあればその右の URLを rel="canonical" としてあてがい、一致するものがなかったら 16行目で設定した URLをあてがっている。
仕上げに「サイドバーの配置設定」ヘ行き、「使用しない機能」に入っている「フリープラグイン」をドラッグ &ドロップで「使用する機能」に移して保存。配置場所は、今回のスクリプトだけならいちばん左上で問題ないだろう。
関連記事
トラックバック(0)
トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/1086