どうもこんにちは、過去の記事の見直し中の、ブログ住民のあんこぱん（@ankopan01）です。
はてなブログは、以前の記事「はてなブログProの設定の備忘録、SEO効果もある!?カテゴリーをまとめて整理してみました」でも掲載しましたが、記事はタグ付けではなくカテゴリ分類の位置付けです。
なので、タグ付けのように多くのカテゴリに属していくと、1つの記事が3つも4つもカテゴリに位置付けられていまいます。
記事の階層を考えると、1つの記事が複数の階層に属することになり、あまり好ましいとは言えません。特にはてなブログをカスタマイズし、パンくずリストを設置する場合、複数の階層に位置付けられます。
筆者も過去の記事を見直し、このブログにもパンくずリストを設置することにしました。
そこで今回は、はてなブログProの設定の備忘録として、パンくずリストの設置方法をご紹介します。
1.パンくずリストとは
ウェブサイトで、閲覧者が現在サイト内のどの位置にいるかを階層表示するリスト。
2.はてなブログでパンくずリストを設置する
2.1 パンくずリストの必要性
基本的に、はてなブログには、パンくずリストを表示する機能がありません。
しかしながら、記事がどの階層に属しているか、ブログが体系的に整理されているかなど、情報を検索することでは、この階層の位置付けと、ウェブサイトの体系化はとても重要な要素になります。
なので、はてなブログにパンくずリストを設置し、検索されやすいブログにカスタマイズすることも、1つのSEO対策になります。
2.2 他のはてなブログを参考にパンくずリストを設置
参考にしたページはこちらです。
- 次のコードをコピーします。
<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>
<script type="text/javascript">
google.set0nloadCallbach(categryHierarchyModule);</script>
- コピーしたコードを、PC用のフッタ（HTML）部分に貼り付けます。
- 次のコードをコピーします。
<style>
div #breadcrumb div{ display: inline;font-size:13px;}
</style>
<div id="breadcrumb"></div>
- コピーしたコードを、PC用記事下（HTML）部分に貼り付けます。
以上で設定は完了です。意外と簡単にパンくずリストを設置することができました！
3.まとめ
このようにとても簡単に、はてなブログにパンくずリストを設置できます。
カテゴリをタグ付けするように、おおく設定していると、複数のパンくずリストが表示されてしまうので、事前にカテゴリを整理しておいたほうがいいと思います。ちなみに筆者は、1記事1カテゴリになるよう整理しました。
どの程度の検索への影響があるかどうかはわかりませんが、記事がどの階層にいるのかが分かりやすいので、ユーザビリティにおいても評価が高くなると思います。
とても簡単なカスタマイズ方ですので、はてなブログのカスタマイズの参考にしてください。