2019/11/12

パンくずリストで順位改善?SEOに適したリンク構造を構築しよう!

パンくずリスト×SEO

解説猫(仮)
解説猫(仮)SEO解説担当の猫さんです
元SEOディレクターで、現在は自社マーケティングやってるみたいです
・趣味:昼寝
・どんな人でもわかる優しい説明をこころがけているが、そんなにうまくはない
・冷静な判断で仲間からの信頼も厚い(自称)
竹内
竹内現役SEOディレクターのおじさんです
顔は怖いけど美しく清らかな心の持ち主です
・顔は怖いが、丁寧な対応でクライアントからの信頼も厚い
・顔は怖いが、空気を読むスキルが高く冗談も通じる
・顔は怖いが、笑顔も結構怖い

皆さんは「パンくずリスト」をご存じですか?
知ってる方も知らない方も、パンくずの「最適解」は意識しないんじゃないでしょうか。
今回は「パンくずリスト」の基本と、SEOでの上手な活用方法を解説します!

解説猫(仮)
こんにちは、こんばんは、解説の猫(仮)と申します。
この記事では、パンくずリストについて解説します。
よろしくお願いしますね。
竹内
こんにちは!竹内と申します。
パンくずはSEOでは常識かもしれませんが、結構重要なんですよね。
微力ながら、僕も一緒に解説します!

パンくずリストとは?

パンくずリストは、下記を表したリンクの行です。

ユーザーの「現在地」
ユーザーの「経路」(TOPページからの道筋)

一般的には、ページの上部に表示されていることが多いですが、デザイン次第では下部に表示されていることもあります。

※SEM JOURNALにも、もちろんあります!
パンくずリストイメージ

「パンくずリスト」という名称は名作童話「ヘンゼルとグレーテル」が由来となっています。

物語の中でヘンゼルとグレーテルは、森で迷子にならないよう、自分たちが通った場所の目印としてパンくずを落としたというエピソードがあります。

これに因んで、ユーザー経路を表すリンクのリストにつけられた名称が「パンくずリスト」です。

竹内
パン、鳥に食われてませんでしたっけ?
解説猫(仮)
うわ…
竹内
ごめんなさい!失礼しました!ひかないで!w
パンくずリストが何のことか、認識してもらえたと思います。
では、どんな役割があるか解説しましょう!

パンくずリストの役割

「パンくずリスト」の役割は大きく分けて3つです。

ユーザーが使いやすくなる(ユーザビリティ)
クローラーがサイトを巡回しやすくなる(クローラビリティ)
サイト評価/検索順位にプラスを期待できる(SEO)

どのような影響を期待できるのか、それぞれ見てみましょう。

ユーザーが使いやすくなる(ユーザビリティ)

サイトを訪れるユーザーは、必ずしもトップページから訪問するとは限りません。
下層ページからの流入の方が多いケースも見受けられます。

サイトによっては、ユーザーがなかなか目的のコンテンツに辿り着けないこともあります。
パンくずリストがあれば、ユーザーは現在地や上の階層のページを確認することができます。
目的のページを探す一つの指標として、便利ですね。

なお、ユーザビリティはSEOにおいても重要な要素です。
使いやすく、人気のサイトはWeb上での評判がよくなり、リンクや口コミといった形で現れます。
それは、検索順位にプラスに働きます。

SEO施策を実施する際も、常にユーザーのことを考えられると良いですね。

クローラーがサイトを巡回しやすくなる(クローラビリティ)

パンくずリストによるサイト理解

Googleに評価してもらうためには、サイトを巡回して、理解してもらう必要があります。
パンくずリストはそういった、「サイト理解」を助けます。

どのページが、どのカテゴリーに属していて、どの階層にあるのか。
そういったことをパンくずリストを通して認識してもらえる
わけです。

結果、Googleのクローラーがサイトを巡回し、構造を把握するのを助けることになります。

サイト評価にプラスを期待できる(SEO)

Googleの評価指標の一つに「リンク」があります。
パンくずリストによる内部リンクで、「上の階層に評価を集める」構造を作れます

※下の図のようなイメージです

パンくずによるリンク構造

上の階層にリンクが集まっていますね。
また、カテゴリーにぶら下がる下層のページが多いほど、多くのリンクが集まることがわかると思います。

サイト内で注力しているカテゴリーはページ数が多くなり、自然とリンク数も多くなります。
内部リンクも集まり、重要なページとして評価につながります。

注意が必要なパンくずリストの設定

パンくずリストの複数設置について

結論から言いますと、パンくずリストは複数設置しても問題ありません。
ユーザーにとって便利なら、設置することをオススメします。

Google Developersで複数パンくずの事例が公開されています。

複数ぱんくずリスト事例

今見ているページが何のカテゴリに属していて、どんな経路があるのか…
全て把握出来れば、探しているコンテンツをより見つけやすくなりますね。

ただし、複数のパンくずリストがある場合、Googleは一つ目のみを採用すると言われています。
主要な経路が一番上になるよう、注意してください。

例えば、後述の「構造化データ」を設定すると、パンくずリストが検索結果に表示される可能性があります。
その際、一番上のパンくずリストが採用されるようです。
複数のパンくずリストを設置する場合は、順番も意識するようにしましょう。

「ディレクトリ構造」ではなく「リンク構造」

パンくずリストは「リンク構造」で作成してください
よくある間違いは「ディレクトリ構造」にしてしまうことです。

●リンク構造
実際にリンクを辿って経由できる、ユーザー経路のことです。

●ディレクトリ構造
URLの階層構造を指します。

分かりにくいと思いますので、例を使って説明します。
以下は賃貸物件を探すサイトのURLの例です。

  1. https://www.〇〇.jp/area/tokyo/shinjuku/
  2. https://www.〇〇.jp/station/tokyo/shinjuku/
  3. https://www.〇〇.jp/bukken001.html

それぞれ、ページの内容は下記になります。
一番上:「エリアから検索した新宿の物件一覧」
二番目:「最寄り駅から検索した新宿の物件一覧」
三番目:「物件詳細」(新宿の物件の一つ)

「ディレクトリ構造」を重視するならパンくずリストは以下のようになります。

  1. HOME > エリアから物件を探す > 東京都 > 新宿区の物件一覧
  2. HOME > 最寄り駅から物件を探す > 東京都 > 新宿区の物件一覧
  3. HOME > 物件No001.〇〇

これでは物件詳細ページの経路がわからず、不便ですよね?
パンクズリストにはユーザー経路である「リンク構造」を採用するようにしましょう。

例えばファッション通販「ZOZOTOWN」では、以下のようなパンくずリストを確認できます。

URLの階層(ディレクトリ構造)ではなく、ユーザーが辿る経路が採用されていますね。
商品詳細に辿り着いたユーザーは、一つ上の「ジャケット/アウター」に戻ることが可能です。
色んな商品を見て買い物を楽しむ、そういった行動を便利にしてくれそうです。

解説猫(仮)
●ディレクトリではなくリンク構造(ユーザー経路)
●複数置いても大丈夫
●Googleが採用するのは1個目のパンくず(メイン経路を最初に)
竹内
1個目のやつ、重要ですよね。
僕もわからなくなったことあります。
URLの階層に合わせるのか、ユーザー経路にあわせるのか。
解説猫(仮)
サイトは「ユーザーが見るもの」です。
確かに検索エンジンもクロールしますが、本質を忘れてはいけません。
因みにユーザーの導線設計をしっかりしないと、パンくずリストも汚く、使いにくくなります、注意しましょう。
竹内
パンくずリストも目に見えるUIの一つですからね…
優れた導線設計とセットで改善できたら、とても良いですね!
ユーザーにとって優れたUIを、Googleは高く評価したいはずです。
解説猫(仮)
とはいえ、検索エンジンを蔑ろにはできないのです。
次のセクションでは「構造化データ」について説明します。

構造化データを適用しよう

構造化データの基礎知識はこちらの記事でまとめています。
よろしければ参考にしてください。

初心者向け解説!構造化データの仕組みと書き方を理解しよう

では、簡単な説明と具体的にどうすれば実装できるのか解説します。

構造化とは(パンくずリストを構造化する意味)

簡単に言えば、設定すると「これはパンくずリストですよ!」と検索エンジンに伝えられます。
伝わると、検索結果にパンくずリストが表示される可能性があります。

※下記画像のような感じです。
パンクズリストの参考画像

上記のように、記述したコンテンツに意味付けを行うのが構造化データです。
この記事では深堀しませんが、Googleがサポートしている構造化データは多数あります。

パンくずリストの構造化データを記述する方法

構造化データには3つの記述方法があります。

microdata
JSON-LD
RDFa(RDFa Lite)

それぞれ記述を紹介します。
赤字箇所が各サイトで変更が必要な箇所になります。
※上記カルボナーラのパンくずリストを例にコードを書いています。

「microdata」の記述

<ul itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://●●.jp/▲▲“>
<span itemprop=”name”>お肉のおかず</span></a>
<meta itemprop=”position” content=”1″ />
</li>

>

<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://●●.jp/▲▲/■■“>
<span itemprop=”name”>加工肉</span></a>
<meta itemprop=”position” content=”2″>
</li>

>

<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://●●.jp/▲▲/■■/✕✕“>
<span itemprop=”name”>ベーコン</span></a>
<meta itemprop=”position” content=”3″>
</li>

>

<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<span itemprop=”name”>カルボナーラの作り方</span>
<meta itemprop=”position” content=”4″>
</li>
</ul>

JSON-LD

<script type=’application/ld+json’>
{
 ”@context”:”https:\/\/schema.org”,
 ”@type”:”BreadcrumbList”,
 ”itemListElement”:
 [
  {
   ”@type”:”ListItem”,
   ”position”:1,
   ”item”:
   {
    ”@id”:”https://●●.jp/▲▲“,
    ”name”:”お肉のおかず
   }
  },


  {
   ”@type”:”ListItem”,
   ”position”:2,
   ”item”:
   {
    ”@id”:”https://●●.jp/▲▲/■■“,
    ”name”:”加工肉
   }
  },


  {
   ”@type”:”ListItem”,
   ”position”:3,
   ”item”:
   {
    ”@id”:”https://●●.jp/▲▲/■■/✕✕“,
    ”name”:”ベーコン
   }
  },


  {
   ”@type”:”ListItem”,
   ”position”:4,
   ”item”:
   {
    ”@id”:”https://●●.jp/▲▲/■■/✕✕/◆◆“,
    ”name”:”カルボナーラの作り方
   }
  }
 ]
}
</script>

RDFa(RDFa Lite)

<ul vocab=”http://schema.org/” typeof=”BreadcrumbList”>

<li property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage” href=”https://●●.jp/▲▲“>
<span property=”name”>お肉のおかず</span></a>
<meta property=”position” content=”1″></li>

>

<li property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage” href=”https://●●.jp/▲▲/■■“>
<span property=”name”>加工肉</span></a>
<meta property=”position” content=”2″></li>

>

<li property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage” href=”https://●●.jp/▲▲/■■/✕✕“>
<span property=”name”>ベーコン</span></a>
<meta property=”position” content=”3″></li>

>

<li property=”itemListElement” typeof=”ListItem”>
<span property=”name”>カルボナーラの作り方</span>
<meta property=”position” content=”4″></li>
</ul>

なお、「microdata」と「RDFa Lite」は記述する構造化データに、専用のタグを追加します。
「JSON-LD」は記述場所は、ソースコードのどこでも問題ありません。

解説猫(仮)
お気づきかもしれませんが、パンくずリストは「ページのカテゴライズ」と密接な関係にあります。
竹内
ページノカテゴライズ??
解説猫(仮)
例えば家具の通販サイトで、「ソファ」って「1人掛け」みたいに人数で区分したり、「レザーソファ」みたいに素材で区分したりしますね?
竹内
はい、します。
解説猫(仮)
この時「検索ボリュームが少ないワード」でカテゴライズすると、損するかもしれません。
竹内
!!??
解説猫(仮)
カテゴリ設定は、そのままパンくずのアンカーテキストになります。
ニーズあるワードでカテゴリ設定しておけば、そのワードをアンカーテキストにした内部リンクが増える訳です。
竹内
な、なるほど…
それに多くのユーザーが探すであろうワードでカテゴライズしておけば、商品探しもしやすいですよね!
解説猫(仮)
リンクによるSEOへの影響とユーザーにとっての利便性、両方にプラスを期待できます。
ユーザー視点というSEOの基本(の一つ)は、ここでも生きる訳ですね

まとめ

パンくずリストはユーザーに役立ち、SEO観点からも効果を期待できるリンクです。
設置していない方は、是非設置してみましょう。
技術担当がいる方は、構造化データも実装してみてくださいね!

この記事を読んだ方が、「ユーザー目線のパンくずリスト」を設定できるようになってくれたとしたら、嬉しい限りです。

ユーザーニーズを考えたカテゴライズと、便利なリンク構造(ユーザー経路)。
セットでサイトを改善できたら、凄く良いですね!

まずは無料調査・お見積もり