このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

パンくずリストでウェブサイトの構造をわかりやすく

記事Sep. 10th,2018
ウェブサイトの構造をユーザーにも検索クローラーにもわかりやすくするパンくずリストについて。パンくずリストのJSON-LDとMicrodataでの構造化マークアップの方法も。

パンくずリスト

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

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

“パンくずリスト”の例

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

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

ウェブページの階層構造

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

階層ごとの“パンくずリスト”の例

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

このウェブサイトの“パンくずリスト”

パンくずリストを設置するメリット

ユーザビリティーの向上

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

ユーザビリティー”とはユーザーがウェブサイトで効率よく、ストレスなく目的を達成できたかを示す指標です。

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

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

SEO効果

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

SEO(Search Engine Optimization)”とは検索エンジン最適化のことでGoogleなどの検索エンジンの検索結果で上位に表示されるために改善していく施策です。

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

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

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

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

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

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

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

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

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

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

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

カテゴリを整理する

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

関連性のない“パンくずリスト”

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

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

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

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

複数設置する“パンくずリスト”の例

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

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

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

アンカーテキスト”とはリンクになっているテキストのことで通常はa”要素に囲まれているテキストを指します。

ターゲットキーワード”とは検索エンジンからウェブサイトへやってくるユーザーが検索すると想定するキーワードのことです。

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

“ターゲットキーワード”と“パンくずリスト”のイメージ

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

“ターゲットキーワード”を含められていない“パンくずリスト”

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

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

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

構造化マークアップについて詳しくはこちら。
JSON-LDで構造化マークアップする

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

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

“パンくずリスト”が表示された検索結果

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

“構造化データ テストツール”

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

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

<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>

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

<nav>
<ol 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”属性で指定します。

“Microdata”による構造化データのマークアップについて詳しくはこちら。
マイクロデータ属性-HTMLタグ辞書

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

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

<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>

このパンくずリストを“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>
<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>

それぞれのウェブページの階層を“position”で指定し、“@id”でウェブページのURL、“name”でそのウェブページの名前を指定します。上の例ではURLにルート相対パスを使用していますが、絶対パスでも相対パスでも問題ありません。

“JSON-LD”による構造化データのマークアップについて詳しくはこちら。
JSON-LDで構造化マークアップする

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク