Carousel

Carousel adalah hasil kaya seperti daftar yang dapat digeser pengguna di perangkat seluler. Carousel menampilkan beberapa kartu dari situs yang sama (juga dikenal sebagai carousel host). Guna mengaktifkan carousel untuk situs Anda, tambahkan data terstruktur Carousel yang dikombinasikan dengan salah satu jenis konten yang didukung berikut:

Berikut tampilan carousel di Google Penelusuran saat Anda menambahkan markup Carousel yang dikombinasikan dengan jenis konten yang didukung:

Contoh carousel host resep, carousel host kursus, dan carousel host film di Google Penelusuran

Menambahkan data terstruktur

Data terstruktur adalah format terstandarisasi untuk memberikan informasi tentang suatu halaman dan mengelompokkan konten halaman tersebut. Jika Anda baru mengenal data terstruktur, Anda dapat mempelajari lebih lanjut cara kerja data terstruktur.

Berikut ini ringkasan cara menambahkan data terstruktur ke situs Anda:

  1. Tentukan halaman yang akan berisi data terstruktur Carousel. Ada 2 opsi:
    • Halaman ringkasan dan beberapa halaman detail: Halaman ringkasan memiliki deskripsi singkat tentang setiap item yang ada dalam daftar, dan setiap deskripsi mengarah ke halaman detail terpisah yang khusus berfokus pada satu item. Misalnya, halaman ringkasan yang mencantumkan resep kue terbaik, dan setiap deskripsi memberikan link ke resep lengkap setiap kue.
    • Daftar lengkap satu halaman: Satu halaman yang berisi semua informasi daftar, termasuk teks lengkap untuk setiap item. Misalnya, daftar film teratas tahun 2020, semuanya ada di satu halaman.
  2. Tambahkan properti wajib. Untuk informasi tentang tempat untuk meletakkan data terstruktur di halaman, tonton Data terstruktur JSON-LD: Tempat untuk menyisipkan di halaman.
  3. Tambahkan properti wajib dan yang direkomendasikan untuk jenis konten spesifik yang berkaitan dengan Carousel:
  4. Ikuti panduan.

Halaman ringkasan dan beberapa halaman detail

Halaman ringkasan memiliki deskripsi singkat tentang setiap item yang ada dalam daftar. Setiap deskripsi mengarah ke halaman detail terpisah yang khusus berfokus pada satu item.

Halaman ringkasan

Halaman ringkasan menentukan ItemList, di mana setiap ListItem hanya memiliki tiga properti: @type (disetel ke "ListItem"), position (posisi dalam daftar), dan url (URL halaman dengan detail lengkap tentang item tersebut).

Berikut adalah contoh tampilan halaman ringkasan:


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"http://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://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>

Halaman detail

Halaman detail menentukan jenis data terstruktur spesifik yang berkaitan dengan Carousel. Misalnya, jika halaman ringkasan berisi tentang resep kue terbaik, setiap halaman detail akan berisi data terstruktur Recipe untuk resep tertentu.

Berikut ini contoh tampilan halaman detail:

Kukis selai kacang


<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": "2018-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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-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>

Kukis Cokelat Chips Tiga Lapis


<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": "2018-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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-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>

Snickerdoodle


<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": "2018-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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-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>

Daftar lengkap satu halaman

Daftar lengkap satu halaman berisi semua informasi carousel, termasuk teks lengkap untuk setiap item. Misalnya, daftar film teratas tahun 2020, semuanya ada di satu halaman. Halaman ini tidak tertaut ke halaman detail lainnya.

Berikut adalah contoh lengkap satu halaman:


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

Panduan

Selain Panduan data terstruktur umum, panduan berikut berlaku untuk data terstruktur Carousel:

  • Semua item dalam daftar harus memiliki jenis yang sama. Misalnya, jika daftar berisi resep, hanya sertakan item Recipe. Jangan mencampur jenis yang berbeda.
  • Pastikan data terstruktur Carousel sudah lengkap dan berisi semua item yang tercantum di halaman.
  • Teks yang terlihat oleh pengguna harus serupa dengan informasi yang dimuat dalam data terstruktur di halaman.
  • Item yang ditampilkan dalam format daftar akan ditampilkan dalam urutan yang ditentukan oleh properti position.

