【Schema.org・microdata】検索結果にパンくずリストを表示させる方法|Google・Yahooなど

今回はGoogleやYahooなどの検索結果に、サイト内のパンくずリストを表示させる方法となります。

GoogleやYahooなどの検索結果にパンくずリストを表示させる方法

GoogleやYahooなどの検索結果にパンくずリストを表示させるには、サイト内のパンくずリストを検索エンジンに認識させるために、パンくずリストを構造化データで定義する必要があります。

構造化データを利用する方法はいくつかありますが、今回の例ではSchema.orgとmicrodataを利用して構造化データを定義します。

また、構造化データのマークアップ後、検索結果にパンくずリストが表示されるタイミングは、検索エンジンがサイトをクロールするタイミングによって異なります。

Schema.orgとmicrodataを利用した例

例えば、次のようなパンくずリストをマークアップするとします。

書籍>Web制作>WordPress

その場合、Schema.orgとmicrodataを利用して構造化データを定義するには、以下のような例となります。

<ul itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
      <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/web">
      <span itemprop="name">Web制作</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">WordPress</span>
    <meta itemprop="position" content="3" />
  </li>
</ul>

パンくずリストを定義するSchema.orgについて

Schema.orgなどの構造化データでは、データに意味を付加するため「ボキャブラリー(語彙)」を利用します。

そのボキャブラリー(語彙)では、扱うデータによって異なる「タイプ」「プロパティ」を利用して構造化データを定義します。また、利用できるプロパティはタイプによって異なります。

パンくずリストの場合には上記例のように、2つ以上の ListItemsタイプ を含む BreadcrumbListタイプ を使い構造化データを定義する必要があります。

BreadcrumbListタイプとプロパティ

BreadcrumbList タイプは、パンくずリスト内のすべての項目を含む、パンくずリスト全体を定義します。

また、次の必須プロパティを指定する必要があります。

itemListElementプロパティ

itemListElementプロパティは、パンくずリストの項目を定義します。

ListItemタイプとプロパティ

ListItem タイプは、パンくずの項目を定義します。また、次の必須プロパティを指定する必要があります。

itemプロパティ

itemプロパティは、パンくずリストの項目の URLを定義します。

また、パンくずリストの最後の項目では、itemプロパティは必須ではありません。

nameプロパティ

nameプロパティは、パンくずリストの項目のページ名を定義します。

positionプロパティ

positionプロパティは、パンくずリストの項目の階層を定義します。

その他のプロパティ

パンくずリストで利用できるその他のプロパティについては、以下のリンク先を参考にしてみてください。

breadcrumb - schema.org Property

microdataについて

Webページのコンテンツに対して、Schema.orgを利用する方法は、いくつかありますが、今回の例では、HTMLタグの属性値として扱うmicrodata(マイクロデータ)を利用しています。

microdataでは、指定した要素内をアイテムとして定義し、そのアイテムに対してSchema.orgのタイプ・プロパティを指定します。

以下、今回の例で利用したmicrodataの属性となります。

itemscope属性

itemscope属性は、指定した要素内をアイテムとして定義します。

また、itemscope属性を指定した場合、itemtype属性も同じ要素に指定します。それにより、そのitemtype属性で指定したタイプの有効な範囲がアイテム内となります。

itemtype属性

itemtyp属性の値には、ボキャブラリー(語彙)のタイプのURLを指定します。

例えば、Schema.orgのBreadcrumbListタイプを指定する場合には、次のURLを指定します。

https://schema.org/BreadcrumbList

itemprop属性

itemprop属性の値には、アイテム内で有効なタイプのプロパティを指定します。

その他の属性

microdataのその他の属性については、以下のリンク先を参考にしてみてください。

マイクロデータ - HTML: HyperText Markup Language | MDN

定義した構造化データが正しいかをテスト

定義した構造化データが正しいかどうかは、以下のGoogleのサイトから確認できます。

構造化データ テストツール

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。