パンくずリストでウェブサイトの構造をわかりやすく｜web design－havin' a coffee break

＃

“パンくずリスト”とは？

“パンくずリスト(breadcrumb list)”とは階層構造になったウェブサイトで今ユーザーが見ているページがどの位置にいるのかをわかりやすくするためのページの一覧です。一般的にはウェブページの上部に配置されます。

このページの上部にもパンくずリストがあります。

グリム童話の“ヘンゼルとグレーテル”で道に迷わないように粉々にしたパンのくずを道しるべとして道に落としたことになぞらえ、ユーザーがトップページから今見ているページまでどのようにウェブサイト内を辿ってきたかがわかることから“パンくず(breadcrumb)”と名付けられています。

一般的にウェブサイトはページの内容によってカテゴリー分けされた階層構造になっています。例えば一番上位にトップページがあり、その下に大まかなカテゴリ、そのさらに下に細かいカテゴリ、そのさらに下にコンテンツとなるウェブページがあります。

パンくずリストはそのページの階層構造の中での位置とともにページが属しているカテゴリも表します。

＃

パンくずリストのコード

以下はナビゲーションを表す“nav”要素と順序付きリストを表す“ol”要素を組み合わせたパンくずリストのコードの例です。



<nav>


<ol>


<li><a href="/">トップ</a></li>

<li><a href="/fruits/">果物</a></li>

<li><a href="/fruits/banana/">バナナ</a></li>

<li><a href="/fruits/banana/islandbanana.html">島バナナ</a></li>


</ol>


</nav>

見た目はスタイルシートなどを使用して整えます。以下はこのコードをもっともベーシックなデザインのパンくずリストのデザインに整えるスタイルシートです。



.breadcrumbs {


  margin: 0;

  padding: 0;

  list-style: none;


}





.breadcrumbs li {


  display: inline; /* 横並びに */

  list-style: none;

  font-size: 1.2em; /* 文字サイズ */

  font-weight: bold; /* 太字 */


}





.breadcrumbs li:after {


  content: '>'; /* 間に“>”を入れる */

  padding: 0 5px;

  color: rgb(127,127,127); /* “>”の色 */


}





.breadcrumbs li:last-child:after {


  content: '';


}





.breadcrumbs li a {


  text-decoration: none;

  color: rgb(63,72,204); /* リンク文字色 */


}





.breadcrumbs li a:hover {


  text-decoration: underline;


}

スタイルシートを適用すると以下のようになります。



<nav>


<ol class="breadcrums">


<li><a href="/">トップ</a></li>

<li><a href="/fruits/">果物</a></li>

<li><a href="/fruits/banana/">バナナ</a></li>

<li><a href="/fruits/banana/islandbanana.html">島バナナ</a></li>


</ol>


</nav>

さらに、パンくずリストは“構造化マークアップ”すると検索クローラーなどにも認識されやすくなります。

＃

ユーザビリティーの向上

パンくずリストはウェブサイトを見る人間のユーザーのユーザビリティーを向上します。コンテンツが多いウェブサイトや、階層構造が深いウェブサイトではユーザーが今ウェブサイトの中でどの位置にいるのかやウェブサイトの構造がわかりにくくなりますが、パンくずリストはこれらをわかりやすく示すことができます。

また、検索エンジンの検索結果からウェブサイトにやって来たユーザーが最初に見るページがトップページであるとは限りません。パンくずリストはトップページ以外のページにやってきたユーザーにもそのページがウェブサイトの中でどのような位置にあるページなのか認識させることができ、さらには上位の階層にあるページやトップページへ導くこともできます。

一般的にウェブサイトの下位の階層はページの内容の種類やカテゴリで分類されているので、ユーザーが今見ているページがどのカテゴリに属しているのかも知ることができます。

＃

SEO効果

パンくずリストには検索エンジンがウェブサイトの構造を認識しやすくするのでSEO効果もあります。

検索エンジンは他のウェブページからどのくらいそのウェブページがリンクされているかをウェブページを評価する指標の一つとしていますが、内部リンクについても同様です。パンくずリストは正しく設置されていればウェブサイト内で上部の階層にあるウェブページほどリンクされることが多くなり、重要度が高いウェブページとして評価されやすくなります。

また、検索エンジンの情報を収集する検索クローラーもリンクを辿ってウェブサイトの中を巡回していきますので、パンくずリストは検索クローラーの巡回効率を高めることにもつながります。

＃

可能な限りすべてのページに設置する

パンくずリストはすべてのページに設置するのが望ましいとされます。

前述した通り、他のウェブページからどのくらいそのウェブページがリンクされているかがSEOと関係しますが、この効果はできるだけ多くのページにパンくずリストがあった方が最大化されます。

また、ユーザーにとっても同じデザインのパンくずリストがすべてのページの同じ場所にあった方がわかりやすくなります。

ただし、トップページなどの階層構造を知らせる必要のないページには必ずしも設置する必要はありません。

＃

ウェブページの上部に設置する

設置場所についての決まりはありませんが、ウェブページの上部に設置されている場合が多く、上部にある方がユーザーには馴染みがあるので認識されやすくなります。

ただし、下部に設置してはいけないということはなく、検索エンジンもウェブページの下部にパンくずリストがあっても認識してくれます。

＃

カテゴリを整理する

適切なパンくずリストはリストにあるすべてのページに関連性があります。関連性のないページが含まれるパンくずリストはわかりにくく、ウェブサイトの構造も整理されていないものであることが表されてしまいます。

