Produk

Tambahkan markup ke halaman produk Anda agar Google dapat memberikan informasi produk terperinci dalam hasil Penelusuran kaya — termasuk Google Gambar. Pengguna dapat melihat harga, ketersediaan, dan rating ulasan langsung dari hasil Penelusuran.

Dengan markup untuk mengaktifkan hasil kaya produk, Anda dapat menarik minat calon pembeli saat mereka menelusuri item yang ingin dibeli di Google Penelusuran atau gambar yang menampilkan produk yang Anda jual. Pertahankan keakuratan dan keaktualan informasi produk Anda agar pelanggan dapat menemukan item yang tepat dan terkini sesuai dengan yang mereka inginkan.

Halaman ini menjelaskan cara me-markup informasi produk sehingga Google Penelusuran dapat menampilkan hasil kaya di Google Penelusuran. Markup Product juga membuat produk Anda layak ditampilkan dengan badge di Google Gambar, yang dapat mendorong lebih banyak pengguna untuk mengklik konten Anda.

Gambar hasil kaya dan hasil Google Gambar dengan informasi produk

Ada dua jenis halaman tempat Anda biasanya menggunakan markup ini:

  • Halaman produk yang mendeskripsikan satu produk
  • Halaman agregator belanja yang mencantumkan satu produk, beserta informasi tentang berbagai penjual yang menawarkan produk tersebut

Bagaimana cara menambahkan data terstruktur

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

Berikut adalah ringkasan tentang cara membuat, menguji, dan merilis data terstruktur. Untuk panduan langkah demi langkah tentang cara menambahkan data terstruktur ke halaman web, lihat codelab data terstruktur.

  1. Tambahkan properti wajib. Untuk informasi tentang tempat untuk menempatkan data terstruktur di halaman, tonton Data terstruktur JSON-LD: Tempat untuk menyisipkan di halaman.
  2. Ikuti panduan.
  3. Validasi kode Anda menggunakan Alat Pengujian Hasil Kaya.
  4. Deploy beberapa halaman yang menyertakan data terstruktur dan gunakan Alat Inspeksi URL untuk menguji cara 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 meng-crawl ulang URL Anda.
  5. Agar Google tetap mengetahui setiap perubahan di masa mendatang, sebaiknya Anda mengirimkan peta situs. Anda dapat mengotomatiskan proses ini dengan API Peta Situs Search Console.

Cobalah

Halaman produk tunggal

Berikut adalah contoh halaman produk tunggal yang dapat Anda salin dan tempel ke halaman HTML Anda sendiri.

JSON-LD


 <html>
  <head>
    <title>Executive Anvil</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa


 <html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
    <div typeof="schema:Product">
        <div rel="schema:review">
          <div typeof="schema:Review">
            <div rel="schema:reviewRating">
              <div typeof="schema:Rating">
                <div property="schema:ratingValue" content="4"></div>
                <div property="schema:bestRating" content="5"></div>
              </div>
            </div>
            <div rel="schema:author">
              <div typeof="schema:Person">
                <div property="schema:name" content="Fred Benson"></div>
              </div>
            </div>
          </div>
        </div>
        <div rel="schema:image" resource="https://example.com/photos/4x3/photo.jpg"></div>
        <div property="schema:mpn" content="925872"></div>
        <div property="schema:name" content="Executive Anvil"></div>
        <div property="schema:description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height."></div>
        <div rel="schema:image" resource="https://example.com/photos/1x1/photo.jpg"></div>
        <div rel="schema:brand">
          <div typeof="schema:Brand">
            <div property="schema:name" content="ACME"></div>
          </div>
        </div>
        <div rel="schema:aggregateRating">
          <div typeof="schema:AggregateRating">
            <div property="schema:reviewCount" content="89"></div>
            <div property="schema:ratingValue" content="4.4"></div>
          </div>
        </div>
        <div rel="schema:offers">
          <div typeof="schema:Offer">
            <div property="schema:price" content="119.99"></div>
            <div property="schema:availability" content="https://schema.org/InStock"></div>
            <div property="schema:priceCurrency" content="USD"></div>
            <div property="schema:priceValidUntil" datatype="xsd:date" content="2020-11-20"></div>
            <div rel="schema:url" resource="https://example.com/anvil"></div>
            <div property="schema:itemCondition" content="https://schema.org/UsedCondition"></div>
          </div>
        </div>
        <div rel="schema:image" resource="https://example.com/photos/16x9/photo.jpg"></div>
        <div property="schema:sku" content="0446310786"></div>
      </div>
  </body>
