Data terstruktur breadcrumb (`BreadcrumbList`)

Jejak breadcrumb di halaman menunjukkan posisi halaman di hierarki situs, dan dapat membantu pengguna memahami dan menjelajahi situs secara efektif. Pengguna dapat melihat seluruh hierarki situs, setingkat demi setingkat, dengan memulai dari breadcrumb terakhir pada jejak breadcrumb.

Breadcrumb ditampilkan pada halaman — **Catatan**: Tampilan sebenarnya di hasil penelusuran mungkin berbeda. Anda dapat melihat pratinjau sebagian besar fitur dengan Pengujian Hasil Kaya.

Cara 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 adalah ringkasan tentang cara membuat, menguji, dan merilis data terstruktur.

Tambahkan properti wajib. Berdasarkan format yang Anda gunakan, pelajari tempat menyisipkan data terstruktur di halaman.
Menggunakan CMS? Menggunakan plugin yang terintegrasi ke CMS Anda mungkin akan lebih mudah.
Menggunakan JavaScript? Pelajari cara membuat data terstruktur menggunakan JavaScript.
Ikuti pedoman.
Validasi kode Anda menggunakan Pengujian Hasil Kaya dan perbaiki setiap error kritis. Pertimbangkan juga untuk memperbaiki masalah non-kritis yang mungkin ditandai di alat tersebut, karena tindakan ini dapat membantu meningkatkan kualitas data terstruktur Anda (tetapi hal ini tidak diperlukan agar memenuhi syarat untuk hasil kaya).
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 tersebut.
Catatan: Tunggu beberapa saat hingga crawling dan pengindeksan ulang selesai. Perlu diingat bahwa Google mungkin memerlukan waktu beberapa hari untuk mencari dan meng-crawl halaman setelah Anda memublikasikannya.
Agar Google tetap mengetahui setiap perubahan pada masa mendatang, sebaiknya kirimkan peta situs. Anda dapat mengotomatiskan proses ini dengan Search Console Sitemap API.

Contoh

Google Penelusuran menggunakan markup breadcrumb dalam isi halaman web untuk mengategorikan informasi dari halaman tersebut di hasil penelusuran. Sering kali, seperti yang diilustrasikan dalam kasus penggunaan berikut ini, pengguna bisa sampai di halaman yang sama dari jenis kueri penelusuran yang sangat berbeda. Meskipun tiap penelusuran dapat menampilkan halaman web yang sama, breadcrumb akan mengategorikan konten dalam konteks kueri Google Penelusuran. Halaman ancillaryjustice.html dapat menampilkan jejak breadcrumb berikut, bergantung pada konteks penelusuran.

Jejak breadcrumb tunggal

Kueri penelusuran untuk penghargaan berbasis genre dan tahun, "Penghargaan Nebula untuk novel terbaik 2014", dapat menghasilkan breadcrumb berikut:

Buku › Fiksi Ilmiah › Pemenang Penghargaan

JSON-LD

Berikut ini contoh di JSON-LD untuk mendukung breadcrumb tersebut:

<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Berikut adalah contoh di RDFa untuk mendukung breadcrumb tersebut:

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Microdata

Berikut adalah contoh di Microdata untuk mendukung breadcrumb tersebut:

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol 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">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

Berikut adalah contoh blok breadcrumb HTML dalam halaman sebagai bagian dari desain visual.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Beberapa jejak breadcrumb

Jika ada beberapa cara untuk menuju halaman di situs, Anda dapat menentukan beberapa jejak breadcrumb untuk satu halaman. Berikut satu jejak breadcrumb yang mengarah ke halaman untuk buku pemenang penghargaan:

Buku › Fiksi Ilmiah › Pemenang Penghargaan

Berikut jejak breadcrumb lainnya yang mengarah ke halaman yang sama:

Literatur › Pemenang Penghargaan

JSON-LD

Berikut ini contoh JSON-LD yang mendukung beberapa jejak breadcrumb:

<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Berikut adalah contoh RDFa yang mendukung beberapa jejak breadcrumb:

