blue

アメブロで記事ごとに rel="canonical"を書き換える

  • Posted by: SOMA Hitoshi
  • 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