読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログでGoogleにパンくずリストを認識させるカスタマイズ

プログラミング プログラミング-はてなブログカスタマイズ おすすめ

photo by keso

Googleにパンくずリストを認識させるプラグイン

 最近のGoogle検索ではブログ内のカテゴリを認識して、検索結果がサイト上のどこに位置付けられているかを表示するようになっているのですが、breadcrumbタグを利用したマークアップをしていないとGoogleから認識してもらえません。

f:id:bulldra:20140921163843p:plain

 このためJavaScriptでパンくずリストを生成してGoogleにカテゴリを認識させるスクリプトを開発しました。現在のGoogleではJavaScriptの実行時に生成されたリンクやマークアップを解釈しています。『Google Webmasters – Support, Learn, Connect & Search Console – Google』の「Fetch as Google」においてGoogle Botが行ったレンダリング結果が取得できますので、こちらを確認するとJavaScriptで生成されたパンくずリストもGoogle Botは認識可能であるということが分かります。

f:id:bulldra:20140923210514p:plain

 本スクリプトの運用開始から1週間ほどかけてGoogleからクロールしなおされ、Googleからカテゴリを認識してもらえるようになります。ウェブマスターツールの構造化データの画面から、どこまで認識しているのかのグラフが表示可能です。

カテゴリの疑似階層構造可化の準備

 はてなブログには標準機能ではカテゴリの階層構造化ができませんが、「親カテゴリ」「親カテゴリ-子カテゴリ」といった命名規則を用いることで擬似的に管理します。「-」を区切り文字にしているのは子カテゴリ名での単語区切り検索対策です。「TOP > 親カテゴリ > 子カテゴリ」の三段階のみに対応しています。

f:id:bulldra:20140923212435p:plain

 あるエントリを書く場合においては、「サブカル」「サブカル-ゲーム」といった2つのカテゴリに属させることで、「サブカル」としての絞り込みと「サブカル-ゲーム」としての絞り込みを可能とします。画面上では「サブカル」と「サブカル-ゲーム」がある場合には「TOP > サブカル > ゲーム」といった形にスクリプトで表示を変形させてます。

f:id:bulldra:20140923220650p:plain

 サイドバーのカテゴリー表示機能を利用した場合には親カテゴリのみを表示する機能もあります。エントリを複数のカテゴリに属させる事も可能ですが、Googleがパンくずリストとして認識するのは1つ目の子カテゴリです。

JavaScriptの配置

 デザイン画面のフッタに以下のスクリプトを配置します。

f:id:bulldra:20140923211820p:plain

※ソースコードは著作物です。一部引用は構いませんが、必ず著作者の明記と解説ページへのリンクをお願いします。全文転載や孫引きはご遠慮ください。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

 記事上や記事下などのパンくずリストを表示させたい場所に以下のHTMLを記述します。パンくずリストの本体はこの部分なので、本記述を行わないとGoogleから認識されません。

f:id:bulldra:20140923212043p:plain

<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb"></div>

 カテゴリーでTOPからの階層表示をさせたくない場合は以下のようにクラスを設定しておくと、その通りに動きます。

<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb" class='notHierarchy'></div>

 サイドバーのカテゴリモジュールで親カテゴリのみを表示させる処理については標準で動かないようになっているので、動作をさせる場合には以下のコードを追記します。

<script type="text/javascript">
google.setOnLoadCallback(categoryHierarchyModule);
</script>

 なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

はてな村奇譚上

はてな村奇譚上

はてな村奇譚下

はてな村奇譚下