【はてなブログ】パンくずリストを付ける方法とその確認方法

検索で調べると、カテゴリの階層と同じく定番の外部スクリプトを使う以外の方法を見つけられなかったので、自前で作ってみました。


導入すると、画像のような感じになります。

導入方法

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sub_bread(str){
 (function($) {
   $(function() {
     $(str).each(function(){
        var txt = $(this).html();
         $(this).html(
             txt.replace(/(<a.*>)(.*)(<\/a>)/g,'<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">$1<span itemprop="title">$2</span>$3</div>')
         );
      });
	});
 })(jQuery);
}
 (function($) {
    $(function() {
     $("article div.entry-categories").prepend('<a href="/">ホーム</a>');
	 $("article div.entry-categories").attr( "id", "breadcrumb" );
     $("article div.entry-categories a").attr( "itemprop", "url" );
	 sub_bread("article div.entry-categories");

	});
 })(jQuery);
</script>
<style>
div #breadcrumb div {
    display: inline;
}

div #breadcrumb div a:after {
      content: ">" ;
}
</style>

デザイン－＞カスタマイズ－＞フッタのところに上記のタグを貼り付けてください｡
1行目はjQueryの読み込みです。

カテゴリーの指定

階層構造と同じ順番で指定してください。

カテゴリー階層化と併用がお勧め

・【はてなブログ】カテゴリーを階層化する方法

上記も導入してください。

確認方法

・構造化データテストツール |  Google Developers

Google検索に認識されるまで待てませんので、上記の構造化データテストツールで正しいかどうかを確認します。
構造化データテストツール自体は、URL指定でも確認できるのですが、Javascriptで置き換えたパンくずリストにはたいおうしてなく表示されません。

ということで、ブラウザのChromeの右クリック-＞検証から、Javascriptで置き換えたHTMLを取得して、構造化データテストツールに貼り付けて確認してください。

例の定番のパンくずリストのスクリプトも、この方法でないと確認できませんでした。

やっていること

■置換前

<div class="entry-categories categories">

<a href="http://blog.example.com/archive/category/ブログ運営">ブログ運営</a>

<a href="http://blog.example.com/archive/category/ブログ運営-カスタマイズ">カスタマイズ</a>

</div>

■置換後

<div class="entry-categories categories" id="breadcrumb">

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" itemprop="url"><span itemprop="title">ホーム</span></a></div>

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://blog.example.com/archive/category/ブログ運営" itemprop="url"><span itemprop="title">ブログ運営</span></a></div>

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://blog.example.com/archive/category/ブログ運営-カスタマイズ" itemprop="url"><span itemprop="title">カスタマイズ</span></a></div>
          
</div>

置換の前後を比較すればわかるかと思います。
個別記事のカテゴリー表示の部分を、jQueryを用いてパンくずリスト構造に機械的に書き換えています。

・ホームのリンクを追加
・すでにあるカテゴリーのリンクをパンくずリストの書式に合うようにする

やってることはこの2点です。