Cara Memasang Breadcrumb di Blogger (Blogspot) - Seputar Web | Tips & Tricks Website dan Blogspot

Breadcrumb adalah elemen kontrol grafis yang sering digunakan sebagai bantuan navigasi dalam antarmuka pengguna dan pada halaman web.

 

Daftar isi

• 1 Apa yang dimaksud Breadcrumb?
• 2 Manfaat Breadcrumb
• 3 Cara cek Breadcrumb pada template
• 4 Cara Memasang Breadcrumb
  • 4.1 Microdata HTML
  • 4.2 JSON-LD
• 5 Validasi

1. Apa yang dimaksud Breadcrumb?

Breadcrumb adalah elemen kontrol grafis yang sering digunakan sebagai bantuan navigasi dalam antarmuka pengguna dan pada halaman web.

Hal ini memungkin bagi pengunjung untuk mengetahui atau melacak lokasi mereka dalam sebuah program ataupun pada sebuah website. Contoh penerapan Breadcrumb seperti contoh dibawah ini:

Home › Blogger › Artikel Saat Ini

Masing-masing dari text diatas merupakan link aktif (kecuali text terakhir yang merupakan posisi atau lokasi saat ini berada) yang mana link tersebut akan membawa kita dengan lebih cepat menuju halaman sebelumnya.

2. Manfaat Breadcrumb

Setelah kamu sudah mengenal apa itu breadcrumb, maka saat nya kita

3. Cara cek Breadcrumb pada template

Setelah kamu sudah mengenal apa itu breadcrumb, maka saat nya kamu perlu memasang pada template website. Kebanyakan template yang ada saat ini sudah terdapat breadcrum di dalamnya, namun tidak ada salahnya kita berjaga-jaga untuk meyakinkan benarkah sudah terpasang breadcrumb pada template kita.

Untuk mengeceknya cukup menggunakan Google Structured Data Testing Tool yang bisa diakses melalui link dibawah ini:

https://search.google.com/structured-data/testing-tool

1. Masukkan alamat post atau artikel yang ingin kamu cek (bukan link homepage) pada kolom yang disediakan.
2. Struktur Breadrumb ditandai dengan kata BreadcrumbList. Jika itu terpasang dengan benar maka akan ditampilkan dengan 0 ERRORS, 0 WARNING.
3. Jika BreadcrumbList kamu klik maka akan menampilkan rincian lebih lanjut mengenai itemListElement yang mana jumlahnya harus sama dengan jumlah label yang tersemat plus dengan url Homepage. Contoh pada artikel saya ini terdapat label Blogger, Maka jumlah itemnya haruslah 2.

jumlah BreadcrumbList = jumlah label + 1

4. Cara Memasang Breadcrumb

...isi paragraf empat

4.1 Microdata HTML

Cara ini merupakan yang paling populer digunakan oleh pemilik blog. Breadcrumb biasa ditempatkan diatas judul dari artikel atau postingan.

1. Tambahkan code CSS berikut diatas code <style> atau ]]></b:skin>

.breadcrumb {
margin-bottom: 20px;
}
.breadcrumb, .breadcrumb a, .breadcrumb a:hover {
font-size: 12px; /* ukuran text */
color: #777; /* warna text */
}

2. Cari code berikut ini:

   <h1 class='entry-title'>

   atau code ini:

   <h2 class='entry-title'>

3. Tambahkan code berikut tepat diatas code yang disebutkan tadi:

   <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'>
           <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
           <meta content='1' itemprop='position'/>
           <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 lalu kamu lihat hasilnya

4.2 JSON-LD

saksjakjska

1. Cari code berikut:

   <data:post.body/>

2. Tambahkan script berikut di Bawah code yang disebutkan tadi:

   <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>

   Kelebihan

• sajsahjas
• sahjshaj
  

Kekurangan

• shajhaj
• sajksajk
  

5. Validasi

...isi paragraf enam

Related Posts