このように関連性のあるパンくずリストにするにはウェブサイトの階層構造がそれぞれのページの内容に基づいてカテゴリで分類された構造にする必要があります。

ウェブサイト内のページを分類するカテゴリが整理されていなかったり、分類が基準が曖昧だとパンくずリストを設置してもわかりづらいものになり設置した意味がなくなってしまいます。

＃

パンくずリストを複数設置する

コンテンツが多いウェブサイトだと一つのページが複数のカテゴリに属していることもあります。この場合複数のパンくずリストを設置することもできます。ただし、検索エンジンがウェブサイトの構造を認識するために使用するのは一つ目のパンくずリストであるとされています。

不必要にいくつもパンくずリストを設置するとユーザビリティを損ねますので複数あった方がユーザーにとって便利である時のみ複数設置するべきです。

＃

アンカーテキストにターゲットキーワードを含める

検索エンジンはリンクのアンカーテキストをリンクの数とともにリンクされたウェブページの内容や質を判断する参考にしているため、パンくずリストのアンカーテキストにターゲットキーワードを含めるのはSEOの上で重要になります。

パンくずリストでは上位の階層にあるページほどリンクされる数が多くなり、さらにそれらは同じアンカーテキストでリンクされます。アンカーテキストにターゲットキーワードを含めればそのターゲットキーワードでのリンクが集まるウェブページは検索エンジンからの評価が高まります。

ただし、あくまで自然な形でターゲットキーワードを含めなければユーザビリティを損ねるので、矛盾のないパンくずリストにするためには予めターゲットキーワードを含めやすいウェブサイトの構造としておく必要があります。

＃

パンくずリストを構造化マークアップする

パンくずリストを設置しておけば検索エンジンが勝手に認識してくれる場合もありますが、“構造化マークアップ”するとより認識されやすくなります。

“構造化マークアップ”することで「これはパンくずリストである」や「このリンクは何番目の階層へのリンク」などということが検索エンジンに認識されます。

また、検索エンジンによってパンくずリストが認識されると検索結果にもパンくずリストが表示されます。これは検索結果を見たユーザーがそのウェブサイトがどのようなウェブサイトなのかを知りやすくなり、ウェブサイトがクリックされることにもつながります。

“構造化マークアップ”した後は正しくマークアップできているかをGoogleが提供する“構造化データテストツール”などで検証することができます。

＃

“Microdata”で構造化マークアップ

以下のサンプルコードは構造化マークアップしていないパンくずリストのコードです。



<nav>


<ol class="breadcrums">


<li><a href="/">トップ</a></li>

<li><a href="/fruits/">果物</a></li>

<li><a href="/fruits/banana/">バナナ</a></li>

<li><a href="/fruits/banana/islandbanana.html">島バナナ</a></li>


</ol>


</nav>

このパンくずリストを“Microdata”で構造化マークアップすると以下のようになります。



<nav>


<ol class="breadcrums" itemscope itemtype="http://schema.org/BreadcrumbList">


<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">


<a href="/" itemprop="item"><span itemprop="name">トップ</span></a>

<meta itemprop="position" content="1">


</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">


<a href="/fruits/" itemprop="item"><span itemprop="name">果物</span></a>

<meta itemprop="position" content="2">


</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">


<a href="/fruits/banana/" itemprop="item"><span itemprop="name">バナナ</span></a>

<meta itemprop="position" content="3">


</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">


<a href="/fruits/banana/islandbanana.html" itemprop="item"><span itemprop="name">島バナナ</span></a>

<meta itemprop="position" content="4">


</li>


</ol>


</nav>

マイクロデータ属性でパンくずリストを構成する要素をマークアップします。属性を指定する要素がない場合は“span”要素を使用して属性を指定します。それぞれのウェブページの階層は“meta”要素に“content”属性で指定します。

＃

“JSON-LD”で構造化マークアップする

以下のサンプルコードは上の“Microdata”でマークアップした例と同じパンくずリストのコードです。



<nav>


<ol class="breadcrums">


<li><a href="/">トップ</a></li>

<li><a href="/fruits/">果物</a></li>

<li><a href="/fruits/banana/">バナナ</a></li>

<li><a href="/fruits/banana/islandbanana.html">島バナナ</a></li>


</ol>


</nav>

このパンくずリストを“JSON-LD”で構造化マークアップすると以下のようになります。



<script type="application/ld+json">


{


"@context": "http://schema.org/",

"@type": "BreadcrumbList",

"itemListElement": [


{


"@type": "ListItem",

"position": 1,

"item": {


"@id":"/",

"name":"トップ"


}


},

{


"@type": "ListItem",

"position": 2,

"item": {


"@id":"/fruits/",

"name":"果物"


}


},

{


"@type": "ListItem",

"position": 3,

"item": {


"@id":"/fruits/banana/",

"name":"バナナ"


}


},

{


"@type": "ListItem",

"position": 4,

"item": {


"@id":"/fruits/banana/islandbanana.html",

"name":"島バナナ"


}


}


]


}



</script>



<nav>


<ol class="breadcrums">


<li><a href="/">トップ</a></li>

<li><a href="/fruits/">果物</a></li>

<li><a href="/fruits/banana/">バナナ</a></li>

<li><a href="/fruits/banana/islandbanana.html">島バナナ</a></li>


</ol>


</nav>