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

おうちでお仕事(したい)!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!日々の勉強記録と行動記録をしていきます。目標は2016年中にタイトルの(したい)をとること!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!
日々の勉強記録と行動記録をしていきます。
目標は2016年中にタイトルの(したい)をとること!

はてなブログカスタマイズ(パンくずリスト編)

はてなブログを初めてすぐに、ちょっとデザインを見やすくしたり、ヘッダー画像を変更したりはしたのですが、他に何かしたほうがいいカスタマイズあるかな?と思って調べたところ、「パンくずリスト」の話が出てきました。

パンくずリスト、自分でサイト作るときは必ずつけていましたが、正直あまり意味はわからないまま、
「つけておけばいいことあるはず!」
くらいの気持ちでつくっていました……!

なので、これを機に「パンくずリスト」ってなんぞや?ということと、はてなブログでの設置方法を調べてみました!

パンくずリストって?

パンくずリストは主に下層ページの上部にあって、トップページからそのページまでの経路を示すことにより、訪問者がサイト内のどこにいるかわかるようにするものです。
名称の由来は童話「ヘンゼルとグレーテル」!
森の中で帰り道が分かるようにパンくずを少しずつ落としながら歩いたエピソードにちなんで名付けられたそうです。

パンくずリストを設置するメリット

メリットその① WEBサイト内での現在地がわかる

ブログの場合はあまり関係ないかもしれませんが、例えば何ページもあるような大規模なサイトの場合には、ページを見ていくにつれて、いまどこにいるのかわからなくなるのを防いでくれます。

メリットその② 検索エンジンクローラーがサイトの構造を理解しやすい

クローラーとは、サーチエンジンの検索データベースを作成するために、世界中のWebページの情報を回収するプログラムのことです。
Googleなどで検索したときに、探しているサイトが正しく表示されるのは、このクローラーが情報を集めてくれているからなんですね!
パンくずリストがあると、このクローラーがサイト全体の構造を理解しやすくなり、正しい情報をデータベースに集めてくれるようになります。
そのため、検索エンジンに正しく評価されて検索にひっかかるようになるようです。

メリットその③ 内部SEO対策になる

パンくずリストを使うと、内部リンクをはることができるうえ、カテゴリキーワードをリンク付きテキストとして各ページにはることができるので、内部SEOの対策にもなります!
例えばこの記事だと、
「TOP<WEBデザイン<はてなブログ」というパンくずリストになっているので、「WEBデザイン」「はてなブログ」というキーワードに対して、SEO対策ができるわけですね。

はてなブログでのパンくずリスト設置

さてこんな便利でお得なパンくずリストはてなブログで設置できるのでしょうか?
できます!!!
先人の知恵をお借りして、私もさっそく設置してみました。
参考にさせていただいたのは、こちらのブログ。HTMLなどのコードがわからなくても、コピペでさくっとできてしまいます!

以下のコードを、
ダッシュボード<デザイン<カスタマイズ<フッター
と進み、フッターにコピペ。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com --> <script src="">https://www.google.com/jsapi"> <script src="http://bulldra.github.io/commons.js" charset="utf-8"></script> <script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

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

さらに、ダッシュボード<デザイン<カスタマイズ<記事下
と進み、記事下に以下のコードをコピペ。

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

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

これだけでコードの設置は終了!

あとは、カテゴリの付け直しを各記事に対して行っていきます。
私はまだ数記事なのですぐにおわりましたが、この作業が、記事数が多いと大変かも……。
「親カテゴリー」「親カテゴリー-子カテゴリー」というカテゴリー作成が必要です。
この記事の場合は、「WEBデザイン」「WEBデザイン-はてなブログ」というカテゴリーをつけています。
そうすると、「TOP」<「親カテゴリー」<「親カテゴリー-子カテゴリー」というようにパンくずリストが表示されます。


今回、こちらのサイトも参考にしました↓
パンくずリストがSEOに有効な理由|ferret [フェレット]
実は重要だった!SEO効果もあるパンくずリスト

せっかくブログ書くなら目にとまったほうがいい!と思うので、地道にSEO対策していければと思います~!