</html>

Microdata


 <html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
  <div>
    <div itemtype="http://schema.org/Product" itemscope>
      <meta itemprop="mpn" content="925872" />
      <meta itemprop="name" content="Executive Anvil" />
      <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
      <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
      <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
        <link itemprop="url" href="https://example.com/anvil" />
        <meta itemprop="availability" content="https://schema.org/InStock" />
        <meta itemprop="priceCurrency" content="USD" />
        <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
        <meta itemprop="price" content="119.99" />
        <meta itemprop="priceValidUntil" content="2020-11-20" />
      </div>
      <div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
      </div>
      <div itemprop="review" itemtype="http://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="http://schema.org/Person" itemscope>
          <meta itemprop="name" content="Fred Benson" />
        </div>
        <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
          <meta itemprop="ratingValue" content="4" />
          <meta itemprop="bestRating" content="5" />
        </div>
      </div>
      <meta itemprop="sku" content="0446310786" />
      <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope>
        <meta itemprop="name" content="ACME" />
      </div>
    </div>
  </div>
  </body>
</html>

Halaman agregator belanja

Berikut adalah contoh halaman agregator belanja yang dapat Anda salin dan tempel ke halaman HTML Anda sendiri.

JSON-LD


<html>
  <head>
    <title>Executive Anvil</title>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "Product",
        "name": "Executive Anvil",
        "image": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
        "sku": "0446310786",
        "mpn": "925872",
        "brand": {
          "@type": "Brand",
          "name": "ACME"
        },
        "review": {
          "@type": "Review",
          "reviewRating": {
            "@type": "Rating",
            "ratingValue": "4",
            "bestRating": "5"
          },
          "author": {
            "@type": "Person",
            "name": "Fred Benson"
          }
        },
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "4.4",
          "reviewCount": "89"
        },
        "offers": {
          "@type": "AggregateOffer",
          "offerCount": "5",
          "lowPrice": "119.99",
          "highPrice": "199.99",
          "priceCurrency": "USD"
        }
      }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa


 <html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
    <div typeof="schema:Product">
      <div rel="schema:review">
        <div typeof="schema:Review">
          <div rel="schema:reviewRating">
            <div typeof="schema:Rating">
              <div property="schema:ratingValue" content="4"></div>
              <div property="schema:bestRating" content="5"></div>
            </div>
          </div>
          <div rel="schema:author">
            <div typeof="schema:Person">
              <div property="schema:name" content="Fred Benson"></div>
            </div>
          </div>
        </div>
      </div>
      <div rel="schema:aggregateRating">
        <div typeof="schema:AggregateRating">
          <div property="schema:reviewCount" content="89"></div>
          <div property="schema:ratingValue" content="4.4"></div>
        </div>
      </div>
      <div rel="schema:image" resource="https://example.com/photos/4x3/photo.jpg"></div>
      <div property="schema:mpn" content="925872"></div>
      <div property="schema:name" content="Executive Anvil"></div>
      <div property="schema:description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height."></div>
      <div rel="schema:image" resource="https://example.com/photos/1x1/photo.jpg">
      </div>
      <div rel="schema:brand">
        <div typeof="schema:Brand">
          <div property="schema:name" content="ACME"></div>
        </div>
      </div>
      <div rel="schema:offers">
        <div typeof="schema:AggregateOffer">
          <div property="schema:offerCount" content="5"></div>
          <div property="schema:lowPrice" content="119.99"></div>
          <div property="schema:highPrice" content="199.99"></div>
          <div property="schema:priceCurrency" content="USD"></div>
          <div rel="schema:url" resource="https://example.com/anvil"></div>
        </div>
      </div>
      <div rel="schema:image" resource="https://example.com/photos/16x9/photo.jpg"></div>
      <div property="schema:sku" content="0446310786"></div>
    </div>
  </body>
</html>

Microdata


 <html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
  <div>
    <div itemtype="http://schema.org/Product" itemscope>
      <meta itemprop="mpn" content="925872" />
      <meta itemprop="name" content="Executive Anvil" />
      <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
      <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
      <div itemprop="offers" itemtype="http://schema.org/AggregateOffer" itemscope>
        <meta itemprop="lowPrice" content="119.99" />
        <meta itemprop="highPrice" content="199.99" />
        <meta itemprop="offerCount" content="6" />
        <meta itemprop="priceCurrency" content="USD" />
      </div>
      <div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
      </div>
      <div itemprop="review" itemtype="http://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="http://schema.org/Person" itemscope>
          <meta itemprop="name" content="Fred Benson" />
        </div>
        <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
          <meta itemprop="ratingValue" content="4" />
          <meta itemprop="bestRating" content="5" />
        </div>
      </div>
      <meta itemprop="sku" content="0446310786" />
      <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope>
        <meta itemprop="name" content="ACME" />
      </div>
    </div>
  </div>
  </body>
