パンくずリストの重要性を考えてみる!

こんにちは!

突然ですが「パンくずリスト」はご存知ですか?すいません。当然、ご存知ですよね。

「パンくずリスト」とは、サイトの階層を示すナビゲーションのことです。

↓当サイトを例にするとこれです。よく見ますよね。

この「パンくずリスト」ですが、今まで何気に使用していた部分があったので、ちょっと「パンくずリスト」を設置する重要性に付いて考えてみたいと思います。

↓ちなみに「wikipedia」では「パンくずリスト」を見てみるとこんな一文が。

【wikipedia】
日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に「breadcrumbs」または「breadcrumb navigation」というのが一般的。
「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
引用元:wikipedia

まさか童話の『ヘンゼルとグレーテル』が由来とは知りませんでした。

「パンくずリスト」を設置する理由!

「パンくずリスト」を設置する理由として、主に2つの理由があります。

ユーザビリティの観点!

ユーザビリティとは「使いやすさ」のことです。訪問者がサイト内でどのページにいるか見失わないようにするために「パンくずリスト」を設置します。

全てのページに「パンくずリスト」を設置することで、訪問者は直感的に自分のサイト内での位置を確認できます。

「パンくずリスト」のリンクから、上位階層のページやホームへ移動することもできますし、やはりあると便利です。

SEOの観点!

サイトの評価を高めるために検索エンジンに、どのページにどんなコンテンツがあるのかサイトの階層構造を正確に伝える必要があります。その階層構造を検索エンジンに知らせる、最も簡単な方法が「パンくずリスト」を設置することです。

ページ同士の親子関係や、このページはどこのカテゴリーに属しているのかなど、サイト内が整理されているのが前提条件です。バラバラの状態では、検索エンジンが混乱してしまいます。

「パンくずリスト」のマークアップ!

検索エンジンに階層構造を正確に伝えるために構造化データで「パンくずリスト」をマークアップする必要があります。検索エンジンに情報が伝わると検索結果に「パンくずリスト」が表示されるようになります。

↓当ブログでは以下のように表示されています。

実際にマークアップ!

実際にマークアップしてみます。

↓以下のような「パンくずリスト」の場合、どのようにマークアップすれば良いのでしょうか。

<div class="panlist">
  <a href="http://wp-technique.com">ホーム</a> >>
  <a href="http://wp-technique.com/category/tool-soft/">お勧めツール・ソフト</a> >>
</div>

↓以下のように修正してください。どういう意味なのか気になると思いますが、今はこういう設定をするものだと割り切ってください。

の部分はCSSでの装飾も兼ねています。こちらはなくても大丈夫です。

<div class="panlist">
  <div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://wp-technique.com" itemprop="url">
      <span itemprop="title">ホーム</span></a> >>
    </div>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://wp-technique.com/category/tool-soft/" itemprop="url">
      <span itemprop="title">お勧めツール・ソフト</span></a> >>
    </div>
  </div>
</div>

↓コードだけでは分かりにくいので、画像にしました。赤文字の部分を追加して下さい。

設定できているかテストします!

「ウェブマスターツール」に「構造化データ テスト ツール」が用意されています。先程のhtmlを貼り付けて「プレビュー」をクリックすると、どのように設定されているかチェックできます。

↓以下の「構造化データテストツール」をクリックしてください。

【ウェブマスターツール】
構造化データテストツール

↓「構造化データテストツール」画面が開きます。「URL」「html」のどちらでもチェックできます。今回は「html」でチェックします。

↓上記のコードを貼り付けて、「プレビュー」をクリックしてください。

↓結果が以下のように表示されます。問題なく表示されていますね。

マークアップの注意点!

↓マークアップする時は以下の内容に注意点してください

  • 現在、開いているページはリンクしないでください。今、開いているページへリンクを貼る意味がないので。
  • CSSのid名やclass名は構造化データであることを検索エンジンに認識してもらうために「breadcrumb」などの名前にしてください。

最後に!

サイト内の階層構造を整理し、正しくマークアップした「パンくずリスト」を設置するだけで、サイトの評価が大きく変わることもあります。「パンくずリスト」を設置していない、もしくは正しくマークアップしていない方は、ぜひお試しください。たったこれだけの作業でサイトの評価が大きく変わるなら、やる価値は十分にあります。

今まで何気なく設置していた「パンくずリスト」ですが、私が想像してた以上に大事なものであることを認識しました。当たり前にやっていることが、どれだけ重要なことなのか理解しておくことは大事ですね。こういうことが積み重なってサイトの評価につながるのだと思います。

以上「パンくずリストの重要性を考えてみる!」でした!

それではまた。

SEO
スポンサーリンク
社会不適合者のWEBフリーランス生活をフォローする
社会不適合者のWEBフリーランス生活

コメント