カルーセル（ItemList）の構造化データ

カルーセルは、モバイル デバイスでスワイプ表示できるリスト形式のリッチリザルトです。同一のサイトから複数のカードを表示します（ホスト カルーセルとも呼ばれます）。サイトのホスト カルーセルのリッチリザルトを表示できるようにするには、以下のいずれかのサポート対象コンテンツ タイプと組み合わせて、ItemList 構造化データを追加します。

次の図は、ItemList マークアップをサポート対象コンテンツ タイプと組み合わせて追加した場合に、カルーセルが Google 検索でどのように表示されるかを示したものです。

Google 検索でコースのホスト カルーセルがどのように表示されるかを示すイラスト。同じウェブサイトの 3 つの異なるコースがカルーセル形式で表示され、ユーザーは特定のコースを探索して選択できるようになっています Google 検索で映画のホスト カルーセルがどのように表示されるかを示すイラスト。同じウェブサイトの 3 つの異なる映画がカルーセル形式で表示され、ユーザーは特定の映画を探索して選択できるようになっています

構造化データを追加する

構造化データは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。

構造化データをサイトに追加する方法の概要は以下のとおりです。ウェブページに構造化データを追加する手順ガイドは、構造化データの Codelab をご覧ください。

  1. カルーセル構造化データを追加するページを決定します。次の 2 つの選択肢があります。
    • 概要ページと複数の詳細ページ: 概要ページにはリスト内の各アイテムに関する簡単な説明を記載します。それぞれの説明には 1 つのアイテムに焦点を当てた別の詳細ページへの参照を含めます。たとえば、概要ページには人気のクッキーレシピを一覧表示し、それぞれの説明から各クッキーの詳細なレシピにリンクするようにします。
    • 単一のオールインワン ページのリスト: 各アイテムの詳細な説明を 1 つのリストにまとめた単一のページ。たとえば、2020 年の人気映画の一覧を 1 つのページに掲載します。
  2. 必須プロパティを追加します。使用している形式に基づいて、ページ上の構造化データを挿入する場所をご確認ください。
  3. カルーセルが対象とするコンテンツ タイプごとの必須プロパティと推奨プロパティを追加します。
  4. ガイドラインを遵守します。
  5. リッチリザルト テストでコードを検証します。
  6. 構造化データが含まれているページをいくつかデプロイし、URL 検査ツールを使用して、ページが Google にどのように認識されるかをテストします。Google がページにアクセスでき、robots.txt ファイル、noindex タグ、またはログイン要件によってページがブロックされていないことを確認します。ページが正常に表示される場合は、Google に URL の再クロールを依頼できます。
  7. 今後の変更について Google への情報提供を継続するには、サイトマップを送信することをおすすめします。これは、Search Console Sitemap API で自動化できます。

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

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

概要ページ

概要ページでは ItemList を定義します。各 ListItem は、@type（「ListItem」に設定）、position（リスト内での位置）、url（アイテムの詳細が掲載されているページの URL）という 3 つのプロパティのみで構成されます。

概要ページの例を以下に示します。 


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"https://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"https://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"https://example.com/snickerdoodles.html"
        }
      ]
    }
    </script>
  </head>
  <body>
    <p>
      Here are the best cookie recipes of all time.
    </p>
    <h2>
      Peanut Butter Cookies
    </h2>
    <p>
      This <a href="https://example.com/peanut-butter-cookies.html">Peanut Butter Cookie recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Triple Chocolate Chunk Cookies
    </h2>
    <p>
      This <a href="https://example.com/triple-chocolate-chunk.html">Triple Chocolate Chunk Cookies recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Snickerdoodles
    </h2>
    <p>
      This <a href="https://example.com/snickerdoodles.html">Snickerdoodles recipe</a> is the tastiest one you'll find.
    </p>
  </body>
</html>

詳細ページ

詳細ページでは、カルーセルが対象とする特定の構造化データタイプを定義します。たとえば、概要ページが人気のクッキーレシピに関するものであれば、各詳細ページには個々のレシピに対する Recipe 構造化データを追加します。

詳細ページの例を以下に示します。

Peanut Butter Cookies 


