SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

パンくずリストとは?作り方とSEO効果について

パンくずリストを作成(設置)して、ユーザーの利便性やクローラビリティを高めながら、サイトのSEO効果を引き出すことが大切です。

今回は、パンくずリストの定義や作り方、パンくずリストのSEO効果について中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

パンくずリストとは?作り方とSEO効果について

パンくずリストとは?

パンくずリストとは、ページの位置や属性をユーザーや検索エンジンにより明確に示すWebサイト内のナビゲーションのことです。

パンくずリストとは?

Googleでは、公式に以下のように定義してます。

パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。つまり、「内部リンク」の1つとなります。

訪問者はパンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ(通常はルートページ)を置き、右側に向けてより具体的なセクションを並べています。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

パンくずリスト を作成することで、ユーザーにとっても Googlebot にってもサイトの構造をわかりやすく示すことが可能です。

※引用元:Google ウェブマスター向け公式ブログ: NPO 向けサイト クリニックを実施しました

このように、現在のページがどの位置でどんな属性なのか?構造をわかりやすく明示して、サイト内の回遊性を上げる利便性の高いリンクが、パンくずリストと言えます。

また、パンくずリストの意味や英語表記、なぜパンくずリストと呼ばれるのか?といった由来について、Wikipediaで、以下のように記載があります。

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。

ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

※引用元:パンくずリスト – Wikipedia

パンくずリストのSEO効果と必要性

パンくずリストを適切に設置することによりユーザーの利便性が向上し、サイトの価値が高まるので、検索順位の上昇といった良いSEO効果が期待できます。

パンくずリスト含むナビゲーションの必要性について、Googleは公式に以下のように言及してます。

サイトのナビゲーション(ページ間の誘導経路)をわかりやすく整理することは、ユーザーが迅速に目的のコンテンツにたどり着けるようにするために重要です。また、検索エンジンにとっても、ウェブマスターがどのコンテンツを重要と考えているのかを理解するのに役立ちます。

※引用元:Google ウェブマスター向け公式ブログ: NPO 向けサイト クリニックを実施しました

このことから、重要なコンテンツを明示するために、パンくずリストが必要不可欠と言えます。

つまり、パンくずリスト含むナビゲーションでページの位置や属性を明示し、コンテンツを際立たせながら、利便性を向上させることがSEOにおいて重要です。

「利便性」は、Googleが第一に考慮する要素です。

  1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
    Google は、当初からユーザーの利便性を第一に考えています。

※引用元:Google が掲げる 10 の事実

また、別途Googleは以下のようにも言及してます。

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

※引用元:ウェブマスター向けガイドライン(品質に関するガイドライン) – Search Console ヘルプ

つまり、パンくずリストを提供し、ユーザーの利便性を高めてサイト運用することが、良いSEO効果につながると言えます。

また、パンくずリストに構造化データを用いることで、よりSEO効果が期待できます。

パンくずリストの正しい使い方(※Webページの位置を明確にする)

パンくずリストは、サイト内のWebページの位置を以下のように明確にすることができるナビゲーションの1つです。

パンくずリストでWebページの位置を明確にする

上記から、「SEO対策とは?SEO対策で上位表示するための方法について」というページが、「SEO」の「SEO対策」の「SEO対策の基礎」カテゴリに属し、さらにTOPページとの位置関係が一目で把握できます。

このように、パンくずリスト含むナビゲーションでWebページの位置を明確にし、わかりやすくすることについて、公式に以下のように言及してます。

サイトのナビゲーション(ページ間の誘導経路)をわかりやすく整理することは、ユーザーが迅速に目的のコンテンツにたどり着けるようにするために重要です。また、検索エンジンにとっても、ウェブマスターがどのコンテンツを重要と考えているのかを理解するのに役立ちます。

※引用元:Google ウェブマスター向け公式ブログ: NPO 向けサイト クリニックを実施しました

つまり、ページごとに明示し、どんなコンテンツがどこにあるのか?位置関係がすぐ認識できるサイト構造にするために、パンくずリストを提供することが重要であり正しい使い方と言えます。

パンくずリストの作り方(※HTML5とCSSのデザインサンプル例)

パンくずリストの作り方は、主にHTML5とCSSを使って記述し、以下のようにデザインします。

※このデザインでは、Webアイコンフォントを表示するため「Font Awesome」のCSSコードを別途HTMLファイルのheadタグ内に設置してます。

一般的な記述

一般的な記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストの一般的な記述のデザイン表示例

このように、リストタグ「ul」「ol」「li」でマークアップし、HTMLを記述することがGoogle公式でも以下のように定義されてます。

※引用元:Breadcrumb | Search | Google Developers

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

構造化データを用いた記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストの構造化データを用いた記述のデザイン表示例

このように、構造化データを用いたマークアップは推奨されており、Google公式で以下のように言及してます。

パンくずリストを表示する場合は、パンくずリストの構造化データ マークアップを使用することをおすすめします。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

また、構造化データは、シンタックスと呼ばれる以下の記述方法から選択でき、それぞれ公式にパンくずリストの記述例が紹介されます。

JSON-LD

「JSON-LD」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

JSON-LDは、最も推奨される構造化データであることが以下のように公式に言及されてます。

Google recommends using JSON-LD for structured data whenever possible.

※引用元:Introduction to Structured Data | Search | Google Developers

翻訳すると、

可能であれば、JSON-LDを構造化データとして使用することをおすすめします。

このことから、サイトの運用上支障がなければ、JSON-LDによる構造化データを用いたパンくずリストを作成し、デザインするとよいでしょう。

microdata

「microdata」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

このように、HTMLの要素に直接記述できる「microdata」は、構造化データを用いたパンくずリストとして導入しやすいです。

また、当ブログ「SEOラボ」でも、microdataの構造化データでパンくずリストをマークアップし、デザインしてます。
※参考:構造化データを用いた記述

RDFa (RDFa Lite)

「RDFa (RDFa Lite)」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

このように、HTMLの要素に直接記述できる「RDFa (RDFa Lite)」は、「microdata」と同様、構造化データを用いたパンくずリストとして導入しやすいです。

ポイント! Google公式の構造化データを用いて正しくマークアップし、ユーザーや検索エンジンによりわかりやすくサイト構造を明示しながら、パンくずリストを使いましょう。

スマホサイト向けの記述

スマホ向けに記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストのスマホサイト向けの記述のデザイン表示例

このように、横スクロール型で表示させ、1行分のスペースに収めて、スマホ向けのパンくずリストを表示させてます。
カテゴリが増えて長くなっても、1行分のスペースで収まりかつ、スクロールすることですべて閲覧できるので、利便性を考慮したパンくずリストが提供できます。

スマホ向けにCSSを記述するには、以下関連記事をご参照ください。

今回紹介したようなパンくずリストの作り方を意識し、利便性を考慮しながら実装しましょう。

ただ作るのではなく、検索エンジンに認識されやすく、ユーザーにとって使いやすいパンくずリストにしながら、利便性の高いサイトに仕上げましょう。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら