簡単にパンくずリストを設置する方法
パンくずリストを設置しました。はてなブログではパンくずリストの設定が無く、諦めていたのですが、あるブログを発見し実装することができました。
これにより、SEO的にも内部構造が整理され検索エンジンからの評価も多少は上がると考えられます。
【目次】
パンくずリストとは?
初心者の方の為に、「パンくずリストとは」ブログ・サイトの訪問者が、「今サイトのどこにいるのか?」ということを視覚的に認識してもらう地図のようなものです。
このブログでは、記事タイトル下にある赤丸の部分の事を言います。
見てお分かりの通り、TOP>Google>ウェブマスターツールの順に階層が分かれていますよね。その記事(ページ)にたどり着くまでにTOPページからどこを通って来て、今どこにいるのかという事が一目で分かりますよね。
この仕組みをパンくずリストと言います。
私が参考にしたブログは以下のブログです。
はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから
コードの設定方法
どうですか?分かりましたか?
HTMLの事が分からない初心者にはちょっと難しいですよね?
そこで、上記の記事の内容を分かりやすくすると、「コピペ」するだけです。
とりあえず、難しい理論などは抜きにして以下のコードをコピーしてください。
<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>
↑[引用元:はてなブログ用ブログパーツの公式コピペ設置方法まとめ - 太陽がまぶしかったから]
【SEO内部対策】パンくずリストをはてなブログで設置
このコードを、ブログのデザイン→1カスタマイズ→2フッター→3に移動し、HTMLを貼り付けます。
次に、以下のコードをコピーします。
<style>
div #breadcrumb div{ display: inline;font-size:13px;}
</style>
<div id="breadcrumb"></div>
↑[引用元:はてなブログ用ブログパーツの公式コピペ設置方法まとめ - 太陽がまぶしかったから]
コピーしたら、そのコードを先程のようにブログデザイン→カスタマイズ→記事まで行き、記事下に貼り付けます。
これでコードの設置は終わりです。
これからが大変です。
カテゴリーの設定
カテゴリーを全て設置し直さなければなりません。
これが一番時間がかかります。
このパンくずリストは、「TOP」から「親カテゴリー」と「子カテゴリー」という流れの表示になります。
そのため、「親カテゴリー」と「子カテゴリー」を作らなければなりません。
そして、その概念ですが。
「親カテゴリー名」と「親カテゴリー名ー子カテゴリー名」という形で設定します。
この記事で言えば、この記事のパンくずリストは、「TOP」→「SEO」→「内部対策」と表示されていますね。
これをカテゴリーで設定する時には「SEO」というタグと「SEO-内部対策」というカテゴリーを設定しています。
それが、画面で表示されるときには、「TOP」→「SEO」→「内部対策」と表示されます。
「親カテゴリー名」、「親カテゴリー名ー子カテゴリー名」の設定をします。真ん中の赤字のハイフンで繋げられた後ろの言葉が、子カテゴリーとして表示されるようになります。
池田仮名(id:bulldra)さんありがとうございました。
良く読まれている記事:
【seo】初心者でも分かる「内部リンク」! - ネットビジネスとSEOを考えるブログ
【内部SEO】クローラーの巡回頻度を上げて検索順位アップ! - ネットビジネスとSEOを考えるブログ