2 Cara Memasang Breadcrumb di Blogger

Cara Pasang Breadcrumb pada Blogger Valid Struktur Data Google

Breadcrumb adalah salah satu elemen penting yang harusnya dipasang pada setiap blog atau website, tidak terkecuali untuk platform Blogger (Blogspot). Sebelum membahas cara memasang Breadcrumb di blog, kita kenalan dulu deh sama si "jejak roti" ini.

1. Apa Itu Breadcrumb?

Pernah dengar cerita dongeng anak yang tokoh utamanya diculik lalu dia menaburkan remahan roti agar jejaknya bisa ditemukan oleh orang lain? YAK! Itu dia! Seperti arti harfiahnya (jejak roti), breadcrumb berfungsi sebagai petunjuk arah yang membuat pengunjung mengetahui dimana posisi mereka berada saat ini ketika membuka blog, website, atau dokumen.

Isinya berupa link yang terstruktur secara hierarki mulai dari halaman utama, kategori, sampai halaman yang sedang dibuka. Contoh penerapan breadcrumb yang umum adalah seperti ini:

Home › Blogger › Tutorial › Artikel Saat Ini

Masing-masing dari text tersebut berupa link aktif (kecuali yang terakhir) yang berfungsi sebagai jejak bagi pengunjung, yang ketika di-klik akan membawa ke halaman sebelumnya dengan cepat.

2. Pentingkah Breadcrumb?

Ya tentu saja ini penting karena berhubungan dengan SEO dan struktur data. Dia membuat blog memiliki navigasi yang jelas dan lebih mudah dibaca di halaman pencarian (SERP) Google. Pengunjung bisa dengan mudah melihat label atau kategori yang menjadi induk dari artikel tersebut.

Cara Pasang Breadcrumb SEO Friendly di Blogspot

3. Cek Breadcrumb pada Template

Setelah kenalan, sekarang saatnya kita memasang breadcrumb ke dalam template Blogger. Perlu diketahui, saat ini hampir semua template sudah ditambahkan breadcrumb oleh pembuatnya. Saya sendiri selalu menyisipkannya ke dalam semua template Blogger yang saya buat, baik yang gratis maupun premium. Namun tetap saja harus waspada, siapa tahu ternyata belum ada.

Untuk mengecek cukup menggunakan Google Structured Data Testing Tool yang bisa diakses melalui alamat berikut:

https://search.google.com/structured-data/testing-tool
  1. Masukkan alamat postingan ke dalam kolom yang tersedia. Ingat ya, halaman post lho, bukan homepage.
  2. Struktur breadcrumb ditandai dengan nama BreadcrumbList. Jika dipasang dengan benar maka tampilannya akan menunjukkan tulisan 0 ERRORS, 0 WARNING.
  3. Jika BreadcrumbList diklik akan menunjukkan info lebih lanjut mengenai itemListElement yang jumlahnya harus sama dengan jumlah label yang tersemat pada artikel plus 1 URL homepage. Contohnya artikel saya nih, dia memiliki 2 buah label yaitu Template dan Video. Maka harusnya jumlah itemnya ada 3, seperti gambar berikut.
jumlah BreadcrumbList = jumlah label + 1
Struktur Data Breadcrumb
Daftar Link di Breadcrumb

4. Cara Pasang Breadcrumb

Apakah template kamu sudah memiliki breadcrumb dan tidak ada yang error? Maka selamat, kamu tidak perlu cape-cape membaca tutorial ini. Berhenti dan tutuplah artikel ini karena tidak ada yang perlu diatur lagi. Namun jika ternyata tidak ada, atau ada tapi masih menunjukkan pesan kesalahan, silakan baca dan ikuti tutorial cara memasang breadcrum SEO friendly di Blogspot ini sampai habis tak tersisa.

Breadcrumb bisa dipasang melalui 2 metode berbeda, yaitu:

  • Microdata HTML
  • JSON-LD

Blog igniel.com akan mengupasnya satu-persatu untuk kalian semua.

4.1. Microdata HTML

