スマホにパンくずリストは必要?不要?

smartphone_breadcrumbSEO
SEO

昨今の情報検索のキーワードに「モバイルファースト」という言葉があります。
ひと昔前までは、なにか調べものをしようと思うとパソコンを開いて目的の記事を検索するということが普通であり、それしか方法がありませんでした。
しかし現在は、スマホが急速に普及したこともあって、その役割はパソコンからスマホへと移行しています。

当然、SEO的な観点を始めとして求められるものはパソコンが主流の時代となんら変わりありません。
しかし、「パンくずリスト」に関してはその必要・不必要の意見がネット上で真っ二つに別れているのが現状です。

今回は、スマホにおける「パンくずリスト」は必要かどうか、そもそも「パンくずリスト」とは何なのかという観点から解説・検証していきます。

パンくずリストとは?その役割

そもそも「パンくずリスト」という言葉を知らない方も多いのではないでしょうか。
パンくずリストとは、パソコンではおなじみですが、モバイルサイト(スマホ版サイト)では表示されるところもあれば、されないところもあります。
そんなパンくずリストの説明から、役割までをこの章では記していきます。

パンくずリストはWebサイトの地図

パソコンで何かを検索した時に、サイトの上、もしくは下に写真のようなものを見たことがあると思いますが、赤線の部分がパンくずリストです。
名前の由来は、童話「ヘンゼルとグレーテル」で兄妹が道に迷わないように道しるべとして「パンくず」を落としながら進んだことからきています。
略称はそのまま「パンくず」。
わかりやすいですね。

※画像はApple公式サイトより
このように、階層になったWebサイトのどこに検索主がいるのかを示すのが、パンくずの役割です。
この観点はUX(ユーザーエクスペリエンス)という点で非常に重要な役割を担っています。

クローラーに対しても地図の役割を果たす

SEOの観点においても、パンくずは重要な地図としての役割を果たします。
検索エンジンから必要な情報を取り出すロボットであるクローラーにとって、パンくずが設定されていると該当情報を即座に取りだすことができるようになります。
その結果として、ページの検索数が上昇することは言うまでもありません。

スマホ版でパンくずリストを設置するメリットとデメリット

ここまでは、主にパソコン向けのお話でした。
しかし、Googleが2020年9月より、サイトの評価基準をMFI(モバイルファーストインデックス)にすると発表しました。
つまり、スマホの検索数がサイトのランキングに影響する比重を大きくしたのです。

これに伴って、「スマホサイトにパンくずリストは必要か」という議論が巻き起こっているのです。
ここではスマホサイトでパンくずを設置するメリット・デメリットを紹介します。

メリット1:SEOで高評価を得られる

先のクローラーの話でも出てきましたが、SEO対策においてパンくずは重要な役割を果たします。
パソコンもスマホも、ページ1枚だけでサイトが成り立っているというケースはめったにありません。
つまりはクローラーにサイトの階層構造を把握させることで、サイトを検索上位にできる可能性が上がるのはパソコンでもスマホでも変わらないということです。

メリット2:ユーザーの利便性が向上

特に階層構造が複雑なオンラインショッピングサイトでは恩恵を受けやすいのも、パンくずのメリット。

例えば今、あなたは「ファッション〉Tシャツ〉DIESEL」のパンくずがついたページを見ているとします。
その時に「DIESEL以外のシャツもみたいな」と思ったときに、表示されているパンくずの「Tシャツ」を押せば、他のブランドのものも見ることができます。
つまり、ユーザーの利便性(ユーザービリティ)が向上するのです。

デメリット:画面が小さいのでサイトが見にくくなる

当然のことですが、スマホはパソコンよりも画面に表示できる情報量が少ないです。
そのため、「パンくずリストを設置するとサイトが見にくくなる」という声も少なからずあります。

たしかにそのとおりなのですが、パンくずには先に紹介した形以外のものもあります。
そのため、きちんとサイトにあったパンくずを設置すればそこまで大きなデメリットにはなりません。

※画像は価格コム モバイル版より

スマホでパンくずリストは不要?必要?

スマホサイトでのパンくずのメリット・デメリットについてお話ししましたが、結局のところ、今後スマホサイトにもパンくずは必要とする意見の方が多数派を占めています。

「今後」と書いたのには理由があります。
先にもお話しした通り、Googleは、2020年9月からMFIを導入し、スマホサイトの検索数をサイトのランキング評価の主軸とすることをすでに発表。
そのため、スマホサイトでのSEO対策も当然、今以上に必要になってきています。

ビジュアル的な問題があったとしても、検索上位に入っていくためにはできるだけの対策を講じる必要があります。
パンくずも例外ではなく、設置している方がUX観点、SEO観点から圧倒的有利です。

ただ、現在はスマホサイトにパンくずを設置していなくても運営・検索上位に食い込んでいるサイトもあります。
今後のためにHTMLやCSSで準備をしておく必要はありますが、今すぐ早急に必要というわけではありません。
時間をかけて準備しましょう。

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

