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 menuju level teratas hierarki situs, setingkat demi setingkat, mulai dari breadcrumb terakhir dalam jejak breadcrumb terkait.

Ketersediaan fitur

Fitur ini tersedia di desktop di semua wilayah dan bahasa tempat Google Penelusuran tersedia.

How to add structured data

Structured data is a standardized format for providing information about a page and classifying the page content. If you're new to structured data, you can learn more about how structured data works.

Here's an overview of how to build, test, and release structured data.

Add the required properties. Based on the format you're using, learn where to insert structured data on the page.
Using a CMS? It may be easier to use a plugin that's integrated into your CMS.
Using JavaScript? Learn how to generate structured data with JavaScript.
Follow the guidelines.
Validate your code using the Rich Results Test and fix any critical errors. Consider also fixing any non-critical issues that may be flagged in the tool, as they can help improve the quality of your structured data (however, this isn't necessary to be eligible for rich results).
Deploy a few pages that include your structured data and use the URL Inspection tool to test how Google sees the page. Be sure that your page is accessible to Google and not blocked by a robots.txt file, the noindex tag, or login requirements. If the page looks okay, you can ask Google to recrawl your URLs.
Note: Allow time for re-crawling and re-indexing. Remember that it may take several days after publishing a page for Google to find and crawl it.
To keep Google informed of future changes, we recommend that you submit a sitemap. You can automate this with the Search Console Sitemap API.

Contoh

Google Penelusuran menggunakan markup breadcrumb pada isi halaman web untuk mengategorikan informasi dari halaman tersebut di hasil penelusuran. Sering kali, seperti yang diilustrasikan dalam kasus penggunaan berikut, 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 untuk pemenang penghargaan buku fiksi mungkin menggunakan jejak breadcrumb berikut:

Jejak breadcrumb tunggal

Jika hanya ada satu jejak breadcrumb yang dapat mengarah ke halaman, halaman tersebut dapat menentukan jejak 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 adalah jejak breadcrumb 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. Anda tidak perlu menyertakan ListItem breadcrumb untuk jalur tingkat teratas (domain atau nama host situs Anda), maupun untuk halaman itu sendiri.

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 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 wajib disertakan. 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`, `name` tidak wajib disertakan.
`position`	`Integer` Posisi breadcrumb dalam jejak breadcrumb. Posisi 1 menandakan awal jejak.

item

URL atau subjenis dari Thing

URL ke halaman 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 wajib disertakan. 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, name tidak wajib disertakan.

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.

Troubleshooting

If you're having trouble implementing or debugging structured data, here are some resources that may help you.

If you're using a content management system (CMS) or someone else is taking care of your site, ask them to help you. Make sure to forward any Search Console message that details the issue to them.
Google does not guarantee that features that consume structured data will show up in search results. For a list of common reasons why Google may not show your content in a rich result, see the General Structured Data Guidelines.
You might have an error in your structured data. Check the list of structured data errors and the Unparsable structured data report.
If you received a structured data manual action against your page, the structured data on the page will be ignored (although the page can still appear in Google Search results). To fix structured data issues, use the Manual Actions report.
Review the guidelines again to identify if your content isn't compliant with the guidelines. The problem can be caused by either spammy content or spammy markup usage. However, the issue may not be a syntax issue, and so the Rich Results Test won't be able to identify these issues.
Troubleshoot missing rich results / drop in total rich results.
Allow time for re-crawling and re-indexing. Remember that it may take several days after publishing a page for Google to find and crawl it. For general questions about crawling and indexing, check the Google Search crawling and indexing FAQ.
Post a question in the Google Search Central forum.

Data terstruktur breadcrumb (BreadcrumbList)

Ketersediaan fitur

How to add structured data

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

Troubleshooting

Data terstruktur breadcrumb (`BreadcrumbList`)

`BreadcrumbList`

`ListItem`