パンくずリストの設置

パンくずリストはページを移動し易くするだけでなく、Google等での検索結果に表示させる事も出来ます。本ページではパンくずリストの設置方法や確認方法等について説明しています。

パンくずリストについて

 パンくずリストはこのサイトでも設置しており、以下の図のように左上に表示されている部分です。

パンくずリストの設置1

 パンくずリストはホームページの階層でこのページがどこに位置しているかを示しており、一つ上の階層、トップページのリンクをクリックする事で上位の階層に行きやすくしています。

 Google等で検索して訪れてくれる人は必ずしもトップページに訪れるとは限らないため、他のページに行きやすい配慮をする事が必要です。

通常のパンくずリストの設置

 通常、パンくずリストは<body>と</body>の間に以下のように記述します。

【パンくずリストの設置例】
<body>
・・・
<a href="index.html">ホーム</a> >
<a href="tent/index.html">テント</a> >
A1メーカーテント
・・・
</body>

 <a href=ではリンク先を記載します。</a>で閉じる前にそのページのタイトルを記述し、</a>で閉じた後に>を記述します。

 太字部分はサイトに合わせて書き換えが必要です。又、上記は3つの階層の例ですが、<a href=の行を増やす事で階層を増やす事も出来ます。

 このように記述する事でページ上にパンくずリストが出来るだけでなく、Google等で検索した際にURLの下にパンくずリストが表示されます。

 以下は本サイトの例です。

パンくずリストの設置2

 パンくずリストがある、なしでGoogle等で検索した際の順位に影響はないですが、パンくずリストが表示されると検索した人がしっかりしたサイトだと思い、クリックする可能性が高まると思います。

 パンくずリストは<body>と</body>の間のどこに記述しても大丈夫ですが、ユーザーの分かり易い上の方に設置する事をお奨めします。

microdataを利用した設置

 通常の設置方法ではGoogle等で検索した際にパンくずリストが表示されない場合があります。その場合はmicrodataを利用して設置します。

【microdataを利用したパンくずリストの設置例】
<body>
・・・
<ol class="breadcrumb">

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="index.html" itemprop="url"><span itemprop="title">ホーム</span></a>
</li>

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="tent/index.html" itemprop="url"><span itemprop="title">テント</span>
</a>
</li>

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">A1メーカーテント</span>
</li>

</ol>
・・・
</body>

 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">でこれがパンくずリストである事を定義しています。

 <span itemprop="title">ではパンくずリストのタイトルである事を定義しています。

 太字部分をサイトに合わせて書き換えが必要な事と、行を追加する事で階層を増やせるのはmicrodataを利用した場合も同じです。

 これはリストの定義であるため、このままではホーム、テント、A1メーカーテントと縦に並べて表示されてしまいます。

パンくずリストの設置3

 このため、スタイルシートで以下のように定義します。

【パンくずリストのためのスタイルシート記述例】
ol.breadcrumb {
list-style-type: none;
}

ol.breadcrumb li {
display: inline;
}

 list-style-type: none;はリスト表示する時、前に何もつけないように指定しています。上の図では「1.ホーム」、「2.テント」等と表示されていますが、「ホーム」、「テント」と表示されるようになります。

 display: inline;はリストをテキストのように並べて表示する事を指定しています。リストは通常では縦に並んで表示されますが、この指定をする事で右に並んで表示されるようになります。

パンくずリストの設置4

microdataに関する補足とチェック

 「htmlヘッダーでのSEO対策」でスニペットについて説明しましたが、検索結果に概要以外の情報を追加する事が出来ます。これをリッチスニペットと言い、パンくずリストもリッチスニペットの1つです。

 microdataはリッチスニペットを表示するための記述形式の1つで、検索エンジンにこれがパンくずリストである事を明確化します。これをマークアップと言います。

 つまり、microdataでマークアップしてリッチスニペットとして検索エンジンに把握して貰うようにすると、パンくずリストが表示される仕組みです。

 microdataはGoogle、bing共にサポートしています。

 microdataでマークアップした後は「構造化データ テスト ツール」でパンくずリストが正常に認識されているかプレビュー出来ます。

 詳細は「Googleウェブマスターツール」の「構造化データのテスト」をご参照下さい。

  • このエントリーをはてなブックマークに追加