</html>

Panduan

Hasil kaya produk memberi pengguna informasi tentang produk tertentu, seperti harga, ketersediaan, dan rating pengulas. Pedoman berikut berlaku untuk markup Product:

  • Gunakan markup untuk produk spesifik, bukan untuk kategori atau daftar produk. Misalnya, "sepatu di toko kami" bukan merupakan produk spesifik. Saat ini, hasil kaya produk hanya mendukung halaman yang fokus pada satu produk. Sebaiknya fokus pada penambahan markup ke halaman produk, bukan halaman yang mencantumkan produk atau kategori produk.
  • Produk khusus untuk orang dewasa tidak didukung.
  • Jika Anda menambahkan ulasan untuk produk, nama pengulas harus berupa nama yang valid untuk Person atau Team.

    Tidak direkomendasikan: Diskon 50% selama Harbolnas

    Direkomendasikan: "Andi Setiawan" atau "Pengulas InfoGadget"

Untuk menyertakan informasi produk di Google Gambar, Anda harus menambahkan properti tambahan:

  • Untuk menampilkan informasi produk Anda di penampil gambar kaya: Sertakan properti name, image, price, dan priceCurrency.
  • Untuk menampilkan informasi produk Anda di fitur Item Terkait: Sertakan properti name, image, price, priceCurrency, dan availability.

Definisi jenis data terstruktur

Anda harus menyertakan properti wajib agar konten Anda memenuhi syarat untuk ditampilkan sebagai hasil kaya. Anda juga dapat menyertakan properti yang direkomendasikan untuk menambahkan informasi lain ke konten, yang akan meningkatkan kualitas pengalaman pengguna.

Product

Definisi lengkap Product tersedia di schema.org/Product. Saat me-markup konten untuk informasi produk, gunakan properti dari jenis Product schema.org:

Properti wajib

name

Text

Nama produk.

Baik review, aggregateRating, atau offers

Anda harus menyertakan salah satu properti berikut:

Properti yang direkomendasikan

aggregateRating

AggregateRating

aggregateRating bertingkat di produk. Ikuti Panduan cuplikan ulasan dan daftar properti AggregateRating yang wajib dan direkomendasikan.

brand

Brand atau Organization

Merek produk.

description

Text

Deskripsi produk.

image

ImageObject atau URL berulang

URL foto produk. Gambar yang menunjukkan produk dengan jelas (misalnya dengan latar belakang putih) lebih disukai.

Pedoman gambar tambahan:

  • Setiap halaman harus memuat setidaknya satu gambar (baik Anda menyertakan markup ataupun tidak). Google akan memilih gambar terbaik untuk ditampilkan dalam hasil Penelusuran berdasarkan rasio tinggi lebar dan resolusi.
  • URL gambar harus dapat di-crawl dan diindeks.
  • Gambar harus mewakili konten yang di-markup.
  • Gambar harus dalam format file yang didukung oleh Google Gambar.
  • Untuk mendapatkan hasil terbaik, berikan beberapa gambar beresolusi tinggi (minimal 50.000 piksel, yang merupakan hasil perkalian lebar dan tinggi) dengan rasio tinggi lebar berikut: 16x9, 4x3, dan 1x1.

Contoh:

"image": [
  "https://example.com/photos/1x1/photo.jpg",
  "https://example.com/photos/4x3/photo.jpg",
  "https://example.com/photos/16x9/photo.jpg"
]

offers

Offer atau AggregateOffer

Offer bertingkat atau AggregateOffer untuk menjual produk. Sertakan properti wajib dan yang direkomendasikan untuk Offer atau AggregateOffer (mana saja yang berlaku untuk konten Anda).

review

Review

Review bertingkat di produk. Ikuti Panduan cuplikan ulasan dan daftar properti ulasan yang diperlukan dan direkomendasikan.

gtin8 | gtin13 | gtin14 | mpn | isbn

Text

Sertakan semua ID global yang berlaku; ini dijelaskan di schema.org/Product.

sku

Text

ID khusus penjual untuk produk.

Offer

Definisi lengkap Offer tersedia di schema.org/Offer. Saat me-markup penawaran dalam suatu produk, gunakan properti dari jenis Offer schema.org berikut:

