ba5710ab89f8b9785b59892e3f42485a60c031ba33d1789fd68ba447482eb3e21df77c321b12fdc7

Cara Pasang Breadcrumb Di Blogger

kareelkunPhoto Ditulis oleh kareelkun
Diposting
4 Comments
Diperbarui
Cara Pasang Breadcrumb Di Blogger
Bagi sobat blogger baru terjun ke dunia blog, istilah breadcrumbs mungkin terasa asing di telinga. Padahal istilah tersebut perlu dipelajari sebagai blogger pemula. Lalu kenapa harus dipelajari? tentu itu karena pengaruh breadcrumbs terhadap pengunjung sebagai navigasi dan juga sebagai salah satu aturan dasar pada mesin pencarian moderen saat ini. Kenapa menjadi aturan dasar pada mesin pencarian? simplenya untuk memberikan informasi navigasi dari hasil pencarian ke pada pengguna. Semakin lengkap informasi hasil pencarian dapat memudahkan dan menambah minat pengguna mesin pencarian untuk berkunjung ke blog yang sudah ada breadcrumb.

Sebelum ke topik pembahasan ada baiknya tau tentang Breadcrumb. Kareel Blog akan akan memberikan penjelasan mengenai apa itu breadcrumb. Sobat blogger bisa menemukan definisi, fungsi, pentingnya breadcrumb untuk SEO, serta cara menambahkan ke blogger khususnya blogspot.


Apa Itu Breadcrumb?

Breadcrumb atau breadcrumb list adalah elemen kontrol grafis yang sering digunakan sebagai bantuan navigasi dalam antarmuka pengunjung pada halaman web. Ini memungkinkan pengunjung untuk melacak dan menjaga lokasi pengunjung dalam situs web.
Sobat blogger dapat menemukan contoh breadcrumb seperti screenshoot dibawah ini bergaris merah sebagai navigasi memudahkan pengunjung untuk mengetahui lokasi saat ini:


Dari screenshoot diatas Kareel Blog harapkan sobat blogger mulai mengerti apa itu breadcrumb. Breadcrumb juga masuk kedalam kegiatan komunitas kolaboratif dengan misi untuk membuat, memelihara, dan mempromosikan skema data terstruktur biasa sering disebut Schema.org dengan sumber schema.org/breadcrumb. Dari sumber tersebut terdapat beberapa jenis breadcrumb, salah satunya element BreadcrumbList yang menjadi aturan standar pada mesin pencarian.

Apa Fungsi Breadcrumb?

Breadcrumb berfungsi sebagai navigasi lokasi pengunjung. Lebih jelasnya memudahkan pengunjung untuk mengetahui lokasi ia berada di halaman mana. Dan dengan breadcrumb pengunjung tidak perlu mengulangi navigasi dari awal untuk menemukan artikel dengan topik yang sama pada blog. Pengunjung hanya perlu memilih lamaan navigasi breadcrumb untuk kembali ke halaman sebelumnya diakses.

Seberapa Penting Breadcrumb Ke Pengunjung?

Hampir semua mesin pencarian saat ini memerlukan breadcrumb sebagai salah satu aturan dasar untuk memberikan informasi lengkap halaman tujuan. Oleh karena itu, Pengguna blogger dan website berbondong-bondong memasang breadcrumb sebagai salah satu trik SEO mendatangkan pengunjung. Bagi yang memahami HTML pasti sangat mudah melatkan element breadcrumb pada tema blogger. Namun bagi yang tidak tau HTML perlu bantuan tema blogger yang sudah terpasang element breadcrumb. Sebuah blog tanpa element breadcrumb dihasil pencarian seperti google akan ditampilkan alamat url halaman saja. Tanpa ada judul halaman yang sudah terpasang breadcrumb jadi minat pengunjung akan turun jika tanpa breadcrumb.

Cara Memasang Breadcrumb Di Blogger

