MENU

MENU

SEOに効果的な「パンくずリスト」の正しい設置方法

タグ:

co-occurrence-words

ある程度の規模のWebサイトであれば必ずといっていいほど存在する、「パンくずリスト」。SEOにとっても重要だと言われていますが、なぜだかわかりますか?

今回は、そもそもパンくずリストとは何かという内容から、具体的な設置方法、パンくずリストの構造化データマークアップの種類についてなどをご紹介します。

パンくずリストとは?

パンくずリストとは、ユーザーが現在閲覧しているページがどの位置にあるかを示し、サイト内におけるナビゲーションの役割を持つ要素です。例えば、「ホーム > 全ての記事一覧 > SEO > モバイルフレンドリーとは?その必要性や対応方法など」といったように、ページの階層、カテゴリーの構造が明確になることで、ユーザーが今どこにいるかがわかりやすくなります。

breadcrumb_sample

ちなみに、「パンくずリスト」という言葉の由来は、グリム童話の「ヘンゼルとグレーテル」。登場する主人公たちが、森で迷子にならないように、目印として道にパンくずを撒いたというエピソードがあるのです。

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

パンくずリストを設置するメリットとしては、以下が挙げられます。

ユーザーに対して現在地を伝えられる(ユーザビリティー上のメリット)

パンくずリストを設置することで、ユーザーは現在閲覧しているページのカテゴリー構造を理解することができます。
例えば、モバイルフレンドリーについての記事を読んだ読者が、SEOに関するほかの記事も読みたいと思ったときどうするでしょうか。

「ホーム > 全ての記事一覧 > SEO > モバイルフレンドリーとは?その必要性や対応方法など」というパンくずリストがあれば、SEOを扱うカテゴリーのトップに戻り、SEOに関連する他の記事を見つけることができます。

パンくずリストは、現在位置を示すだけでなく、サイト内のその他のページへ誘導する重要な役割も持つのです。

Googleのクローラーに対して親切(SEO上のメリット)

また、パンくずリストの設置は、SEO上のメリットもあります。
Googleの検索結果上位に表示されるためには、クローラー(Webページ内を巡回し情報の収集をして、Googleのデータベースに情報登録(インデックス)を行うロボット)にページの情報を正しく伝える必要があります。クローラーがページを評価する順序としては、サイト内の階層構造に沿ってリンクを辿り、テキストリンク内のキーワードを認識することになります。
そのため、パンくずリストにキーワードを入れ込むことで、SEOの効果を期待するこができるのです。

パンくずリストの設置に関する注意点

それでは、パンくずリストを上手に設置していきましょう。
まず、以下の点には注意が必要です。

1.階層構造があいまいなままパンくずリストを作らない

ユーザー、クローラーの両方に伝わりやすいパンくずリストを作成するには、Webサイトの階層構造を明確にする必要があります。階層構造を曖昧にすると、関連性が薄れ、ユーザーの混乱を招くだけでなく、Googleからの評価が落ちてしまう要因の一つにもなります。

2.できるだけページ上部に設置する

クローラーはHTMLソースの上部から順に読み取るため、パンくずリストは、ページ上部への設置をおすすめします。また、モバイルページでユーザビリティー上問題がある場合、構造化データマークアップの設置を行った上、フッター内に設置します。
そして基本的に、パンくずリストは全てのページに設置します。ただし、トップページなど階層を挟まないページに関しては、設置する必要はありません。

3.できればパンくずリスト上にキーワードを含める

パンくずリストは、内部リンクとしての役割を果たしています。
そのため、対策するキーワードをテキストリンク内に設置することで、SEOにとってより有効になると考えられます。ただし、リンク先のページと無関係なキーワードを入れてはいけません。あくまでも自然にキーワードが入ればの話です。

パンくずリストの複数設置はOK?

基本的に、パンくずリストの設置は1ページに1つですが、サイトによっては複数設置をしていることもあります。

このようなパンくずリストの複数設置は問題ないのでしょうか?

Googleの「品質に関するガイドライン」には、こう記載されています。

「検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。」

とあるように、複数設置を行うことで、ユーザーにとって利便性が高くなるのであれば、設置を行っても問題はないと言えるでしょう。複数設置する際の注意点としては、Googleは最初に記述されているパンくずリストを認識するため、1つ目にGoogleに評価されたいパンくずリストの設置を行い、その他のパンくずリストはユーザビリティーを重視した設置を行うと良いでしょう。

パンくずリストの記述方法について

HTMLにおける、一般的なパンくずリストの記述方法はこちらです。

<ul>
<li><a href=”https://growthseed.jp/”>ホーム</a></li>
<li><a href=”https://growthseed.jp/experts/”>全ての記事一覧</a></li>
<li><a href=”https://growthseed.jp/experts/seo/”>SEO</a></li>
<li>モバイルフレンドリーとは?その必要性や対応方法など</li>
</ul>

構造化データを用いた記述

構造化データを設置すれば、クローラーにパンくずリストの内容より効果的に伝えることができます。そうすることで、検索結果上でリッチスニペット表示されるなどのメリットがあります。

構造化データマークアップについてはこちらをご覧ください。

構造化データを使用してパンくずを設置するには、3つの方法があります。

  • JSON-LD
  • microdata
  • RDFa

その中でもGoogleが推奨しているのはJASON-LDになります。

JSON-LDの記述例

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://growthseed.jp/",
"name": "ホーム"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "/experts/",
"name": "全ての記事一覧"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "/experts/seo/",
"name": "SEO"
}
}
{
"@type": "ListItem",
"position": 4,
"item":
{
"@id": "/experts/seo/mobile-friendly-necessity/",
"name": "モバイルフレンドリーとは?その必要性や対応方法など"
}
}
]
}
</script>

Microdataの記述例

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://growthseed.jp/"><span itemprop="name">ホーム</span></a><meta itemprop="position" content="1" /></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/experts/"><span itemprop="name">全ての記事一覧</span></a><meta itemprop="position" content="2"></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/experts/seo/"><span itemprop="name">SEO </span></a><meta itemprop="position" content="3"></span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">モバイルフレンドリーとは?その必要性や対応方法など</span><meta itemprop="position" content="4"></span>
</div>

RDFaの記述例

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://growthseed.jp/" class="home">
<span property="name">ホーム</span></a><meta property="position" content="1"></span>
>
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="/experts/" class="taxonomy category">
<span property="name">全ての記事一覧</span></a><meta property="position" content="2"></span>
>
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="/experts/seo/" class="taxonomy category">
<span property="name">SEO</span></a><meta property="position" content="3"></span>
>
<span property="itemListElement" typeof="ListItem">
<span property="name">モバイルフレンドリーとは?その必要性や対応方法など</span><meta property="position" content="4"></span>
</div>

コードが間違っていないかの確認方法

JASON-LD、microdata、RDFaで書いたコードが構造化データとして間違った記述になっていないかは、Googleの構造化データテストツールで確認してみましょう。構造化データツールのページを開き、確認したいコードかURLを貼り付け「テストを実行」をクリックするだけです。

テスト結果で「エラーなし」「警告なし」となれば構造化データ上問題ありません。

まとめ

以上、パンくずリストについての解説でした。パンくずリストには、ユーザビリティーの向上と、クローラーの両方に効果を期待することができます。自身のサイトにパンくずリストを設置していない場合、上記を参考にして効果的な設置を行ってみてください。

seo-monthly-report

人気記事

人気の記事一覧を見る

WEBマーケティングにお困りの際はFullSpeedにご相談ください。

pagetop