ザツログ

雑学、幕末、80年代、ブログカスタマイズ、ITトラブルシューティングなど。

MENU

はてなブログのカテゴリーを『パンくずリスト』化する方法

f:id:maekeeeeen:20150505144343j:plain

はてなブログの運用も慣れてきて、次はSEO対策だ、となって調べていると出てくる『パンくずリスト』。
これをやると具体的にどう良いのでしょうか?

 

パンくずリストとは

パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。

出典:パンくずリストとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]

 

例えば、下記は『パンくずリスト』が設定されているサイトのGoogleの検索結果です。
赤で囲っている部分が『パンくずリスト』で、検索結果に表示されたサイト内のページが、TOPページ > 親カテゴリー > 子カテゴリー と階層化された中の、子カテゴリー(SEO用語集)にある記事という事がわかります。

f:id:maekeeeeen:20150505150557j:plain

 

パンくずリストを設定すると具体的に何が良いの?

まず、ユーザー側からすると、今読んでいる記事はブログ内のどこにいるの?と迷わずにすみ、また、どのようにこの記事まで辿ってきたのかがわかります。
例えば下記の例では、記事下にTOP > レビュー(親カテゴリー) > サービス(子カテゴリー)という『パンくずリスト』が表示されています。

f:id:maekeeeeen:20150505151627j:plain

 

そして、SEO的にも有利と言われています。

・検索エンジンにサイトの階層構造を伝える事ができる
・検索エンジンに階層構造に準じたリンク構造を伝える事ができる
・アンカーテキストのキーワードは、リンク先ページの評価を高める

 出典:パンくずリストの正しい使い方

 

また、Googleも『検索エンジン最適化スターターガイド』で『パンくずリスト』の設置を推奨しています。

 

しかし、はてなブログではカテゴリーを階層化させる事はできませんので、少々イジる必要があります。

 

はてなブログでパンくずリストを設定

下記のサイトを参考にさせていただきました。

上記サイトから、設定すべき部分を抜粋します。

 

①はてなブログの管理画面より、『デザイン』 > 『カスタマイズ』 > 『フッタ』を選択し、下記のスクリプトをコピー&ペーストします。

<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.setOnLoadCallback(categoryHierarchyModule);
</script>

出典:はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから

 

②はてなブログの管理画面より、『デザイン』 > 『カスタマイズ』 >  『記事』 > 『記事下』 を選択し、下記のHTMLをコピー&ペーストします。

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

 出典:はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから

 

次章のカテゴリーの再構築が完了すれば、記事下に下記のように『パンくずリスト』が表示されます。

f:id:maekeeeeen:20150505164611j:plain

 

カテゴリーの再構築

この『パンくずリスト』化方法では、TOPから数えて3階層のカテゴリーを設定でき、カテゴリー設定画面の一番最初(一番左側)に設定したカテゴリーを親カテゴリーと認識します。
そして、二番目(右側)に設定したカテゴリーを子カテゴリーと認識します。
しかし、従来のカテゴリー名ではうまく動作しません。
子カテゴリーにあたるカテゴリー名を下記のように作成する必要があります。

 

『親カテゴリー』 > 『親カテゴリー-子カテゴリー』

見えにくいですが、親カテゴリー子カテゴリーの間にある記号は半角のハイフンマイナス『-です。

 

例えば、TOP > レビュー(親カテゴリー) > サービス(子カテゴリー)というカテゴリーを設定した場合は下記のように、親カテゴリー『レビュー』子カテゴリー『レビュー-サービス』と設定します。

f:id:maekeeeeen:20150505164316j:plain

 

カテゴリー再構築後、しばらくしてGooglebotにクロールされてインデックスされると、以下のように『パンくずリスト』化されます。

こちらからも確認できます。

f:id:maekeeeeen:20150511233043j:plain