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

【修正版】はてなブログのカテゴリーリンクをパンくずリストに書きかえるスクリプト

先日書いたパンくずリストに書きかえるスクリプトですが、根本的に作り方を間違えていたようなので、プログラムと合わせて記事も書き直すことにしました。

以下、修正したコードです。前回以上に力技になった気がしますが…

コード

<script type="text/javascript">
var blog_url = "/";

var category_link = document.querySelector("div.categories a");
category_link.setAttribute("itemprop","url");
category_link.innerHTML = "<span itemprop=\"title\">" + category_link.innerHTML + "</span>";
category_link.outerHTML = "<div itemscope=\"itemscope\" itemtype=\"http://data-vocabulary.org/Breadcrumb\" style=\"display:inline;\">" + category_link.outerHTML + "</div>";

var category_div = document.querySelector("div.categories");
category_div.innerHTML = "<div itemscope=\"itemscope\" itemtype=\"http://data-vocabulary.org/Breadcrumb\" style=\"display:inline;\">" + "<a href=\"" + blog_url + "\" itemprop=\"url\"><span itemprop=\"title\">トップ</span></a> &gt; </div>" + category_div.innerHTML;
</script>

あとに書いてある出力例を見てもらえば分かると思いますが、すでにあるdiv(categories)に対してitemscopeとitemtype属性を設定するのをやめて、トップページへのリンクと先頭のカテゴリーのリンクを別途divタグで括るようにしました。

先頭のカテゴリーのみにしたのは、そのまま全てのリンクに適用してしまうと、2番目以降のカテゴリーが子として認識されてしまうのと、複数のリストに対応させようとすると、レイアウトの調整やリンクを使い回すのが難しくなりそう*1だったため。

使い方

blog_urlを自分のブログのURLかルートを表わす/に変更して上記のコードをデザインの「記事下」に追加してください。動作するのは記事ページのみです。ブログのテーマによってはデザインと合わないかもしれません。

出力例

この記事であればこんな感じで出力されています。*2

<div class="categories ">
    <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" style="display:inline;"><a href="/" itemprop="url"><span itemprop="title">トップ</span></a> &gt; </div>
    <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" style="display:inline;"><a href="http://sprint-life.hatenablog.com/category/%E3%81%AF%E3%81%A6%E3%81%AA" itemprop="url"><span itemprop="title">はてな</span></a></div>
    <a href="http://sprint-life.hatenablog.com/category/JavaScript">JavaScript</a>
    <a href="http://sprint-life.hatenablog.com/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a>
</div>

Google ウェブマスターツールにある「構造化データ テスト ツール」のプレビューではパンくずリストが表示されることを確認*3していますが、今度こそちゃんと反映されるかはしばらく待つ必要がありそうです。

「構造化データ テスト ツール」によるパンくずリストのプレビュー

前回の記事についてid:bulldraさんからブコメでコメントをいただいたり、id:psneさんからパンくずリストのマークアップについて言及していただきました。間違いに気づかずしばらく放置していたかもしれません。ありがとうございました。

参考

リッチ スニペット - パンくずリスト - ウェブマスター ツール ヘルプ

*1:考えるのが面倒

*2:実際は改行がなかったり空白が入ったりしていますが、見やすくするために調整しています

*3:前回の記事を書いた時も使ったんですが、検索結果のプレビューが出ていたことに気づかず