Cara Membuat Breadcrumb di Blog Agar Tampil SEO

Membuat Breadcrumb agar lebih SEO Friendly di Blog

Breadcrumb

Hari ini carablog update kembali setelah sebelumnya membahas mengenai bagaimana cara membuat artikel terkait menjadi keren dan SEO. Di pembahasan kali ini akan membuat breadcrumb bi blog, yang pastinya akan menjadikan tampilan blog menjadi keren dan lebih SEO Friendly. Cara nya pun sangat mudah dan bisa di lakukan walau teman-teman tidak paham dengan kode HTML.

Sebelum melangkah ke cara membuat breadcrumb alangkah baiknya untuk mengetahui kegunaan dari breadcrumb ini. Breadcrumb sendiri adalah menu navigasi yang terlihat kecil yang biasanya ada pada judul artikel.

Kegunaan Breadcrumb di Blog

1. Berguna untuk melihat tempat artikel yang saat ini kita lihat.
2. Berguna agar blog mudah untuk di crawl dan di index oleh google atau lainnya
3. Membuat tampilan  blog terlihat profesional dan lebih SEO
4. Memudahkan pembaca atau pengunjung untuk kembali ke Home atau ke artikel yang terkait dengan yang kita baca. Sama halnya dengan label dan Artikel Terkait. Bisa di baca di Cara membuat tampilan artikel terkait dan cara membuat label menjadi keren.

Stelah mengetahui kegunaannya dan manfaatnya sekarang mari kita ke materi langsung untuk membuat breadcrumb ini dan pastikan membacanya pelan-pelan dan pahami agar saat mempraktekkannya tidak mengalami kesulitan dan kesalahan yang membuat kode tersebut tidak bisa terpasang dan berfungsi. Contoh breadcrumb yang akan di buat

Tampilan Breadcrumb yang Akan di Buat

Inilah Cara Membuat Breadcrumb Pada Blog

1. Masuk blogger teman teman dan langsung menuju ke Template > Edit HTML
2. Setelah masuk cari kode ]]></b:skin>
3. Kemudian masukkan kode di bawah ini di atas kode yang telah di cari tadi

.breadcrumbs{width:auto; padding: 5px 0; color: #666; border-bottom: 1px dotted #ccc;; font-size:12px; font-weight:400;margin-top:5px}

4. Belum sampai disitu, cari lagi kode ini <b:includable id='main' var='top'>
5. Dan ganti lah kode yang telah di cari sebelumnya dan ganti dengan kode berikut

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

6. Saat semua nya telah dilakukan save template teman-teman dan lihalah hasilnya dengan cara klik pratinjau template atau lihat blog juga boleh.
7. Bila bila berhasil maka tampilannya akan seperti pada gambar sebelumnya di atas. Selamat mempraktekkan.

Itulah bagaimana cara membuat Breadcrumb di blog, semoga bermanfaat dan dapat di praktekkan dengan baik, pada artikel berikutnya penulis akan update kembali mengenai artikel ini dan yang pastinya berbeda dengan sebelumnya, jadi tetap di blog kami ya agar selalu update dan tidak ketinggalan.