Ini metode terpopuler yang umum digunakan oleh pemilik blog. Biasanya ditempatkan di atas judul postingan.

  1. Tambahkan dulu kode CSS berikut DI ATAS </style> atau ]]></b:skin>.

    /* Breadcrumb Blogger by igniel.com */
    .breadcrumb {
      margin-bottom: 20px;
    }
    .breadcrumb, .breadcrumb a, .breadcrumb a:hover {
      font-size: 12px; /* ukuran text */
      color: #777; /* warna text */
    }
  2. Cari kode berikut:

    <h1 class='entry-title'>

    Jika tidak ada, cari kode ini:

    <h2 class='entry-title'>

    Masih belum ada juga? Pokoknya cari elemen HTML yang memiliki id atau class entry-title.

  3. Tambahkan kode ini tepat DI ATAS kode yang disebutkan tadi.
    <!-- Breadcrumb Blogger by igniel.com -->
    <b:if cond='data:view.isPost'>
      <b:loop values='data:posts' var='post'>
        <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta content='1' itemprop='position'/>
            <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
              <span itemprop='name'>Home</span>
            </a>
          </span>
          <b:if cond='data:post.labels'>
            <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
              <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                <meta expr:content='data:num+2' itemprop='position'/>
                <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
                  <span itemprop='name'><data:label.name/></span>
                </a>
              </span>
            </b:loop>
            <b:else/>
            &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
          </b:if>
        </div>
      </b:loop>
    </b:if>
  4. Simpan semua pengaturan lalu lihat hasilnya. Kamu pun bisa mengubah letaknya asal masih dalam lingkup artikel. Struktur dan kode setiap template berbeda, tergantung si pembuatnya, jadi memang susah kalau dicontohkan dengan id atau class HTML tertentu.

Pada kode di atas, saya tidak menampilkan judul postingan yang sedang dibuka karena sebenarnya tidak dibutuhkan. Yang dibaca oleh Google hanyalah daftar link dari homepage dan label saja.

PRO

  • Berfungsi sebagai variasi tambahan yang dapat mempercantik halaman.
  • Pengunjung bisa langsung kembali ke halaman sebelumnya dengan cepat dengan meng-klik link yang ada.

KONTRA

  • Bagi yang menyukai desain sederhana dan minimalis, keberadaan link tambahan di atas judul ini kadang bisa mengganggu.
  • Tahapan yang lebih panjang ketika memasang script.

4.2. JSON-LD

Cara kedua tidak banyak dilakukan oleh pemilik blog. Entah kenapa, mungkin karena metode ini kurang terkenal. Berbeda dengan metode pertama, JSON-LD ini tidak akan tampil secara kasat mata karena scriptnya hanya bekerja di belakang layar tanpa menampilkan visual apapun.

Kamu mau coba metode yang tidak pasaran? Yuk silakan ikuti cara pasang Breadcrumb valid HTML5 berikut ini.

  1. Cari dulu kode ini:

    <data:post.body/>
  2. Tambahkan script berikut DI BAWAH kode yang tadi disebutkan.

    <!-- Breadcrumb Blogger by igniel.com -->
    <script type='application/ld+json'>{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "<data:blog.homepageUrl.canonical/>"
        <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
        {
          "@type": "ListItem",
          "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
          "name": "<data:label.name/>",
          "item": "<data:label.url.canonical/>"
          <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
      ]
    }</script>

PRO

  • Lebih efisien karena tidak tidak perlu menampilkan HTML apapun ke dalam halaman blog.
  • Script yang lebih pendek dan mudah dipasang.

KONTRA

  • Tidak terdapat link aktif yang bisa digunakan pengunjung untuk kembali ke halaman sebelumnya dengan cepat.

Keduanya memiliki kelebihan masing-masing. Sama bagusnya kok, kamu bisa memilih mana yang lebih disuka karena hasilnya sama saja di mata Google. Selama cara pasangnya benar dan struktur datanya valid, maka dia sudah SEO friendly.

5. Validasi

Setelah selesai dipasang, cek kembali agar kamu semakin yakin bahwa breadcrumb ini sudah benar dan valid. Kembali gunakan Google Structured Data seperti yang disebutkan pada langkah nomor 3 di atas.

Setelah itu, tunggu beberapa hari dan cek di Google Search Console. Kalau breadcrumb valid, maka laporannya akan muncul di sana, tepatnya di bawah menu Enhacements. Pastikan tidak ada yang error ya.

Breadcrumb JSON-LD Valid HTML5 dan W3C

Bagaimana, apa kamu sudah paham tentang semua langkah memasang Breadcrumb untuk Blogger valid Google di atas? Silakan berikan komentar jika ada yang belum jelas. Langsung praktekan di blog masing-masing ya.

Referensi:
https://developers.google.com/search/docs/data-types/breadcrumb
https://schema.org/BreadcrumbList

Artikel Terkait

