photo by keso

こちらのカスタマイズは使用しないで

data-vocabulary.org のサポートが終了されるため、現在こちらのカスタマイズは利用できません。はてなブログ公式の機能を利用したり、リンク先で紹介されている方法への差し替えをお願いします。このエントリはあくまで当時の記録のために残しています。

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

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

このためJavaScriptでパンくずリストを生成してGoogleにカテゴリを認識させるスクリプトを開発することにした。現在のGoogleではJavaScriptの実行時に生成されたリンクやマークアップを解釈するようになっており、『Google Search Central (formerly Webmasters) | Web SEO Resources  |  Google for Developers』の「Fetch as Google」においてGoogle Botが行ったレンダリング結果が取得できていることが確認できる。Google Botに認識可能であるということはGoogleの検索結果にも反映され得ることが分かる。

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

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

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

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

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

JavaScriptの配置方法

デザイン画面のフッタに以下のスクリプトを配置（繰り返しになりますが現在は利用できません）。

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

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

<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>

以上までで、はてなブログでGoogleにパンくずリストを認識させるカスタマイズが行えた。はてなブログの標準機能として搭載されたり、Google側の仕様が変わるとつかなくなってしまう暫定的なものであるが、フロントエンドで生成したリンクをGoogleが読み取って実際に反映される体験がなかなか面白かった。利用については自己責任でお願いします。