Properti wajib

price

Number

Harga penawaran produk. Ikuti panduan penggunaan schema.org.

Properti yang direkomendasikan

availability

ItemAvailability

Kemungkinan opsi ketersediaan produk. Gunakan salah satu nilai berikut dan nyatakan dengan link URL di markup. Google juga memahami nama pendeknya (misalnya InStock atau OutOfStock), tanpa cakupan URL lengkap.

  • https://schema.org/Discontinued
  • https://schema.org/InStock
  • https://schema.org/InStoreOnly
  • https://schema.org/LimitedAvailability
  • https://schema.org/OnlineOnly
  • https://schema.org/OutOfStock
  • https://schema.org/PreOrder
  • https://schema.org/PreSale
  • https://schema.org/SoldOut

itemOffered

Thing

Item yang dijual. Umumnya, ini meliputi produk bertingkat, tetapi juga dapat berisi jenis item lain atau teks bebas.

priceCurrency

Text

Mata uang yang digunakan untuk mendeskripsikan harga produk, ditulis dalam format ISO 4217 tiga huruf.

priceValidUntil

Date

Tanggal batas tersedianya harga (dalam format tanggal ISO 8601). Cuplikan produk Anda mungkin tidak ditampilkan jika properti priceValidUntil menunjukkan tanggal yang sudah berlalu.

url

URL

URL ke halaman web produk (yang memuat Offer).

AggregateOffer

Definisi lengkap AggregateOffer tersedia di schema.org/AggregateOffer. AggregateOffer adalah sejenis Offer yang mewakili agregasi penawaran lainnya. Saat me-markup penawaran gabungan dalam suatu produk, gunakan properti dari jenis AggregateOffer schema.org:

Properti wajib

lowPrice

Number

Harga terendah untuk semua penawaran yang tersedia. Gunakan bilangan floating point.

priceCurrency

Text

Mata uang yang digunakan untuk mendeskripsikan harga produk, ditulis dalam format ISO 4217 tiga huruf.

Properti yang direkomendasikan

highPrice

Number

Harga tertinggi untuk semua penawaran yang tersedia. Gunakan bilangan floating point.

offerCount

Number

Jumlah penawaran untuk produk.

Memantau hasil kaya dengan Search Console

Search Console adalah alat yang dapat membantu Anda memantau performa halaman Anda di Google Penelusuran. Anda tidak perlu mendaftar ke Search Console agar halaman Anda dapat disertakan dalam hasil Google Penelusuran. Tetapi dengan mendaftar, Anda dapat memahami dan meningkatkan cara Google melihat situs Anda dengan mudah. Sebaiknya Anda memeriksa Search Console dalam kasus berikut:

  1. Setelah men-deploy data terstruktur untuk pertama kalinya
  2. Setelah merilis template baru atau memperbarui kode Anda
  3. Menganalisis traffic secara berkala

Setelah men-deploy data terstruktur untuk pertama kalinya

Setelah Google mengindeks halaman Anda, temukan masalah menggunakan laporan status Hasil kaya yang relevan. Idealnya, Anda akan melihat peningkatan jumlah halaman yang valid, sedangkan jumlah error dan peringatan tidak berubah. Jika Anda menemukan masalah pada data terstruktur Anda:

  1. Perbaiki error.
  2. Periksa URL aktif untuk memeriksa apakah masalah terus berlanjut.
  3. Minta validasi menggunakan laporan status.

Setelah merilis template baru atau memperbarui kode Anda

Jika Anda membuat perubahan yang signifikan pada situs, pantau peningkatan error dan peringatan data terstruktur.
  • Jika terjadi peningkatan error, mungkin Anda meluncurkan template baru yang tidak berfungsi, atau situs Anda berinteraksi dengan template yang ada dengan cara baru yang salah.
  • Jika terjadi penurunan item yang valid (tidak cocok dengan peningkatan error), mungkin Anda tidak lagi menyematkan data terstruktur di halaman Anda. Gunakan Alat Inspeksi URL untuk mempelajari penyebab masalah tersebut.

Menganalisis traffic secara berkala

Analisis traffic Google Penelusuran Anda menggunakan Laporan Performa. Data akan menunjukkan seberapa sering halaman Anda muncul sebagai hasil kaya di Penelusuran, seberapa sering pengguna mengkliknya, dan posisi rata-rata halaman Anda saat muncul di hasil penelusuran. Anda juga dapat otomatis menarik hasil ini dengan Search Console API.

Pemecahan masalah

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