Menerapkan Breadcrumb Navigation Pada Judul Artikel

Bisa jadi Anda sudah tidak asing lagi dengan istilah Breadcrumb Navigation atau label berurutan dalam sebuah blog yang menyatakan tautan untuk beranda, kategori artikel, serta judul artikel. Breadcrumb Navigation selain dapat digunakan untuk mempermudah dalam melakukan navigasi, juga memberikan kemudahan bagi pengunjung untuk mengetahui posisinya dalam sebuah blog.

Jika pada umumnya fasilitas tersebut diterapkan dengan menempatkannya di atas atau di bawah judul artikel, maka dalam artikel ini saya akan menguraikan cara yang digunakan untuk menerapkan Breadcrumb Navigation langsung pada judul artikel yang diterbitkan seperti yang tampak pada contoh gambar di bawah ini.

Screenshot: eltelu.blogspot.com

Selain dirasa akan lebih efektif, dengan menerapkan Breadcrumb Navigation seperti yang terdapat dalam uraian ini nantinya juga akan berdampak terhadap SEO (Search Engine Optimization). Dampak yang dimaksud di sini adalah, bahwasanya setiap label yang digunakan untuk mengkategorikan setiap artikel pun akan dapat terindeks oleh mesin telusur seperti yang tampak pada gambar contoh di bawah ini.

Screenshot: google.co.id

Seperti yang tampak pada gambar di atas, dapat dilihat bahwa bagian yang ditunjukkan dengan tanda anak panah adalah label atau kategori artikel yang ikut terindeks dan kemudian ditampilkan oleh mesin telusur dalam SERP (Search Engine Result Page).

Lantas bagaimana cara yang digunakan untuk menerapkan dan memanfaatkan fasilitas ini? Caranya cukup mudah karena secara prinsip serupa dengan penambahan bingkai untuk mempercantik judul artikel, yaitu dengan menyisipkan beberapa script tertentu ke dalam template blog yang digunakan. Dan langkah-langkahnya adalah sebagai berikut:

1. Login ke akun Blogger Anda.
2. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
3. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
4. Centang pilihan ‘Expand Template Widget’.
5. Cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.
   

   .breadcrumbs {
   margin: 0px;
   padding: 0px; 
   }

   
   
6. Cari kode <b:includable id='main' var='top'> dan kemudian sisipkan kode berikut ini tepat di atasnya.
   

   <b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='text-align: justify;'>
     <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
         <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
           <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a></span>
             <b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.isLast == &quot;true&quot;'>
                 &gt; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
               </b:if>
             </b:loop>
             &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span>
         </div>
       <b:else/>
         <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &gt; <span>Unlabelled</span> &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span></div>
      </b:if>
     </b:loop>
   </div>
   </b:if>
   </b:includable>

   
   
7. Cari kode <b:includable id='post' var='post'> dan kemudian perhatikan bahwa di bawahnya terdapat kode <h3 class='post-title entry-title'> yang secara default adalah seperti di bawah ini.
   

   <h3 class='post-title entry-title'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
           <b:if cond='data:post.url'>
             <b:if cond='data:blog.url != data:post.url'>
               <a expr:href='data:post.url'><data:post.title/></a>
             <b:else/>
               <data:post.title/>
             </b:if>
           <b:else/>
             <data:post.title/>
           </b:if>
         </b:if>
         </h3>

   
   
8. Ganti <data:post.title/> yang terdapat pada kode tersebut dengan <b:include data='posts' name='breadcrumb'/> yang akhirnya menjadi seperti kode di bawah ini.
   

   <h3 class='post-title entry-title'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
           <b:if cond='data:post.url'>
             <b:if cond='data:blog.url != data:post.url'>
               <a expr:href='data:post.url'><data:post.title/></a>
             <b:else/>
               <b:include data='posts' name='breadcrumb'/>
             </b:if>
           <b:else/>
             <b:include data='posts' name='breadcrumb'/>
           </b:if>
         </b:if>
         </h3>

   
   
9. Simpan template Anda.

Nah, bagaimana? Mudah bukan? Jika Anda tertarik untuk menggunakan dan memanfaatkannya, maka silakan mencoba menerapkannya pada blog yang Anda kelola.