カルーセル

構造化データを使用すると、リッチリザルト(旧称: リッチカード)をリストのように表示できます。これはカルーセルと呼ばれています。カルーセルは通常、モバイル端末でのみ表示されます。また、以下で説明するように、特定のコンテンツ タイプでのみ表示されます。カルーセル形式が現在サポートされていないコンテンツ タイプに対してカルーセルのマークアップを使用してもエラーにはならず、引き続き情報を表示できますが、カルーセル形式では表示されません。

ページにリストの構造化データが含まれていない場合でも、Google 検索ではリッチリザルトがカルーセル内に表示されることがあります。たとえば、さまざまなウェブサイトからの検索結果で構成されたレシピのカルーセル内にレシピが表示されることがあります。

以下は、カルーセル形式で表示された、1 つのウェブサイトに掲載されている鶏肉レシピのリストです。

レシピのリッチリザルトのカルーセル

ガイドライン

構造化データに関する標準ガイドラインに加え、以下のガイドラインがすべてのリスト マークアップに適用されます。

  • リスト内のアイテムはすべて、同じタイプ(Article、Recipe など)である必要があります。
  • ユーザーに表示されるテキストは、ページの構造化データに含まれている情報とほぼ同じである必要があります。
  • リスト形式で表示されるアイテムは、position プロパティで指定された順序で表示されます。
  • リスト形式は現在、RecipeFilmCourseArticle の各コンテンツ タイプでサポートされています。サポート対象のコンテンツ タイプは増え続けており、他のタイプがサポートされるようになり次第、そのタイプのリストも自由に作成できるようになります。

構造化データのリスト形式を実装する方法には次の 2 種類があります。

  • 概要ページ + 複数の詳細ページ
  • 単一のオールインワン ページのリスト

概要ページ + 複数の詳細ページ

概要ページにはリスト内の各アイテムに関する簡単な説明を記載します。それぞれの説明には 1 つのアイテムに焦点を当てた別の詳細ページへの参照を含めます。

概要ページ 詳細ページ
ItemList を定義します。各 ListItem は、@type(「ListItem」に設定)、position(リスト内の位置)、url(アイテムの詳細が掲載されているページの URL)という 3 つのプロパティのみで構成されます。 リストのタイプに適した構造化データの要素を定義します。
best_pie_recipes.html の疑似コード:
ItemList
  itemListElement: [
    {
      @type: ListItem
      position: 1
      url: http://example.com/cherry_pie_recipe.html
    },
    {
      @type: ListItem
      position:2
      url: http://example.com/appple_pie_recipe.html,
    },
    ... more recipes ...
  ]
cherry_pie_recipe.html の疑似コード:
@type: Recipe
name: George's Cherry Pie
author: George Smith
.... more properties ...

サンプル コード:

サンプル コード:

単一のオールインワン ページのリスト

単一のオールインワン ページのリストでは、各アイテムの詳細な説明を含むすべてのリスト情報をホストします(例: 1 ページにすべての情報が記載されている、さまざまな種類のマフィンのレシピ ギャラリー)。

単一ページ
ItemList を定義します。各要素は、schema.org の要素タイプ(MovieCourse など)の構造化データを使用して設定された item プロパティを含む ListItem です。ページには、ユーザーに表示されるテキストと、各 ListItem 要素に対応するアンカーを含める必要があります。

best_pie_recipes.html の疑似コード:

ItemList
  itemListElement: [
    {
      @type: ListItem
      position: 1
      item: {
        @type: Recipe
        url: http://example.com/big_list_of_recipes#recipe_1
        name: George's Cherry Pie
        author: George Smith
        ... all other required Recipe type properties ...}
    },
    {
      @type: ListItem
      position: 2
      item: {
        @type: Recipe
        url: http://example.com/big_list_of_recipes#recipe_2
        name: Martha's Apple Pie
        author: Martha Smith
        ... all other required Recipe type properties ...}
    },
    ... more recipes ...
  ]

 

サンプル コード:

構造化データタイプの定義

リストを指定するには、少なくとも 2 つの ListItems を含む ItemList を定義する必要があります。

ItemList

ItemList は、リスト内のすべての要素を保持するコンテナ アイテムです。概要ページで使用する場合は、リスト内のすべての URL が同じドメイン内の異なるページを指している必要があります。オールインワン ページのリストで使用する場合は、すべての URL がリストの構造化データをホストしているページを指している必要があります。

ItemList の完全な定義は schema.org でご確認いただけます。

プロパティ
@type

必須

「ItemList」を指定する必要があります。

itemListElement

ListItem必須

アイテムのリスト。すべてのアイテムが同じタイプである必要があります。詳しくは、以下の ListItem をご覧ください。

ListItem

ListItem には、リスト内の個々のアイテムに関する詳細情報を含めます。

  • 概要ページの場合、ListItem には、typepositionurl プロパティのみを含める必要があります。
  • オールインワン ページのリストの場合、ListItem には、記述するデータタイプ(RecipeCourse オブジェクトなど)の schema.org のプロパティをすべて含める必要があります。

ListItem の完全な定義は schema.org でご確認いただけます。

単純な概要リストのアイテムの例(JSON-LD):

{
  "@type":"ListItem",
  "position":1,
  "url":"http://example.com/desserts/apple-pie"
}

オールインワン リストのアイテムの例(JSON-LD):

{
  "@type": "ListItem",
  "position": 1,
  "item": {
    "@type": "Recipe",
    "url": "http://example.com/desserts/pies/#apple-pie",
    "name": "Apple Pie",
    "image": "https://example.com/300px-Apple_pie.jpg",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "6",
      "reviewCount": "32"
    },
    "recipeYield": "8 servings",
    "recipeIngredient": [
      "Pastry crust for bottom and top",
      "1/2 cup unsalted butter",
      "3 tablespoons all-purpose flour",
      "1/4 cup water",
      "1/4 cup white sugar",
      "1/2 cup brown sugar",
      "10 cups peeled, chopped green apples"
    ],
  }
}
プロパティ
@type

必須

「ListItem」を指定する必要があります。

position

Integer必須

カルーセル内のアイテムの位置。1 以上の整数を指定します。

url

URL、概要ページでは必須。オールインワン ページのリストの場合は指定しないでください

概要ページのリストでのみ使用します。アイテムの詳細ページの正規 URL です。リスト内の URL はすべて一意で、同じドメイン(現在のページと同じドメインまたはサブ / スーパー ドメイン)内に存在する必要があります。

item

Thing、オールインワン ページのリストでは必須。概要ページの場合は指定しないでください

オールインワン ページのリストでのみ使用します。このオブジェクトには以下の値を設定します。また、特定の構造化データタイプのすべてのメンバーを記述します。

  • @type - 記述するオブジェクトの schema.org のタイプ名。: "Recipe"
  • url - 完全修飾 URL と、ページ上のこのアイテムに対するページアンカー。URL には現在のページを指定する必要があります。また、ユーザーに表示されるテキストの近くに、ページの HTML アンカー(<a> タグか、name または id の値)を含める必要があります。: "https://example.org/recipes/pies#apple_pie"
  • name - レンダリングされたギャラリーに表示されるアイテム名の文字列。HTML 形式は無視されます。
  • 対象のデータタイプに必須のその他すべてのプロパティ(schema.org を参照)と、コンテンツ タイプ(ArticleBook など)に関するルール(各コンテンツ タイプのドキュメントを参照)。たとえば、書籍の場合は bookFormat プロパティと isbn プロパティを指定し、レシピの場合は prepTime プロパティと image プロパティを指定します。

フィードバックを送信...