Kembali ke topik, Kareel Blog akan membagikan cara memasang breadcrumb di blogger khususnya blogspot. Dikarnakan mesin pencarian google paling sering digunakan jadi ikuti saja aturan mesin tersebut. Jenis breadcrumb yang direkomendasikan oleh google adalah memasang element JSON-LD Breadcrumb. Ikuti langkah demi langkah dibawah ini:
  1. Masuk ke Dashboard Blogger
  2. Pilih menu Tema makan akan diarahkan ke halaman tema
  3. Pada halaman tema cari dan klik Edit HTML Tema. Maka akan diarahkan ke jendela edit HTML tema
  4. Dalam jendela edit HTML, cari kode berikut ini
    <b:includable id='breadcrumb' var='posts'>
    
    jika ketemu hapus kode setelah kode diatas sampai penutupnya kode dibawah ini:
    </b:includable>
    
    contoh lengkapnya seperti dibawh ini:
    <b:includable id='breadcrumb' var='posts'>
    <!-- KODE DALAM SINI YANG DIHAPUS -->
    </b:includable>
    
    Ganti kode dihapus diatas (warna merah) dengan kode dibawah ini:
    <nav aria-label='breadcrumb'>
    <b:if cond='data:view.isPost'>
    <b:loop values='data:posts' var='post'>
    <script type='application/ld+json'>
    {
      	 &quot;@context&quot;: &quot;https://schema.org&quot;,
         &quot;@type&quot;: &quot;BreadcrumbList&quot;,
         &quot;itemListElement&quot;:
      [
      {
           &quot;@type&quot;: &quot;ListItem&quot;,
           &quot;position&quot;: 1,
           &quot;name&quot;: &quot;<data:messages.home/>&quot;,
           &quot;item&quot;: &quot;<data:blog.homepageUrl/>&quot;
      },
    <b:if cond='data:post.labels'><b:loop index='no' values='data:post.labels' var='label'><b:if cond='data:no != 0'>,</b:if>
      {
           &quot;@type&quot;: &quot;ListItem&quot;,
           &quot;position&quot;: <b:eval expr='2 + data:no'/>,
           &quot;name&quot;: &quot;<data:label.name/>&quot;,
           &quot;item&quot;: &quot;<data:label.url/>?max-results=6&quot;
      }
    </b:loop><b:else/>{&quot;@type&quot;: &quot;ListItem&quot;,&quot;position&quot;: 2,&quot;name&quot;: &quot;Unlabelled&quot;,&quot;item&quot;: &quot;<data:blog.homepageUrl/>search/label/?max-results=6&quot;}</b:if>
      ]
      }
    </script>
    <ol class='breadcrumb'>
    <li class='breadcrumb-item'><a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><span><data:messages.home/></span></a> </li>
    <b:if cond='data:post.labels'>
    <b:loop index='no' values='data:post.labels' var='label'>
    <li class='breadcrumb-item'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name'><span><data:label.name/></span></a> </li>
    </b:loop>
    <b:else/>
    <li class='breadcrumb-item'><a href='/search/label/?max-result=8' title='Unlabelled'><span>Unlabelled</span></a> </li>
    </b:if>
    <li aria-current='page' class='breadcrumb-item active'><span><data:post.title/></span></li>
    </ol>
    </b:loop>
    <b:elseif cond='data:view.isPage'/>
    <script type='application/ld+json'>
    {
      	 &quot;@context&quot;: &quot;https://schema.org&quot;,
         &quot;@type&quot;: &quot;BreadcrumbList&quot;,
         &quot;itemListElement&quot;:
      [
      {
           &quot;@type&quot;: &quot;ListItem&quot;,
           &quot;position&quot;: 1,
           &quot;name&quot;: &quot;<data:messages.home/>&quot;,
           &quot;item&quot;: &quot;<data:blog.homepageUrl/>&quot;
      },
      {
           &quot;@type&quot;: &quot;ListItem&quot;,
           &quot;position&quot;: 2,
           &quot;name&quot;: &quot;<data:blog.pageName/>&quot;,
           &quot;item&quot;: &quot;<data:blog.url/>&quot;
      }
      ]
      }
    </script>
    <small>
    <ol class='breadcrumb'>
    <li class='breadcrumb-item'><a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><span><data:messages.home/></span></a> </li>
    <li aria-current='page' class='breadcrumb-item active'><a expr:href='data:blog.url' expr:title='data:blog.pageName'><span><data:blog.pageName/></span></a></li>
    </ol>
    </small>
    </b:if>
    </nav>
    
  5. Simpan edit HTML
Keterangan:
  • Jenis Breadcrumbs yang digunakan adalah JSON-LD yang direkomendasikan mesin pencarian google (Cek disini)
  • Pada point nomor 4 pencarian tidak ditemukan artinya tema yang sobat gunakan saat ini atribut tag conditional berbeda
  • Style CSS diatas menggunakan componen breadcrumbs boostrap dengan daftar class .breadcrumb, .breadcrumb-item, .active

Penutup

Demikian artikel Cara Pasang Breadcrumb Di Blogger kareel blog bagikan, semoga artikel ini bermanfaat bagi sobat semua.

View: - Tags: Blogger, SEO, Tutorial

Posting Komentar