1. HOME
  2. すべての記事一覧
  3. SEO
  4. パンくずリストの正しい設置方法を解説!SEOに効果的な訳とは?

パンくずリストの正しい設置方法を解説!SEOに効果的な訳とは?

公開日:2019年10月30日

最終更新日:2024年02月27日

  • twitter
  • facebook
  • はてB!

パンくずリストの正しい設置方法を解説!SEOに効果的な訳とは?

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

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

株式会社フルスピードのSEOコンサルティングサービスのご紹介(資料DLページ)
株式会社フルスピードのSEOコンサルティングサービス(株式会社フルスピードはAhrefs社のオフィシャルパートナーです)

パンくずリストとは?

パンくずリストとは、ユーザーが現在閲覧しているページがどの位置にあるかを示し、サイト内におけるナビゲーションの役割を持つ要素です。例えば、「ホーム > 全ての記事一覧 > 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コンサルティングサービスのご紹介

株式会社フルスピードのSEOコンサルティングサービスのご紹介(資料DLページ)
株式会社フルスピードのSEOコンサルティングサービス(株式会社フルスピードはAhrefs社のオフィシャルパートナーです)

株式会社フルスピードはSEOコンサルティングサービスをご提供しています。株式会社フルスピードは2001年の創業から5,500社以上ものSEOコンサルティング実績を積み上げてまいりました。

株式会社フルスピードは世界で60万人が導入する最高水準のSEO分析ツールAhrefsのオフィシャルパートナーでもあり、これまで培ってきたSEOノウハウとAhrefsのサイト分析力を活かしたSEOコンサルティングサービスをご提供することが可能です。SEOコンサルティングサービスの詳細に関しましては上記バナーをクリックしてご確認くださいませ。お気軽にご相談ください。

【無料DL】「SEO内部対策チェックシート」を無料ダウンロードするSEO内部対策チェックシート(お役立ち資料)

この記事を書いた人
GrowthSeed編集部

GrowthSeed編集部

株式会社フルスピードのGrowthSeed編集部です。企業のマーケティング担当者へ向けてWebマーケティングの成長の種となる情報を発信しています。 Twitter , Facebookで記事の更新情報やセミナーの最新情報などを日々発信しているので、ぜひフォローしてみてください。

記事の関連タグ
資料ダウンロード            
SEOの人気記事
           
SEOの新着記事
関連タグから記事を探す
       

Webマーケティングに関する
資料請求・ご依頼はこちら