どうやら、『パンくずリスト』ってSEO的に効果があるようなので、当ブログにも設置してみました。あまり、目立たない存在の『パンくずリスト』ですが、1からやろうとするとクッソ面倒くさいし、素人にはやり方すらわからないので、本日は『コピペでOK』な『パンくずリスト』の設置方法について解説します。
『パンくずリスト』のSEO的な効果
『パンくずリスト』については、しっかりとGoogleの『検索エンジン最適化スターターガイド(以下、『SEOスターターガイド』と書きます)』にも書いてある通り、設置した方がSEO的に効果があるようです。
『SEOスターターガイド』より抜粋↓
パンくずリストとは、ページの上部か下部にある内部リンクを1 列に並べたもので、サイトのナビゲーションを明確にする上 で役立ちます。これを使えば、ユーザーは1つ前の階層やトップペ ージに素早く戻ることができます。 多くのパンくずリストはもっとも左にトップページを置き、詳細 なセクションに入るたびに右側に伸びていきます。
ちなみに『パンくずリスト』というのは、こういうヤツです↓
てなわけで『パンくずリスト』を設置してみます。
『はてなブログ』に『パンくずリスト』を設定する方法
『パンくずリスト』の設置方法はとっても簡単です。というかコードを公開している方のお陰で、僕のような素人でも簡単に実装できるわけです。『太陽がまぶしかったから』さん、いつも本当にありがとうございます。
まずは、以下のコードをコピーし、フッターに移動して貼り付けます。
- ダッシュボード
- デザイン
- カスタマイズ
- フッター
<!-- パンくずリスト --> <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> <script type="text/javascript"> google.setOnLoadCallback(categoryHierarchyModule); </script> <!-- パンくずリストおわり -->
出典元 : はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから
※ コードにコメントを追加しました。
あとはお好みでCSSをカスタマイズしてください。
カテゴリーの再設定
この『パンくずリスト』の設置方法では、カテゴリーが『パンくずリスト』になるので、1つの記事にカテゴリーを何個も付けていたり、『パンくずリスト』を階層表示にしたい人は、カテゴリーを再び付けなおす必要があります。
もし、『パンくずリスト』を階層表示にしたい場合は、以下のようにしてください。
※ 親カテゴリと子カテゴリの間に、半角ハイフン(-)が必要です。
このように設定すると、しっかりと階層で表示してくれます。
さいごに
『SEOスターターガイド?そんなの古いSEO対策だよw』なんて言う人もいますが、Googleが公式に発表して、その後更新されていないところを見ると、まるで効果がないとは思えません。今回の『パンくずリスト』の設置についても、やらないよりはやった方がいいと個人的には思います。コードを公開してくれている方のおかげでコピペで簡単に『パンくずリスト』が設置できるので、はてなブロガーさんはぜひ設置してみてくださいね。