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

公開日:2014年4月25日
最終更新日: 2015年3月17日

seo_panlist_photo_01

こんにちは!

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

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

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

seo_panlist_photo_02

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

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

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

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

目次!

1.「パンくずリスト」を設置する理由!
2.「パンくずリスト」のマークアップ!

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

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

ユーザビリティの観点!

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

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

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

SEOの観点!

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

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

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

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

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

seo_panlist_photo_03

実際にマークアップ!

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

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

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

以下のように修正してください。
どういう意味なのか気になると思いますが、今はこういう設定をするものだと割り切ってください。
<div id=”breadcrumb”>の部分は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>&nbsp;&gt;&gt;
    </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>&nbsp;&gt;&gt;
    </div>
  </div>
</div>

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

seo_panlist_photo_07

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

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

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

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

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

seo_panlist_photo_04

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

seo_panlist_photo_05

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

seo_panlist_photo_06

マークアップの注意点!

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

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

最後に!

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

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

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

それではまた。

公開日:2014/04/25
最終更新日: 2015年3月17日
カテゴリー:SEO

関連記事

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい * Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly