Breadcrumb

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

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. Untuk panduan langkah demi langkah tentang cara menambahkan data terstruktur ke halaman web, lihat codelab data terstruktur.

  1. Tambahkan properti wajib. Berdasarkan format yang Anda gunakan, pelajari tempat menyisipkan data terstruktur 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 pada masa mendatang, sebaiknya Anda mengirimkan 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, "2014 Nebula Award best novel", dapat menghasilkan breadcrumb berikut:

Books › Science Fiction › Award Winners

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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 adalah jejak breadcrumb yang mengarah ke halaman untuk buku pemenang award:

Books › Science Fiction › Award Winners

Berikut adalah jejak breadcrumb yang mengarah ke halaman yang sama:

Literature › Award Winners

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">
          <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">
            <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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://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 minimal dua ListItems. Anda harus menyertakan properti wajib agar konten Anda memenuhi syarat untuk ditampilkan dengan breadcrumb.

BreadcrumbList adalah item container yang menampung semua elemen dalam daftar. Definisi lengkap BreadcrumbList tersedia di schema.org/BreadcrumbList.

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"
  }]
}

ListItem

ListItem berisi detail tentang masing-masing item dalam daftar. Definisi lengkap ListItem tersedia di schema.org/ListItem.

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.

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
  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, akan ada 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 atau mendebug data terstruktur, berikut beberapa referensi yang dapat membantu Anda.