2020最新！パンくずリストまるわかり！schema.orgでの書き方

脇役の脇役と見せかけて、複数ページのWEBサイトにおいて欠かせない存在のパンくずリスト。
その役割はUI的にもSEO的にもとても重要です！

今回はこのパンくずリストを実際に実装するとなった時のデザイナーの為に、最新版のマークアップ方法をご紹介したいと思います。

パンくずリストとは

パンくずリストとは、今現在見ているページが、Webサイト内のどの位置にあるのかを視覚的に表現しているリストのことです。
今ご覧頂いているページにも、上部にパンくずリストが設置されています。

ページの最上部にリンク付きで表現されていることが多く、ユーザーはパンくずリストのリンクから上の階層に遡り、別のページを読むことができます。

設置するメリットは？

パンくずリストを設置するメリットは大きく3つあります。

1.ユーザーに親切

ユーザーはパンくずリストを見ることで、「今自分はどんなサイトの、どのカテゴリーの、何のページを見ているのか」が分かります。

ひとつ上の階層に登って別のページを読む時にはとても便利です。
リンク付きになっているため、気になる上位カテゴリーを選ぶことで必要なページにすぐたどり着くことができます。

2.Google検索でリッチリザルトになる

リッチリザルトとは、Googleの検索結果に「サイト名」「URL」「説明文」以外の情報が載っているものをさします。

以前は「リッチスニペット」とも呼ばれていました。こちらの方が馴染み深い方も多いかもしれませんね。

パンくずリストを正しくマークアップしておくと、Googleでの検索結果がこのような「リッチリザルト」になります。

パンくずリストのリッチリザルトが適用されていると、ページにアクセスする前のユーザーにも「このサイトの構造は、こんな風になっています」と伝えることができます。

ユーザーも直感的にどんなサイトかが分かるため、便利ですよね。

実はこのリッチリザルトは、パンくずリストだけでなく、いくつか種類があり、Googleで紹介されています。
Googleの求人検索機能による求人情報や、記事がカルーセルで表示されるよく見るカードタイプのものなども、リッチリザルトのひとつ。気になる方はぜひこちらもご覧ください。

検索ギャラリーを見る

リッチリザルトやリッチリザルトテストについては下記の記事でも解説しています。

3.SEO効果が見込める

パンくずリストの中にはSEO対策として有効なキーワードが盛り込めたり、クローラーが巡回しやすくなるなどのSEO効果が見込めます。
SEO対策に有効な「パンくずリスト」とはに詳しくまとめているので、そちらをご参照ください！

data-vocabulary.orgが検索結果のリッチリザルトの対象外に！

つまり正しくマークアップすればGoogleの検索結果にパンくずリストを表示できて、メリットたくさんな訳ですが、なんと！2020年1月、Googleより、data-vocabulary.orgによるマークアップがリッチリザルトの対象外になることが発表されました。

Webmaster Central Blog

2020年4月6日以降、data-vocabulary.org マークアップは Google のリッチリザルト機能に対して無効になります。2020年4月6日以降、リッチリザルトに対して有効にするには、data-vocabulary.org マークアップを schema.org マークアップに置き換えてください。
引用元:https://developers.google.com/search/docs/guides/intro-structured-data

data-vocabulary.org？schema.org？

そうなんです、実はパンくずリストをリッチリザルトさせるマークアップはdata-vocabulary.orgとschema.orgの2つの方法がありました。
そのうちの一つdata-vocabulary.orgを2020年4月6日以降サポートしなくなるとの事。せっかくパンくずリストをWEBサイトにつけても、リッチリザルトとして扱われず、検索結果にパンくずが表示されなくなってしまうのです。

ちなみに、data-vocabulary.orgが影響を及ぼすのは「リッチリザルト」だけであり、2020年4月6日以降にdata-vocabulary.orgを使っていても、検索順位が下がるなどのデメリットはありません。

しかし今後data-vocabulary.orgを使い続けるメリットも一切ありませんね。
既にschema.orgはGoogle公式ドキュメントで推奨されているマークアップ形式ですから、今現在変えてしまったところで何の問題もないのです。

これを機にdata-vocabulary.orgのマークアップを廃止し、schema.orgのマークアップに変更するのが良いでしょう！

schema.orgでのパンくずリストマークアップ方法

それではいざschema.orgでのパンくずリストマークアップ方法を見ていきましょう！

まず以下がdata-vocabulary.orgでマークアップしたパンくずリストの例です。

<ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://example.com/" itemprop="url">
            <span itemprop="name">本</span>
        </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://example.com/books/sciencefiction" itemprop="url">
            <span itemprop="name">SF小説</span>
        </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://example.com/books/sciencefiction/awardwinners" itemprop="url">
            <span itemprop="name">受賞者</span>
        </a>
    </li>
</ul>

これを構造化データ テストツールでテストしてみると…

data-vocabulary.org スキーマのサポートは終了しました。今後、Google がこのスキーマをサポートする予定はありません。schema.org タイプへの移行をお願いいたします。

エラーはありませんが、data-vocabulary.orgがサポートが終了するという警告が表示されました。

ではGoogle公式ドキュメントで紹介されている、schema.orgのマークアップ方法に変更してみましょう！

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/">
            <span itemprop="name">本</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction">
            <span itemprop="name">SF小説</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
            <span itemprop="name">受賞者</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

同様に、構造化データ テストツールでテストしてみます。

警告が消えました！
これで、schema.orgのマークアップ方法に変更することができました。

重要！各プロパティの説明

では次に、各プロパティが何を表しているのかを見ていきましょう。

aタグにitemprop=”item”

<a itemprop="item" href="ページのURL記述">

itemのあとのhrefで、パンくずが表すWebページのURLを指定します。

パンくずリストの最後のアイテムである場合、itemの指定は必須ではありません。

パンくずのタイトルを表すname

<span itemprop="name">タイトル名</span>

nameはパンくずのタイトルを表します。
パンくずで目に見える部分、すなわち「サイトタイトル」「アーカイブページ」「投稿名」と言ったタイトルにあたる箇所は全て
spanタグにitemprop=”name”をつけて記述します。

metaタグを入れてパンくずの位置を指定

<meta itemprop="position" content="1" />

meta itemprop=”position”でそのタイトルのパンくず内での位置を示します。
content=”1″ の場合、リスト内の最初のパンくずであるという事になります。

パンくずリストをschema.orgに対応させよう！

2020年4月6日以降、data-vocabulary.orgによるマークアップは、Googleのリッチリザルト機能に対して無効になります。
リッチリザルト機能を利用したい場合、schema.orgによるマークアップに変更していかなくてはなりません。

data-vocabulary.orgに対応しないことで検索順位が下がるペナルティはありませんが、リッチリザルト機能が無効になると視覚的にユーザーの気を引くのが難しくなり、結果的にユーザー獲得ができなくなる可能性は十分考えられます。

パンくずリストは、多くのサイトでコンポーネント化されている部分ですから、マークアップ方式を定義している元データを1箇所修正するだけで簡単にschema.orgに対応させることができるかと思います。

data-vocabulary.orgが無効化される前に、schema.orgに乗り換えましょう。