<html>
 <head>
 <title>Award Winners</title>
 </head>
 <body>
 <ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books">
 Books</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta property="position" content="2">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</a>
 <meta property="position" content="3">
 </li>
 </ol>
 <ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/literature">
 Literature</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 Award Winners
 <meta property="position" content="2">
 </li>
 </ol>
 </body>
</html>

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Microdata

Berikut adalah contoh Microdata yang mendukung beberapa jejak breadcrumb:

<html>
 <head>
 <title>Award Winners</title>
 </head>
 <body>
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/books">
 Books</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemscope itemtype="https://schema.org/WebPage"
 itemprop="item" itemid="https://example.com/books/sciencefiction"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta itemprop="position" content="2" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</a>
 <meta itemprop="position" content="3" />
 </li>
 </ol>
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/literature">
 Literature</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 Award Winners
 <meta itemprop="position" content="2" />
 </li>
 </ol>
 </body>
</html>

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol 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">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

Berikut adalah contoh blok breadcrumb HTML dalam halaman sebagai bagian dari desain visual.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Panduan

Halaman Anda harus mengikuti pedoman ini agar memenuhi syarat untuk ditampilkan dengan breadcrumb di Google Penelusuran.

Sebaiknya sediakan breadcrumb yang merepresentasikan jalur pengguna biasa ke halaman tersebut, bukan mencerminkan struktur URL. Beberapa bagian jalur URL tidak membantu orang memahami bagaimana halaman tersebut cocok di situs Anda. Misalnya, jika URL adalah https://example.com/pages/books/catcher_in_the_rye.html, jalur pages di URL tidak menambahkan informasi apa pun, begitu pun dengan elemen tingkat atas example.com.

Definisi jenis data terstruktur

Untuk menentukan breadcrumb, tetapkan BreadcrumbList yang berisi setidaknya dua ListItems. Anda harus menyertakan properti wajib agar konten Anda memenuhi syarat untuk ditampilkan dengan breadcrumb.

`BreadcrumbList`

BreadcrumbList adalah item penampung yang berisi semua elemen dalam daftar. Definisi lengkap BreadcrumbList tersedia di schema.org/BreadcrumbList. Properti yang didukung Google adalah sebagai berikut:

Properti wajib