52 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Dila
    27/4/22
    Profil: https://www.blogger.com/profile/07009375434002348453
    Akhir-akhir ini ada masalah dengan blog, cari solusi di google selalu nemu jawabannya di igniel. Makasih banget solusinya mba.
  • Nur Aida
    10/4/22
    Profil: https://www.blogger.com/profile/04822556581238023816
    Mantap nih bang, template blog nya pakai apa ya?
  • Tukang Maja
    9/12/21
    Profil: https://www.blogger.com/profile/15950070480270875189
    Gimana caranya biar breadcrumbs ditampilkan juga pada halaman, bukan cuma di postingan saja?
    • Igniel
      14/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode ini:
      <b:if cond='data:view.isPost'>
      Ganti jadi ini:
      <b:if cond='data:view.isSingleItem'>
  • Henky Nocan
    8/10/21
    Profil: https://www.blogger.com/profile/12265362912439858742
    Halo Master

    Saya coba pakai cara 2, pas save, error:

    org.xml.sax.SAXParseException; lineNumber: 2617; columnNumber: 1; Attribute name "expr:data-" associated with an element type "span" must be followed by the ' = ' character.

    Kenapa ya?

    Terima kasih
    Atas bantuannya
  • Puji Hartono
    20/6/21
    Profil: https://www.blogger.com/profile/17141580243954872127
    Mbak igniel,saya pakai tutorial ini,tapi bentuk permalink di hasil pencarian atau serp google jadi aneh

    Jadinya begini : Homepage-tanggal-judul postingan

    Harusnya kan : Homepage-label

    Ini kenapa ya mbak? Saya sudah hyapus breadcrumbs lama dan ganti dengan tutorial ini,terimakasih
  • yalla shoot
    8/5/21
    Profil: https://www.blogger.com/profile/03152739803722923525
    Is it possible to modify it so that only the first section appears?
  • Irwanda Rizky
    21/3/21
    Profil: https://www.blogger.com/profile/03196636693297520266
    mbak di template saya udah ada breadcrumb nya tapi saya tambahin kode biar ada tiga urutan contoh beranda > adsense > blogger, dan berhasil, tapi yang cuma pakai single label malah ikutan kenak jadinya kek gini, beranda > game > game, itu gmn ya cara benerinnya
  • Muhammad Reza
    13/2/21
    Profil: https://www.blogger.com/profile/03875569555809687067
    sya pakai tema bawaan blogger emporio kok ga bisa ya mba pencerahannya.............theme bawaan blogger contempo bisa
  • Mengapa Beda
    29/12/20
    Profil: https://www.blogger.com/profile/08028870350057858270
    Cari kode ini Om pada cara 1:

    kemudian tambahkan sesudahnya:
    &nbsp;›&nbsp;


    Semoga membantu
  • Maulana
    31/10/20
    Profil: https://www.blogger.com/profile/12969664024017018277
    Mbak Igniel, ini setelah saya terapkan hanya muncul Home>Nama Label. Tidak ada judul postingannya, hmm supaya ada judul postingannya itu gimana Mba? Home>Nama Label>Judul Postingan? Mohon penjelasannya terimakasih.
    • Igniel
      3/3/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pada artikel dijelaskan kalau judulnya memang sengaja nggak ditampilkan di breadcrumb karena Google nggak ngambil data itu.

      Dan menurut saya kurang bagus kalau ditampilkan. Teksnya jadi double sama judul postingan itu sendiri.
  • Maulana
    31/10/20
    Profil: https://www.blogger.com/profile/12969664024017018277
    Mbak
  • Affan Farizi
    21/7/20
    Profil: https://www.blogger.com/profile/17763913040980721887
    wah mantap mbak masalah breadcrumb saya solved, makasih
  • solusioperatormadrasah
    13/7/20
    Profil: https://www.blogger.com/profile/11803415273703238338
    Setelah mengedit HTML dan menekan SIMPAN, blog saya selalu muncul peringatan : com.google.ads.syn.auth.caller.AuthenticationException: USER_MISSING (soft error): Unable to load users: no AdSense user is associated with the Gaia ID. Itu apa masalahnya Mbak Igniel?
  • First Guardian
    26/6/20
    Profil: https://www.blogger.com/profile/12059417453824224704
    Saya memakai script bawaan template,tetapi labelnya otomatis diurutkan berdasarkan huruf awal (misal Home > a contoh > b contoh).Gimana yah biar bisa Home > b contoh > a contoh
    • Igniel
      3/3/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pada Blogger otomatis diurutkan secara alfabetis. Belum bisa tersusun menurun kaya WP gitu.
  • Tofan Bagues
    18/2/20
    Profil: https://www.blogger.com/profile/09174396430111061376
    kalau punya saya dicek di google search console muncul tulisan "Skema data-vocabulary.org" cara memperbaiki nya gimana ya gan?
    • Igniel
      18/2/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus dulu breadcrumb lama tsb. Lalu ganti pake versi di tutorial ini.
  • RonaldoSTG
    17/2/20
    Profil: https://www.blogger.com/profile/18076810191249484688
    berapa lama mbak pulih breadcrumbnya di google console?
    • Igniel
      18/2/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Harusnya semingguan udah mulai pulih.
  • Saka
    15/2/20
    Profil: https://www.blogger.com/profile/17049439865291872664
    di saya malah error hasilnya, panahnya malah ngumpul diakhir semua, seharusnya kan panahnya sebagai pembatas tiap label
    • Igniel
      15/2/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Berarti ada yang salah sama CSS template kamu.
      Hapus CSS dari breadcrumb sebelumnya.
  • DLS Kits 2022
    28/1/20
    Profil: https://www.blogger.com/profile/10349774926788550050
    makasih mbak...dah seminggu error masalah breadcrumbs...semoga setelah ikut tutorial bisa kembali pulih..
  • Misa
    26/1/20
    Profil: https://www.blogger.com/profile/14340217526686888794
    Mbak, saya sudah pasang breadcrumbs pake cara kedua, pas cek di structured data tadi g muncul seperti yang di screenshoot mbaknya. Apakah ada yang salah?
    • Igniel
      18/2/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan menyimpan TIDAK di dalam tag kondisional apapun.
  • sam
    23/1/20
    Profil: https://www.blogger.com/profile/14999565187240639370
    makasih bang,,,, pagi-pagi dpat email breadcrumbs,langsung ada tutor
  • hfzo
    22/1/20
    Profil: https://www.blogger.com/profile/15610788851769766732
    kan ada yang make http:// sedangkan tutor diatas make https:// di schema.org/breadcrumblist apakah sama?
    • Igniel
      22/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Langsung pakai https aja ya gapapa.
  • Admin
    22/1/20
    Profil: https://www.blogger.com/profile/04484131671721027173
    ada dua breadcrumb stelah pakai cara kedua sm test struktur data yaitu breadcrumblist dan breadcrumb. ada solusi ga ka ?
    • Igniel
      22/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus dulu breadcrumb yang lama. Lalu ganti pake yang ini.
  • Surya
    22/1/20
    Profil: https://www.blogger.com/profile/10789457999706244568
    saya menggunakan cara kedua, udh saya cek di web mastertools tetap saja. apakah harus menunggu 24 jam ?
    • Surya
      22/1/20
      Profil: https://www.blogger.com/profile/10789457999706244568
      oh, ya klau untuk wordpress gmana ?
    • Igniel
      22/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cara di atas khusus Blogspot karena pakai tag kondisional Blogspot.
      Kalau WP pakai plugin Yoast SEO aja biar praktis.
  • Munir
    14/12/19
    Profil: https://www.blogger.com/profile/15000904957935300437
    json ld kok gak muncul ya mbak? udah di ganti warna juga
    • Igniel
      14/12/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      JSON-LD nggak akan menampilkan visual apapun. Di dalam artikel udah dijelaskan.
  • kareelkun
    14/12/19
    Profil: https://www.blogger.com/profile/07335711473028855832
    Jelas dan mudah dimengerti artikelnya mbak, kalau pakai breadchumb type JSON-LD tetap dikenali search engines kan mbak?
    • Igniel
      14/12/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Dibanding microdata HTML, yang direkomendasikan Google justru JSON-LD.
      https://developers.google.com/search/docs/guides/intro-structured-data#markup-formats-and-placement
  • OKYA
    18/11/19
    Profil: https://www.blogger.com/profile/18087494182272408244
    Kok homenya ikut terindex ya?
    • Igniel
      18/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tunggu 1 bulanan sampe struktur yang baru dikenali Google.
    • OKYA
      18/11/19
      Profil: https://www.blogger.com/profile/18087494182272408244
      Oke makasih kak.
  • Jurnalis
    12/11/19
    Profil: https://www.blogger.com/profile/10668643000251508781
    Kayak label kak😱
    • Igniel
      19/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya memang diambil dari label kalo Blogger.
  • BloggerByte
    10/11/19
    Profil: https://www.blogger.com/profile/15294097425204953954
    dear igniel how can i learn designing like you.
    you're best developer I've ever seen.
    from - india
  • Andhika YP
    10/11/19
    Profil: https://www.blogger.com/profile/17746550355362561598
    Kok gk ada footer mbak?
    • Igniel
      10/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di template saya maksudnya? Ada. Di kiri. Bawah menu.
  • Wira Wijaya
    10/11/19
    Profil: https://www.blogger.com/profile/03617438150826346662
    Terima kasih mbak. Tutorialnya sukses saya terapkan di blog saya
    • Igniel
      10/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama-sama mas.
  • M. Limon
    10/11/19
    Profil: https://www.blogger.com/profile/07103600535159878470
    Where is footer in your template sister?
    • Admin X
      10/11/19
      Profil: https://www.blogger.com/profile/07008356750975509589
      turn left boi, cek version dekstop
    • Igniel
      10/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      What are you looking for in footer? It's on your left.
    • M. Limon
      10/11/19
      Profil: https://www.blogger.com/profile/07103600535159878470
      Sister can you make a tutorial on how to make header like Your Template...