interest blog

サクッと読めるライトな記事に詰めた知識


【SEO内部対策】パンくずリストをはてなブログで設置

簡単にパンくずリストを設置する方法

パンくずリストを設置しました。はてなブログではパンくずリストの設定が無く、諦めていたのですが、あるブログを発見し実装することができました。これにより、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内部対策】パンくずリストをはてなブログで設置

このコードを、ブログのデザイン→カスタマイズ→フッター→に移動し、HTMLを貼り付けます。

はてなブログのHTML編集画面

 

次に、以下のコードをコピーします。

 

<style>

div #breadcrumb div{ display: inline;font-size:13px;}

</style>

<div id="breadcrumb"></div>

 ↑[引用元:はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから

コピーしたら、そのコードを先程のようにブログデザインカスタマイズ記事まで行き、記事下に貼り付けます。

 

はてなブログの記事下HTML編集画面画像

 

これでコードの設置は終わりです。これからが大変です。

カテゴリーの設定

カテゴリーを全て設置し直さなければなりません。これが一番時間がかかります。

このパンくずリストは、「TOP」から「親カテゴリー」と「子カテゴリー」という流れの表示になります。そのため、「親カテゴリー」と「子カテゴリー」を作らなければなりません。

親と子という考え方

そして、その概念ですが。

親カテゴリー名」と「親カテゴリー名子カテゴリー名」という形で設定します。この記事で言えば、この記事のパンくずリストは、「TOP」→「SEO」→「内部対策」と表示されていますね。

これをカテゴリーで設定する時には「SEO」というタグと「SEO内部対策」というカテゴリーを設定しています。

はてなブログカテゴリー設定画面の画像

 

それが、画面で表示されるときには、「TOP」→「SEO」→「内部対策」と表示されます。

「親カテゴリー名」、「親カテゴリー名子カテゴリー名」の設定をします。真ん中の赤字のハイフンで繋げられた後ろの言葉が、子カテゴリーとして表示されるようになります。

池田仮名(id:bulldra)さんありがとうございました。

 

良く読まれている記事:

【seo】初心者でも分かる「内部リンク」! - ネットビジネスとSEOを考えるブログ

 

 

【内部SEO】クローラーの巡回頻度を上げて検索順位アップ! - ネットビジネスとSEOを考えるブログ