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

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。


こちらは、水先案内です。
最新仕様のパンくずリスト を どうぞご利用ください。
あわせて読みたい 機能 をどうぞご利用ください。
Proxy Hacking Protection を どうぞご利用ください。


Hatena::diary ネタまとめ
Hatena::blog SLview+ 開発日誌
Develop::site Cosmonaut
人気記事表示するやつと、それをTwitterへアナウンスするやつ

はてなブログでパンくずリストを利用する

大はてな実験 sandbox JavaScript はてな パンくずリスト

検索結果にカテゴリーを表示して、訪問者に便利な案内を提供しましょう。(SEO対策)

はてなブログ(無料版)、はてなブログProのどちらでもご利用いただけます。どうぞご利用ください。

パンくずリストを設置しよう

パンくずリストは最新の仕様*1に合わせてあります。
はてなブログの「カテゴリーごとのページ」に欠落しているパンくずリストを修正します。

説明をスキップして貼り付けコードを作成する

 

サマリー 

 

パンくずリストとは?

Webサイトの「今ここに居ます」というものを表す仕組みです。

TOPページからのジャンルや経路などを道順のように表示されることが一般的な使い方です。

TOPページ >日本 > 東京 > 千代田区 >神田

右に行くほど詳細な地域を表すパンくずリストの例になります。

検索結果に表示させることにより「目的の内容に近いものである」と伝える事ができます。

 

パンくずリストを設置する準備

それでは最初に、大カテゴリーと、小カテゴリー(親子のカテゴリー)を決めましょう。

既にたくさんのエントリーとタグがあるかもしれません。ちょっと思い出してみてください。無意識に順番に設定していませんか?それなら大丈夫です。

 

準備と考え方

一つの例を見てみましょう。

■記事のタグ一覧
東京 千代田区 グルメ そば・ラーメン・麺類 ランチ営業あり

例えば、都内のグルメレポートを扱ったエントリーの場合、場所とジャンルなどのタグが付けられます。

■記事のタグ一覧
東京 千代田区 グルメ そば・ラーメン・麺類 ランチ営業あり

この場合は「東京」「グルメ」「ランチ営業あり」が親カテゴリーになります。

TOPページ > 東京 > 千代田区
TOPページ > グルメ > そば・ラーメン・麺類
TOPページ > ランチ営業あり

■TOPページ
 ┣━┳東京 (親)
 ┃ ┗ 千代田区 (子)
 ┣━┳グルメ (親)
 ┃ ┗ そば・ラーメン・麺類 (子)
 ┗━━ランチ営業あり (親)

 

東京 千代田区 グルメ そば・ラーメン・麺類 ランチ営業あり

 親 → 子 → 親 → 子 …

左から順番に並べていきましょう。

 

カテゴリーが1つ(親)ではダメですか?

■TOPページ
 ┣━━和食 (親)
 ┣━━中華 (親)
 ┗━━フレンチ (親)

和食 中華 フレンチ

 親 → 親 → 親 …

親だけのカテゴリーを作る事もできます。(全てのカテゴリーを親として登録します。)

1つの記事にカテゴリーが1つでも

■TOPページ
 ┗━━日常 (親)

 日常

 親

大丈夫です。

 

イメージできましたか?カテゴリー一覧を表示して調べてみましょう。

→ブログのカテゴリー一覧を見る

親子の分類ができましたか?それでは、パンくずリストを設置します。

 

孫カテゴリーを作りたいのですが

利用者の画面サイズや検索結果の表示領域には、限りがあります。文字数がオーバーすると、検索結果のカテゴリー表示が一部省略されます。

※現在のパンくずリスト生成の仕様は、子カテゴリーを連続させると「親→子→孫→…」と出力されますが、仕様変更などにより予告なく変更される事があります。

 

コードを貼り付ける

親カテゴリーのリストに記入して、貼り付け用コードを作ります。

モード
親カテゴリのリスト
 
貼り付けコード

※貼り付け用コードが表示されない場合はJavaScriptをONにしてください。

貼り付け用コードをすべてコピーして、ブログの詳細設定→headに要素を追加の部分に貼り付けてから、「変更する」ボタンをクリックします。

→ブログの詳細設定を開く

 

ページの一番下にある「変更する」ボタンは押しましたか?使えるようになりました。

もっと大変だと思いましたか?作業はこれで終わりです。:)

 

ブログで紹介する

 

きちんと動作しているか確認したい

ブログの「このブログについて(aboutページ。プロフィールから自分のIDをクリック)」を開いてみましょう。
正しく貼り付けができている場合は「パンくずリスト(はてなブログ) を利用中です。」と表示されます。

 

エントリーを書くときのコツ

検索エンジンは、複数あるパンくずリスト全て取得・認識します。先頭のリストを代表として表示しますが、検索結果や内容に沿ったリストを優先的に表示する事があります。

ブログエントリー上の表示は、はてなブログではカテゴリーをクリックした順番でカテゴリー表示できるようになっています。表示させたい親子カテゴリーを先頭にすることで、ある程度希望に沿った表示を促すことができます。

f:id:psne:20141022110237p:plain
※追記:現状の仕様に合わせて文章を修正しました。

 

 

旧バージョンからのバージョンアップについて

旧バージョンの設定がブログに残っている場合は、アップデート通知が表示されます。

バージョンアップ通知
※この通知はログイン中のオーナー・編集者のみに表示されます。

古い設定を除去してから新しいスクリプトを貼り直すことで通知が消えます。

現時点では通知が出ている状態でもパンくずリストは提供されますが、お早めに移行をお願いします。

 

古い設定を貼り付けた場所を忘れてしまいました

デザイン設定(PC版)の「記事」タブ内にある「記事下」などをご確認ください。

 

 

よくある質問

パンくずリストの導入や利用に関する質問と回答集です。

リストの表示は無くても良いのですか?

 TOP > 親カテゴリー > 子カテゴリー 

よくあるこれですね。

検索エンジンが理解できる方式(JSON-LD)にて提供してるため必要ありません。

また、クリック率を検証すると、ブログ上のパンくずリストをクリックしていない事が分かるかと思います。
それならば、レイアウトが崩れたり影響を与えない構造化データとブログ本来のタグ表示だけ在れば良いですよね?という事になります。

 

はてなブログ(無料版)でパンくずリストは利用できますか?

はてなブログ(無料版)、はてなブログProのどちらでもご利用いただけます。

 

Google検索結果にすぐ反映されますか?

検索エンジンが内容を更新する速度はサイトやページにより変わります。全ての更新には数日~1ヶ月程度かかる場合もあります。

 

ブログのデザインが崩れませんか?

新バージョンでは、デザインとパンくずリストの情報が完全に分離されたため、すべてのブログテーマにて問題なく動作します。

 

困ったときは

人力検索はてなで質問する事ができます。

  1. 質問は0ポイント(無料)から利用できます。ポイント有でも大丈夫です。
  2. ご利用になりたいはてなブログのURLを質問に含めてください。
  3. 匿名質問では有効な回答が得られない場合があります
  4. 解決した場合はベストアンサーを送ってあげましょう。 :)

→ 質問をする

 

ソースコードなど

github.com

 

 

熊です。

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー