パンくずリストの大切さ

パンくずリストって知っていますか？
このパンくずリストっていう名前を聞いてピンとこない人も、実際のものを見てもらうとわかると思います。

ページの上部、もしくは下部に表示される、今どのページにいるかがわかるように表現されたものですね。

まだまだパンくずリストを設置しているページとそうでないページがあると思いますが、パンくずリストがあると現在のページの全体から見た位置付けがよくわかることや、上位階層に簡単にクリックで戻れる。
このように、UI上非常に大切な役割を持つものです。
例えばこのトヨタのパンくずリスト、

このSafety Senceのページは車種ごとに用意されているのですが、パンくずリストを見ればどの車種に対するSafety Senceかがわかりますよね。
特にこういったページ数の多いものに関しては、バンくずリストが地図の役割をしていて非常に大事だということがわかりますね。

パンくずリストっていう名前を聞いてもこの役割との結びつきがピンとこないと思います。
これがなぜパンくずリストと呼ばれるかというと、グリム童話の「ヘンゼルとグレーテル」が元になっている。
お話の中で、道に迷わないようにパンくずを通った道に落としていたっていうのが名前の由来だそう。
なんとなくこういう名前の付け方って海外の人が発想ですよね。

このパンくずリスト、先ほども書いたようにUI上非常に大切です。
ちなみにUIというのはユーザーインターフェースの略で、簡単に言うとページの使いやすさとでも解釈すればいいと思います。
ホームページに限らず、「このスマホはユーザーインターフェースがいいね！」といえば、「使いやすいね」って感じです。

パンくずリストの役割とともに大事なのはGoogle検索上でのパンくずリストの表示です。
UI上大事ですよって言っても「そうですか」という感じですが、SEO上大事ですよっていうと「まじっすか！」という反応をしてくださいます。笑
SEO上のパンくずリストの重要性ですが、このようにパンくずリストGoogleの検索時に表示させることができます。

検索時にこのように表示されると、わかりやすく目立つのでクリック率が上がりそうですよね。
ちなにに、検索画面でレビューが出ていますが、これも今回紹介するパンくずリストと同じように意図的に表示させることができます。
それはまたいつか機会があれば書きます。

パンくずリストの書き方

では、どのようにしてこのようにパンくずリストを検索結果で表示させるか。
パンくずリストは先ほど見たようにこんな感じのものですよね。

ホームページ上ではこのような感じでパンくずを表示させましょう。
Googleでの例では、以下のようにパンくずリストは<ol>や<ul>を使うことを推奨されているのでそのようにします。
Googleでのパンくずリストの例

<ol>
  <li>
    <a href="http://www.example.com/books">Books</a>
  </li>
  <li>
    <a href="http://www.example.com/sciencefiction">Science Fiction</a>
  </li>
  <li>
    <a href="http://www.example.com/books/sciencefiction/awardwinners">Award Winners</a>
  </li>
<ol>

HTMLは難しくないと思います。
実際、見栄えの部分はここではあまり関係ないので割愛しますね。
スタイルシートで好きなようにデザインしてください。

人間に対してはこのように<ol>や<ul>でタグを書いて、CSSでデザインすればよいです。
では、Google検索に対してもそのパンくずの構造を伝えるようにしましょう。
構造化タグというのですが、一定のルールに従ってパンくずリストを定義することにより、それを読み込んで検索結果で利用してもらえるのです。

Google検索上でパンくずリストを表示させる方法

Googleに対してはschema.orgというもので定義された方法でパンくずリストの構成をGoogleに伝えましょう。
Google検索、つまりコンピュータに対してはルール化された書き方で伝える必要があるので、その書き方の決まりがschema.orgだと思ってください。
詳しくはいずれ書ければと思っています。
まずは、このブログの中でこうやって名前に触れていく程度でオッケーです。

パンくずリストの構成をGoogleに伝える方法は２つあります。
JSON-LDという方式とmicrodataの方式があります。
最近はGoogleはJSON-LDを推奨しているようなので、そちらを紹介しますね。

ここではとりあえず使えればいいと思っているので、細かい書き方の説明は省きます。
簡単です、Googleの例をそのまま持ってきましたので、ページのHTMLの好きなところに以下をコピペして使ってください。
以下に解説を載せているので、必要な内容に書き換えて使いましょう。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>

ここからは解説。
はじめの2行

  "@context": "https://schema.org",
  "@type": "BreadcrumbList",

はパンくずリストを定義するための定型文です。
そのまま使いましょう。

次に、その下を簡略化すると、

  "itemListElement": [{
    ■ ここに第１階層の情報を書く
  },{
    ■ ここに第２階層の情報を書く
  },{
    ■ ここに第３階層の情報を書く
  },{
    ■ ここに第４階層の情報を書く
  }]

このような構造になっていますね。
それぞれの階層ごとの情報は、例えば

    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"

となっています。
それぞれの項目について説明すると、

@type： “ListItem”とそのまま記載
position：階層の位置。上から1, 2, 3, 4 というように
name: ページ名。つまり表示する文字列
item：ページのURL

どうですか、一つ一つは難しくないでしょ。

公式の情報はこちらのGoogleのヘルプから確認してください
パンくずリスト | 検索 | Google Developers

すべてのページにパンくずリストをつけるって結構めんどくさいと思いますが、SEO上も非常に大切だと思えばパンくずリストを設置する意味も感じられると思います。
今回紹介した構造化データによるGoogle上でのリッチスニペットの表示は今回のパンくずリストだけにかかわらず、他にもいろいろな用途で使用できます。
schema.orgとGoogleからのアナウンスをフォローしておけばいろいろと知っておくことができると思います。
このブログでも、今後機会があれば一つ一つ紹介していきたいと思います。

ついに桜が咲いてきました、関西では平日に満開を迎えるんじゃないかなぁという感じ。
あまり気温は上がらないので、週末までいい感じで満開でいてほしいなあと思っています。

枝垂桜は少し早咲きで、京都もきれいですよ。