Properti wajib
`itemListElement`	`ListItem` Array breadcrumb yang tercantum dalam urutan tertentu. Tentukan setiap breadcrumb dengan `ListItem`. Contoh: { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" }] }

itemListElement

ListItem

Array breadcrumb yang tercantum dalam urutan tertentu. Tentukan setiap breadcrumb dengan ListItem. Contoh:

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

`ListItem`

ListItem berisi detail tentang masing-masing item dalam daftar. Definisi lengkap ListItem tersedia di schema.org/ListItem. Properti yang didukung Google adalah sebagai berikut:

Properti wajib

Properti wajib
`item`	`URL` atau subjenis dari `Thing` URL ke halaman web yang mewakili breadcrumb. Ada dua cara untuk menentukan `item`: `URL`: Tentukan URL halaman. Contoh: "item": "https://example.com/books" `Thing`: Gunakan ID untuk menentukan URL berdasarkan format markup yang Anda gunakan: JSON-LD: Gunakan `@id` untuk menentukan URL. Microdata: Anda dapat menggunakan `href` atau `itemid` untuk menentukan URL. RDFa: Anda dapat menggunakan `about`, `href`, atau `resource` untuk menentukan URL. Jika breadcrumb adalah item terakhir dalam jejak breadcrumb, `item` tidak diperlukan. Jika `item` tidak disertakan untuk item terakhir, Google akan menggunakan URL dari halaman yang memuatnya.
`name`	`Text` Judul breadcrumb yang ditampilkan untuk pengguna. Jika Anda menggunakan `Thing` dengan `name`, bukan `URL` untuk menentukan `item`, maka `name` tidak diperlukan.
`position`	`Integer` Posisi breadcrumb dalam jejak breadcrumb. Posisi 1 menandakan awal jejak.

item

URL atau subjenis dari Thing

URL ke halaman web yang mewakili breadcrumb. Ada dua cara untuk menentukan item:

URL: Tentukan URL halaman. Contoh:
```
"item": "https://example.com/books"
```
Thing: Gunakan ID untuk menentukan URL berdasarkan format markup yang Anda gunakan:
- JSON-LD: Gunakan @id untuk menentukan URL.
- Microdata: Anda dapat menggunakan href atau itemid untuk menentukan URL.
- RDFa: Anda dapat menggunakan about, href, atau resource untuk menentukan URL.

Jika breadcrumb adalah item terakhir dalam jejak breadcrumb, item tidak diperlukan. Jika item tidak disertakan untuk item terakhir, Google akan menggunakan URL dari halaman yang memuatnya.

name

Text

Judul breadcrumb yang ditampilkan untuk pengguna. Jika Anda menggunakan Thing dengan name, bukan URL untuk menentukan item, maka name tidak diperlukan.

position

Integer

Posisi breadcrumb dalam jejak breadcrumb. Posisi 1 menandakan awal jejak.

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:

Setelah men-deploy data terstruktur untuk pertama kalinya
Setelah merilis template baru atau memperbarui kode
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, akan ada peningkatan jumlah item yang valid, sedangkan jumlah item yang tidak valid tidak berubah. Jika Anda menemukan masalah pada data terstruktur Anda:

Perbaiki item yang tidak valid.
Periksa URL aktif untuk memeriksa apakah masalah terus berlanjut.
Minta validasi menggunakan laporan status.

Setelah merilis template baru atau memperbarui kode Anda

Saat Anda membuat perubahan yang signifikan pada situs, pantau peningkatan jumlah item yang tidak valid pada data terstruktur.

Jika terjadi peningkatan jumlah item yang tidak valid, mungkin Anda meluncurkan template baru yang tidak berfungsi, atau situs Anda berinteraksi dengan template yang ada dengan cara baru yang salah.
Jika terjadi penurunan jumlah item yang valid (tidak cocok dengan peningkatan jumlah item yang tidak valid), 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.

问题排查

如果您在实施或调试结构化数据时遇到问题，请查看下面列出的一些实用资源。

如果您使用了内容管理系统 (CMS) 或其他人负责管理您的网站，请向其寻求帮助。请务必向其转发列明问题细节的任何 Search Console 消息。
Google 不能保证使用结构化数据的功能一定会显示在搜索结果中。如需查看导致 Google 无法将您的内容显示为富媒体搜索结果的各种常见原因，请参阅结构化数据常规指南。
您的结构化数据可能存在错误。请参阅结构化数据错误列表。
如果您的网页受到结构化数据手动操作的影响，其中的结构化数据将会被忽略（但该网页仍可能会出现在 Google 搜索结果中）。如需修正结构化数据问题，请使用“人工处置措施”报告。
再次查看相关指南，确认您的内容是否未遵循指南。问题可能是因为出现垃圾内容或使用垃圾标记导致的。不过，问题可能不是语法问题，因此富媒体搜索结果测试无法识别这些问题。
针对富媒体搜索结果缺失/富媒体搜索结果总数下降进行问题排查。
请等待一段时间，以便 Google 重新抓取您的网页并重新将其编入索引。请注意，网页发布后，Google 可能需要几天时间才会找到和抓取该网页。有关抓取和索引编制的常见问题，请参阅 Google 搜索抓取和索引编制常见问题解答。
在 Google 搜索中心论坛中发帖提问。

Data terstruktur breadcrumb (BreadcrumbList)

Cara menambahkan data terstruktur

Contoh

Jejak breadcrumb tunggal

JSON-LD

RDFa

Microdata

HTML

Beberapa jejak breadcrumb

JSON-LD

RDFa

Microdata

HTML

Panduan

Definisi jenis data terstruktur

BreadcrumbList

ListItem

Memantau hasil kaya dengan Search Console

Setelah men-deploy data terstruktur untuk pertama kalinya

Setelah merilis template baru atau memperbarui kode Anda

Menganalisis traffic secara berkala

问题排查

Data terstruktur breadcrumb (`BreadcrumbList`)

`BreadcrumbList`

`ListItem`