パンくずの設置方法にはHTMLコード・CSSコードを使う方法と構造化マークアップで設置する方法の2種類があります。
スマホでの検索がサイトの順位の主軸となる前に、自分のサイトにあったパンくずを探しましょう。

HTML・CSSで設置する場合

もっとも一般的な作り方はHTMLコード・CSSコードを使用する方法です。
<ul>
 <li><a href="index.html">ホーム</a> > </li>
 <li><a href="https://kurokawaandco.jp/content">階層1</a> > </li>
 <li><a href="https://kurokawaandco.jp/content/seo">階層2</a> > </li>
 <li>スマホにパンくずリストは必要?不要?</li>
</ul>

<body>内に、上記のようにulリストでパンくずに入れたいページを挟み込んでいきます。
注意点として、終了タグの”</a>”とパンくずのための”>”とで記号が2つ続いているので注意してください。

構造化マークアップで設置する場合

構造化マークアップ、別名microdataで設定する方法もあります。
コード自体はHTMLより長くなってしまうデメリットがありますが、クローラーに階層構造を理解させるにはこちらの方が有利です。
以下のコードが例になります。
<body>
・・・
<ol class="breadcrumb">
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="index.html" itemprop="url"><span itemprop="title">ホーム</span></a>
 </li>
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="tent/index.html" itemprop="url"><span itemprop="title">階層1</span></a>
 </li>
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="tent/index.html" itemprop="url"><span itemprop="title">階層2</span></a>
 </li>
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <span itemprop="title">階層3</span>
 </li>
</ol>
・・・
</body>

スマホなら横スクロール型もあり

既存のサイトのレイアウトを気にするのであれば、横スクロール型のパンくずを設置するのも方法の1つです。
パソコンサイトではあまりメリットはありませんが、画面に触って操作するスマホとの相性は抜群です。
場所も取らず、コンパクトにパンくずがまとまるので有効な方法でしょう。

以下のコードはCSSの一例になります。
※出展サイト: https://littlethings.jp/blog/web/css-scroll-breadcrumbs
.breadcrumbs__wrapper {
width:100%;
height:40px;
background:#fafafa;
}
.breadcrumbs {
margin:auto;
max-width:1180px;
line-height:40px;
}
.breadcrumbs ul {
display:flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.breadcrumbs li {
padding-right:20px;
}
.breadcrumbs li:not(:last-child) {
position:relative;
padding-right:40px;
}
.breadcrumbs li:not(:last-child)::after {
content: ">";
display: block;
position: absolute;
width: 9px;
height: 15px;
top: 0px;
right: 15px;
}
@media screen and (max-width:768px) {
.breadcrumbs {
padding:0 20px;
}
.breadcrumbs ul {
display:block;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
overflow: auto;
white-space: nowrap;
}
.breadcrumbs li {
display:inline;
padding-right:20px;
flex: 0 0 40%;
}
}

パンくずリストを設置する際の注意点

パンくずを設置する際にはいくつかの疑問や注意点があります。
特にスマホの場合は、情報量の関係でパンくずが有効に機能するかどうかが変わってきます。
これから設置するという方はぜひ参考にしてみてください。

設置場所は上がオススメ

パンくずを設置する場所はどこがいいかという疑問がよく見られます。

これは結論からいえばサイトの上部です。
理由は簡単で、ユーザーは無意識であってもパンくずの設置場所は上で慣れているから。
ユーザービリティの向上にも繋がります。

パンくず設定は細分化する

細かく分けるとその分コードが長くなり、設定する側が大変なのですが、ユーザーとクローラーからするととてもありがたい設定になります。
できる限り細分化することでユーザーもクローラーも情報にたどり着くまでの労力が少なくて済むからです。
面倒くさがらずに設定してしまえば、あとは運用するだけなので難しくありません。

パンくずにもキーワードを

SEOの観点からいえば、パンくずにもキーワードを含ませるのは絶対条件です。
キーワードを入れるだけで、クローラーによる情報の取り出しが楽になるためです。
検索上位に入りたいのであれば必ず意識することをおすすめします。

今いるサイトはどうする?

誰しもが悩むのは「今いるサイトをパンくずに入れるのかどうか」ですが、これは必要ありません。
なぜなら今見ているから検索する必要がないからです。

ただし、すぐ上にある階層に関しては忘れずにパンくずに含めておきましょう。

まとめ

スマホが情報検索のためのメインツールとなった今、スマホサイトでのSEO対策、UX対策は必須と言っても過言ではありません。
Googleのサイト審査基準が変わったことを受けて、各検索エンジンもこれに追随するのは目に見えています。

もちろん必要以上にパンくずの設置を急ぐことはありませんが、今後、スマホサイトでのパンくずは、検索エンジンにとって重要な役割を果たすでしょう。
今後のためにも今あるスマホサイトにパンくずの設置を検討してみてはいかがでしょうか。

記事をシェアする
株式会社kurokawa&co.をフォローする
テジタルマーケティング/DXコンサルティング | K.K.kurokawa&co.