パンくずって何?

パンくず、ついてますか?忘れてませんか?

パンくずとは、サイトに付いている以下の様なナビゲーションです。

ホーム > 親カテゴリ > 子コンテンツ > コンテンツ詳細

現在のコンテンツがサイト全体からみて、どこに位置するコンテンツかを表し、かつ親コンテンツへの導線を提供します。
インタラクティブコンテンツがメインのサイトにはついてないこともありますが、WCAG2でもパンくずは付けるようにと推奨されています。
アクセシビリティが重要なWebサイトでは必須ですよね。

実は、このパンくずを検索エンジン側は検索結果に出していきたいと考えています。
ユーザーが検索した時にパンくずの内容が表示されていると、そのページがどのようなページなのか判断する材料の1つになるので、とても有効ですよね。
早速、みんなが幸せになるパンくずの書き方について確認していきましょう。

そもそも、検索結果にパンくずを表示できることをご存知でしょうか?
Googleの検索でも、Yahooの検索でも表示が少し違いますが表示されるようになります。
(同じ検索エンジンがベースなので当たり前ですが)
分かりやすい文言を設定することも重要ですが、分かりやすい文章だけでは検索エンジン側は認識しません。
検索エンジン側が認識するには、パンくず部分のデータを「構造化」することが重要です。

実際に検索結果に表示された場合は、表示は下記のようになります。

Googleでパンくずが表示された時のイメージ

Google Developersを確認すると、マークアップで対応する方法と、Microdataを使って対応する方法、JSON+LDを使う方法、RDFAを使う方法の4種類があることがわかります。
難易度としてはマークアップが一番容易ですが、この方法では構造が明確に表現できません。
他のMicrodata、JSON+LD、RDFaについては、どれも独自の記述が必要となるため、同じ程度の難易度だと考えてよいでしょう。

今回は、Googleが推奨しているMicrodataを使った対応と、対応が簡単なマークアップでの対応を紹介します。

Microdataを使った対応

Microdataとは、HTML5のセマンティック・ウェブとして策定された仕様の1つです。
他にも人物の紹介の定義から企業情報、レビュー、ニュースやイベント情報など様々な指定が存在しています。
全てを適応することは大変な作業になるので現実的ではありません。
ですが、パンくずだけに適応するという話であれば、グッと現実的になります。

タグに属性を追加するだけなので、実装方法は簡単です。
構造データとしてmetaタグが必要な点が弱点でしょうか。

Microdataでは、語彙が定義されているschema.orgとタグの関連付けを行っています。

正しく指定出来ているかは、Googleが提供しているテストツールで確認できます。

schema.org・・・Google、Microsoft、Yahoo!が構造化データのマークアップ標準化を目指して発足した組織。現在では、ロシア最大の検索エンジンYandexも加わっている。

実際のコード

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts">
        <span itemprop="name">Arts</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts/books">
      <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/arts/books/poetry">
      <span itemprop="name">Poetry</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

6月12日以前までは「shema.org」ではなく、「data-vocabulary.org」を利用した指定が推奨されていました。
記述が異なるため、今後どのように扱われるかは検索エンジン次第になりそうです。
もしこの指定で実装されている場合は、新しい指定に変更することを検討していく必要があるでしょう。

古くなった記述

<ol>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/" itemprop="url">
      <span itemprop="title">TOP</span>
    </a>&gt;
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/corporate/" itemprop="url">
      <span itemprop="title">企業情報</span>
    </a>&gt;
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/corporate/group.html" itemprop="url">
      <span itemprop="title">グループ会社一覧</span>
    </a>
  </li>
</ol>

このタイプで対応しているサイトでは下記のようなサイトがありました。(古い指定を含む。執筆中現在)

マークアップで対応

簡単にできるマークアップでの対応ですが、現在の検索エンジンが勝手に解釈してくれている状態です。
「構造化」とはいえないため、新規で制作する際は、この方法はおすすめは出来ません。

ただし、実装のコストパフォーマンスを考えた上で実装するということであれば、十分に選択肢にはいるでしょう。
現行サイトに例に似たマークアップがある場合や、すこし修正すればできそう、などさまざまな場面があると思いますので、意向を汲んで判断する必要があるでしょう。

なお、このマークアップであれば、Bingでも解釈されるようです。

<a href="http://www.example.com/dresses">Dresses</a> ›
<a href="http://www.example.com/dresses/real">Real Dresses</a> ›
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>

このタイプで対応しているサイトでは下記のようなサイトがありました。(古い指定を含む。執筆中現在)

この記事では紹介しませんでしたが、システム化されたサイトを実装する場合は、JSON+LDという方法も検討してもよいでしょう。
非常にシンプルな実装になっています。

どの対応も1ページ1ページ変更が必要です。
こればかりはやるしかありません。

ただ、Grunt/Gulpなどを使った自動化が進んだ今なら、この手の対応も小さな労力で可能な場合だってあります。
特にCMSやシステムでパンくずを表示しているサイトは意外と簡単にできるはず。チャレンジしてみる価値はありますね。

え?CMSだけどそんなことできないって?そんなCMS捨ててしまえ!

さて、パンくずの実装について今回は紹介しましたがいかがでしたか?
私がリニューアル時に対応した時は、大体公開から2週間後ぐらいから徐々に検索結果に反映されました。
小さな話ですが、今後の施策の1つとして頭の片隅に入れば嬉しいです。

分かりやすい文言を使い、だれでも情報を取得できるWebサイトを実現していきたいですね。
やるならデータ構造化の対策とアクセシビリティ対策です。

それでは、またの機会に。