Memvalidasi dan men-deploy data terstruktur

  1. Validasi kode Anda menggunakan Pengujian Hasil Kaya. Untuk halaman ringkasan, ada beberapa hal yang perlu Anda verifikasi sendiri:
    • Periksa apakah itemListElement berisi dua elemen ListItem atau lebih.
    • Pastikan semua elemen ListItem memiliki jenis yang sama (misalnya, semuanya tentang resep).
    • Validasi setiap URL yang disebutkan dalam daftar menggunakan Pengujian Hasil Kaya. Setiap halaman dalam daftar harus berisi data terstruktur yang valid, sesuai dengan dokumentasi untuk jenis konten yang didukung yang berkaitan dengan daftar: Resep, Kursus, Restoran, Film.
  2. Deploy beberapa halaman yang menyertakan data terstruktur Anda dan gunakan Alat Inspeksi URL untuk menguji bagaimana Google melihat halaman tersebut. Pastikan halaman Anda dapat diakses oleh Google dan tidak diblokir oleh file robots.txt, tag noindex, atau persyaratan login. Jika halaman tidak bermasalah, Anda dapat meminta Google untuk meng-crawl ulang URL Anda.
  3. Agar Google tetap mengetahui adanya perubahan di masa mendatang, sebaiknya Anda mengirimkan peta situs. Anda dapat mengotomatiskan proses ini dengan Search Console Sitemap API.

Definisi jenis data terstruktur

Untuk menentukan daftar, tentukan ItemList yang berisi setidaknya dua ListItems. Anda harus menyertakan properti wajib agar konten Anda memenuhi syarat untuk ditampilkan sebagai hasil kaya.

ItemList

ItemList adalah item container yang menampung semua elemen dalam daftar. Jika digunakan pada halaman ringkasan, semua URL dalam daftar harus mengarah ke halaman berbeda pada domain yang sama. Jika digunakan pada daftar lengkap satu halaman, semua URL harus mengarah ke anchor pada halaman yang menjadi host data terstruktur daftar.

Definisi lengkap ItemList tersedia di schema.org/ItemList.

Properti wajib
itemListElement

ListItem

Daftar item. Semua item harus memiliki jenis yang sama. Lihat ListItem untuk detailnya.

ListItem

ListItem berisi detail tentang masing-masing item dalam daftar.

  • Jika ini adalah halaman ringkasan, hanya sertakan properti type, position, dan url di ListItem.
  • Jika ini merupakan daftar lengkap satu halaman, sertakan semua properti schema.org tambahan untuk jenis data yang dideskripsikannya. Jenis data yang didukung adalah:

Definisi lengkap ListItem tersedia di schema.org/ListItem.

Halaman ringkasan

Properti berikut berlaku untuk halaman ringkasan:

Properti wajib
position

Integer

Posisi item dalam carousel. Ini adalah bilangan berbasis 1.

url

URL

URL kanonis dari halaman detail item. Semua URL dalam daftar harus unik, tetapi berada pada domain yang sama (domain yang sama atau sub/super-domain sebagai halaman saat ini).

Halaman lengkap

Properti berikut berlaku untuk halaman lengkap:

Properti wajib
item

Thing

Masing-masing objek dalam daftar. Isi objek ini dengan nilai berikut, ditambah semua properti dari jenis data terstruktur tertentu yang dideskripsikan:

  • item.name
  • item.url
  • Semua properti lain yang wajib untuk jenis data ini, seperti yang dijelaskan dalam schema.org dan aturan yang dijelaskan dalam dokumen ini untuk jenis konten Anda: Contoh: Untuk resep, Anda akan memberikan properti prepTime dan image.
item.name

Text

Nama string item. item.name ditampilkan sebagai judul masing-masing item di carousel. Pemformatan HTML diabaikan.

item.url

URL

URL yang sepenuhnya memenuhi syarat dan anchor halaman ke item ini di halaman. URL harus dari halaman saat ini, dan Anda harus menyertakan anchor HTML (tag <a> atau nilai name atau id) di halaman Anda di dekat teks yang terlihat oleh pengguna. Contoh: https://example.org/recipes/pies#apple_pie.

position

Integer

Posisi item dalam carousel. Ini adalah bilangan berbasis 1.

Pemecahan masalah

Jika Anda mengalami masalah saat menerapkan data terstruktur, berikut beberapa referensi yang dapat membantu Anda.