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

wepli.2

うぇぷり どっと に

コピペで『はてなブログ』に『パンくずリスト』を設置してみました

ブログ術

パンくずリスト はてなブログ

どうやら、『パンくずリスト』ってSEO的に効果があるようなので、当ブログにも設置してみました。あまり、目立たない存在の『パンくずリスト』ですが、1からやろうとするとクッソ面倒くさいし、素人にはやり方すらわからないので、本日は『コピペでOK』な『パンくずリスト』の設置方法について解説します。

『パンくずリスト』のSEO的な効果

『パンくずリスト』については、しっかりとGoogleの『検索エンジン最適化スターターガイド(以下、『SEOスターターガイド』と書きます)』にも書いてある通り、設置した方がSEO的に効果があるようです。

『SEOスターターガイド』より抜粋↓
パンくずリストとは、ページの上部か下部にある内部リンクを1 列に並べたもので、サイトのナビゲーションを明確にする上 で役立ちます。これを使えば、ユーザーは1つ前の階層やトップペ ージに素早く戻ることができます。 多くのパンくずリストはもっとも左にトップページを置き、詳細 なセクションに入るたびに右側に伸びていきます。

ちなみに『パンくずリスト』というのは、こういうヤツです↓

パンくずリストの設置例

てなわけで『パンくずリスト』を設置してみます。

『はてなブログ』に『パンくずリスト』を設定する方法

『パンくずリスト』の設置方法はとっても簡単です。というかコードを公開している方のお陰で、僕のような素人でも簡単に実装できるわけです。『太陽がまぶしかったから』さん、いつも本当にありがとうございます。

まずは、以下のコードをコピーし、フッターに移動して貼り付けます。

  1. ダッシュボード
  2. デザイン
  3. カスタマイズ
  4. フッター
<!-- パンくずリスト -->
<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つの記事にカテゴリーを何個も付けていたり、『パンくずリスト』を階層表示にしたい人は、カテゴリーを再び付けなおす必要があります。

もし、『パンくずリスト』を階層表示にしたい場合は、以下のようにしてください。

20151020070228

親カテゴリ 親カテゴリ-子カテゴリ
※ 親カテゴリと子カテゴリの間に、半角ハイフン(-)が必要です。

このように設定すると、しっかりと階層で表示してくれます。

パンくずリスト 階層表示

さいごに

『SEOスターターガイド?そんなの古いSEO対策だよw』なんて言う人もいますが、Googleが公式に発表して、その後更新されていないところを見ると、まるで効果がないとは思えません。今回の『パンくずリスト』の設置についても、やらないよりはやった方がいいと個人的には思います。コードを公開してくれている方のおかげでコピペで簡単に『パンくずリスト』が設置できるので、はてなブロガーさんはぜひ設置してみてくださいね。