<html>
  <head>
    <title>Peanut Butter Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Peanut Butter Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2024-03-10",
      "description": "This Peanut Butter Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "peanut butter, cookies",
      "recipeYield": 24,
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 5,
        "ratingCount": 18
      },
      "recipeIngredient": [
        "2 cups of peanut butter",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the peanut butter and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Peanut Butter Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2024-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2025-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make peanut butter cookies.
    </p>
    <ol>
      <li>Mix together the peanut butter and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

Triple Chocolate Chunk Cookies 


<html>
  <head>
    <title>Triple Chocolate Chunk Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Triple Chocolate Chunk Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2024-03-10",
      "description": "This Triple Chocolate Chunk Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "chocolate, cookies",
      "recipeYield": 24,
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 5,
        "ratingCount": 18
      },
      "recipeIngredient": [
        "2 cups of melted chocolate",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the chocolate and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Triple Chocolate Chunk Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2024-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2025-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make Triple Chocolate Chunk Cookies.
    </p>
    <ol>
      <li>Mix together the chocolate and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

Snickerdoodles


<html>
  <head>
    <title>Snickerdoodles</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Snickerdoodles",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2024-03-10",
      "description": "This Snickerdoodles recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "cinnamon sugar, cookies",
      "recipeYield": 24,
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 5,
        "ratingCount": 18
      },
      "recipeIngredient": [
        "2 cups of cinnamon",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the cinnamon and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Snickerdoodles",
        "description": "This is how you make snickerdoodles.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2024-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2025-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make snickerdoodles.
    </p>
    <ol>
      <li>Mix together the cinnamon and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

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

単一のオールインワン ページのリストには、各アイテムの詳細な説明を含め、すべてのカルーセル情報を記載します。たとえば、2020 年の人気映画を 1 ページにまとめたリストなどです。このページは別の詳細ページにリンクしていません。

単一のオールインワン ページの例を以下に示します。 


<html>
  <head>
    <title>The Best Movies from the Oscars - 2024</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@type": "Movie",
            "url": "https://example.com/2024-best-picture-noms#a-star-is-born",
            "name": "A Star Is Born",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2024-10-05",
            "director": {
                "@type": "Person",
                "name": "Bradley Cooper"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": 5
              },
              "author": {
                "@type": "Person",
                "name": "John D."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": 90,
                "bestRating": 100,
                "ratingCount": 19141
              }
            }
          },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@type": "Movie",
            "name": "Bohemian Rhapsody",
            "url": "https://example.com/2024-best-picture-noms#bohemian-rhapsody",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2024-11-02",
            "director": {
                "@type": "Person",
                "name": "Bryan Singer"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": 3
              },
              "author": {
                "@type": "Person",
                "name": "Vin S."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": 61,
                "bestRating": 100,
                "ratingCount": 21985
              }
            }
          },
        {
          "@type": "ListItem",
          "position": 3,
          "item": {
            "@type": "Movie",
            "name": "Black Panther",
            "url": "https://example.com/2024-best-picture-noms#black-panther",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2024-02-16",
            "director": {
                "@type": "Person",
                "name": "Ryan Coogler"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": 2
              },
              "author": {
                "@type": "Person",
                "name": "Trevor R."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": 96,
                "bestRating": 100,
                "ratingCount": 88211
              }
            }
          }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

ガイドライン

カルーセル構造化データには、構造化データに関する一般的なガイドラインに加えて、以下のガイドラインが適用されます。

  • リスト内のアイテムはすべて同じタイプである必要があります。たとえば、レシピに関するリストの場合は、Recipe アイテムのみを含めます。異なるタイプを混在させないでください。
  • カルーセル構造化データが完全であり、ページにリストされているすべてのアイテムが含まれていることを確認します。
  • ユーザーに表示されるテキストは、ページの構造化データに含まれている情報とほぼ同じである必要があります。
  • リスト形式で表示されるアイテムは、position プロパティで指定された順序で表示されます。

構造化データの検証とデプロイ

  1. リッチリザルト テストでコードを検証します。 概要ページについては、次の点を自分で確認する必要があります。
    • itemListElement に複数の ListItem 要素が含まれていることを確認します。
    • ListItem 要素がすべて同じタイプ（たとえば、すべてレシピに関するもの）であることを確認します。
    • リストに指定されている各 URL をリッチリザルト テストで検証します。リスト内の各ページには、そのリストに該当するサポート対象コンテンツ タイプ（レシピ、コース、レストラン、映画）のドキュメントに記載されているとおりに、有効な構造化データが含まれている必要があります。
  2. 構造化データが含まれているページをいくつかデプロイし、URL 検査ツールを使用して、ページが Google にどのように認識されるかをテストします。Google がページにアクセスでき、robots.txt ファイル、noindex タグ、またはログイン要件によってページがブロックされていないことを確認します。ページが正常に表示される場合は、Google に URL の再クロールを依頼できます。
  3. 今後の変更について Google への情報提供を継続するには、サイトマップを送信することをおすすめします。これは、Search Console Sitemap API で自動化できます。

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

リストを指定するには、少なくとも 2 つの ListItems を含む ItemList を定義します。コンテンツがリッチリザルトとして表示されるようにするには、必須プロパティを含める必要があります。

ItemList

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

ItemList の定義の全文は schema.org/ItemList で確認できます。

Google がサポートするプロパティは、次のとおりです。

必須プロパティ
itemListElement

ListItem

アイテムのリスト。すべてのアイテムは同じタイプでなければなりません。詳細については、 ListItem をご覧ください。

ListItem

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

  • 概要ページの場合、ListItem には type、position、および url プロパティのみを含めます。
  • オールインワン ページのリストの場合は、そこに記述されるデータタイプのすべての schema.org プロパティを含めます。サポートされているデータタイプは次のとおりです。

ListItem の定義の全文は schema.org/ListItem で確認できます。

概要ページ

概要ページには以下のプロパティが適用されます。

必須プロパティ
position

Integer

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

URL

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

オールインワン ページ

以下のプロパティは、オールインワン ページに適用されます。

必須プロパティ
item

Thing

リスト内の個々のアイテム。このオブジェクトには以下の値を設定します。また、対象とする構造化データタイプのすべてのプロパティを記述します。

  • item.name
  • item.url
  • 対象のデータタイプで必須のその他すべてのプロパティ（schema.org、および対象のコンテンツ タイプのドキュメントに記載されたルールを参照）。例: レシピの場合は、prepTime プロパティと image プロパティを指定します。
item.name

Text

アイテム名の文字列。item.name は、カルーセル内で個々のアイテムのタイトルとして表示されます。HTML 形式は無視されます。
item.url

URL

完全修飾 URL と、ページ上のこのアイテムに対するページアンカー。URL には現在のページを指定する必要があります。また、ユーザーに表示されるテキストの近くに、ページの HTML アンカー（<a> タグか、name または id の値）を含める必要があります。 例: https://example.org/recipes/pies#apple_pie。
position

Integer

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

トラブルシューティング

構造化データの実装またはデバッグで問題が発生した場合は、以下のリソースが参考になります。