2 Cara Memasang Breadcrumb di Blogger

Cara membuat dan mengatur Breadcrumb di Blogger (Blogspot) yang valid struktur data Google agar postingan jadi SEO friendly dan navigasi lebih jelas.
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
64
2 Cara Memasang Breadcrumb di Blogger
2 Cara Memasang Breadcrumb di Blogger
Cara membuat dan mengatur Breadcrumb di Blogger (Blogspot) yang valid struktur data Google agar postingan jadi SEO friendly dan navigasi lebih jelas.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

64 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Reza Noprial Lubis
    02 September, 2023
    Profil: https://www.blogger.com/profile/08563174465694082206
    Label secara otomatis menyesuaikan abjad. Terkadang, itu tidak sesuai dengan yang diharapkan mbak. Gimana ngatasinya?
    • Igniel
      02 September, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau di Blogspot memang diurutkan sesuai abjad karena banyak keterbatasan.
    • Reza Noprial Lubis
      02 September, 2023
      Profil: https://www.blogger.com/profile/08563174465694082206
      Terimakasih respon cepatnya. Tetapi, hasil index halaman mbak seperti ini: www.igniel.com > SEO > Blogger

      Kelihatannya tidak sesuai abjad.
  • Syahputra
    25 April, 2023
    Profil: https://www.blogger.com/profile/09716834624340042494
    Mana tau ada yang gagal coba di link ink
    https://bloggasfull.blogspot.com/2023/04/cara-buat-breadcrumbs-di-blogger.html?m=1
  • Admin
    06 November, 2022
    Profil: https://www.blogger.com/profile/00567666684075915225
    untuk schema org di blog gmn ya? ini pasang code di postingan atau di dalam thema? misal blog untuk review
    • Igniel
      07 November, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di dalam tema (HTML).
    • Admin
      07 November, 2022
      Profil: https://www.blogger.com/profile/00567666684075915225
      jadi, jika ingin blog kita review makanan atau produk gitu, atau review film, apakah di tema juga dimasukkan semua kebutuhan schema markup?

      blog nya amburadul jadi di isi nya juga sebanyak mungkin tema markup begitu kah?

      klo punya Igniel kan di test sudah benar semua (dalam artian blogposting)

      baiknya bagaimana jika blog nya gado gado = ada cerita, ada review hp, ada review buku, dll
    • Fanny Sansiro
      30 Agustus, 2023
      Profil: https://www.blogger.com/profile/01454861689799828620
      Kalau seperti itu baiknya dimasukkan dalam post template, Min. Sekaligus untuk manipulasi tiap itemnya (review, star, content, dll - tergantung skema apa) hingga menjadi schema yang dibutuhkan.
  • Max Ikhsan
    13 Juni, 2022
    Profil: https://www.blogger.com/profile/05188570730581861786
    Nice Post, jadi bisa ngatasin masalah breadcrumb di blog aku, makasih min.
  • Dila
    27 April, 2022
    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 April, 2022
    Profil: https://www.blogger.com/profile/04822556581238023816
    Mantap nih bang, template blog nya pakai apa ya?
    • Igniel
      18 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bikin sendiri kak. Gak ada namanya.
    • Admin
      09 Maret, 2023
      Profil: https://www.blogger.com/profile/01826858798679391700
      bisa bagi2 gak min tempatenya..
    • Igniel
      09 Maret, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Enggak min.
  • Tukang Maja
    09 Desember, 2021
    Profil: https://www.blogger.com/profile/15950070480270875189
    Gimana caranya biar breadcrumbs ditampilkan juga pada halaman, bukan cuma di postingan saja?
    • Igniel
      14 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode ini:
      <b:if cond='data:view.isPost'>
      Ganti jadi ini:
      <b:if cond='data:view.isSingleItem'>
    • Tukang Maja
      09 November, 2022
      Profil: https://www.blogger.com/profile/15950070480270875189
      Maksud saya kode json nya gan..
  • Henky Nocan
    08 Oktober, 2021
    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 Juni, 2021
    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
  • Unknown
    08 Mei, 2021
    Profil: https://www.blogger.com/profile/03152739803722923525
    Is it possible to modify it so that only the first section appears?
  • Irwanda Rizky
    21 Maret, 2021
    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 ALF.
    13 Februari, 2021
    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 Desember, 2020
    Profil: https://www.blogger.com/profile/08028870350057858270
    Cari kode ini Om pada cara 1:

    kemudian tambahkan sesudahnya:
    &nbsp;›&nbsp;


    Semoga membantu
  • Maulana
    31 Oktober, 2020
    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
      03 Maret, 2021
      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 Oktober, 2020
    Profil: https://www.blogger.com/profile/12969664024017018277
    Mbak
  • Affan Farizi
    21 Juli, 2020
    Profil: https://www.blogger.com/profile/17763913040980721887
    wah mantap mbak masalah breadcrumb saya solved, makasih
  • solusioperatormadrasah
    13 Juli, 2020
    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 Juni, 2020
    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
      03 Maret, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pada Blogger otomatis diurutkan secara alfabetis. Belum bisa tersusun menurun kaya WP gitu.
  • Tofan Bagues
    18 Februari, 2020
    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 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus dulu breadcrumb lama tsb. Lalu ganti pake versi di tutorial ini.
  • RonaldoSTG
    17 Februari, 2020
    Profil: https://www.blogger.com/profile/18076810191249484688
    berapa lama mbak pulih breadcrumbnya di google console?
    • Igniel
      18 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Harusnya semingguan udah mulai pulih.
  • Dream League Soccer Kits Team
    28 Januari, 2020
    Profil: https://www.blogger.com/profile/10349774926788550050
    makasih mbak...dah seminggu error masalah breadcrumbs...semoga setelah ikut tutorial bisa kembali pulih..
  • Misa
    26 Januari, 2020
    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 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan menyimpan TIDAK di dalam tag kondisional apapun.
  • sam
    23 Januari, 2020
    Profil: https://www.blogger.com/profile/14999565187240639370
    makasih bang,,,, pagi-pagi dpat email breadcrumbs,langsung ada tutor
  • hfzo
    22 Januari, 2020
    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 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Langsung pakai https aja ya gapapa.
  • Admin
    22 Januari, 2020
    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 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus dulu breadcrumb yang lama. Lalu ganti pake yang ini.
  • Surya
    22 Januari, 2020
    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 Januari, 2020
      Profil: https://www.blogger.com/profile/10789457999706244568
      oh, ya klau untuk wordpress gmana ?
    • Igniel
      22 Januari, 2020
      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 Desember, 2019
    Profil: https://www.blogger.com/profile/15000904957935300437
    json ld kok gak muncul ya mbak? udah di ganti warna juga
    • Igniel
      14 Desember, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      JSON-LD nggak akan menampilkan visual apapun. Di dalam artikel udah dijelaskan.
  • kareelkun
    14 Desember, 2019
    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 Desember, 2019
      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 November, 2019
    Profil: https://www.blogger.com/profile/18087494182272408244
    Kok homenya ikut terindex ya?
    • Igniel
      18 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tunggu 1 bulanan sampe struktur yang baru dikenali Google.
    • OKYA
      18 November, 2019
      Profil: https://www.blogger.com/profile/18087494182272408244
      Oke makasih kak.
  • Jurnalis
    12 November, 2019
    Profil: https://www.blogger.com/profile/10668643000251508781
    Kayak label kak😱
    • Igniel
      19 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya memang diambil dari label kalo Blogger.
  • R. Ghunawat
    10 November, 2019
    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 November, 2019
    Profil: https://www.blogger.com/profile/17746550355362561598
    Kok gk ada footer mbak?
    • Igniel
      10 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di template saya maksudnya? Ada. Di kiri. Bawah menu.
  • Wira Wijaya
    10 November, 2019
    Profil: https://www.blogger.com/profile/03617438150826346662
    Terima kasih mbak. Tutorialnya sukses saya terapkan di blog saya
  • M. Limon
    10 November, 2019
    Profil: https://www.blogger.com/profile/07103600535159878470
    Where is footer in your template sister?
    • Admin X
      10 November, 2019
      Profil: https://www.blogger.com/profile/07008356750975509589
      turn left boi, cek version dekstop
    • Igniel
      10 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      What are you looking for in footer? It's on your left.
    • M. Limon
      10 November, 2019
      Profil: https://www.blogger.com/profile/07103600535159878470
      Sister can you make a tutorial on how to make header like Your Template...