Breadcrumbs Valid HTML5 SEO Friendly

Sudah sekitar satu minggu saya tidak bisa mengakses internet, dan akhirnya saya akan membuat suatu postingan tentang salah satu komponen penting saat anda ingin membangun sebuah template.              Breadcrumbs memang salah satu bagian penting dalam template karena breadcrumbs membantu untuk menampilkan tentang informasi indeks postinganmu dan kategori dari postinganmu, tentu saja hal ini akan meningkatkan SEO ( Search Engine Optimalization ) pada blog anda.

Menggunakan breadcrumbs memiliki beberapa manfaat bagi pengunjung maupun search engine ( faktor SEO ) seperti yang telah saya katakan sebelumnya, namun jika kita lebih rincikan keuntungannya maka akan seperti berikut.

Keuntungan Bagi Para Pengunjung 

• 1. Menunjukan kategori apa yang sesuai dengan postingan yang ia buka
• 2.memberikan tanda dan mengetahui di bagian mana pengunjung web atau blog kita saat berada dalam web atau blog kita, selain itu untuk mengikuti kembali ke halaman utama atau kategori lainnya.
• 3.Memudahkan navigasi pengunjung untuk berpindah dari satu halaman ke halaman lainnya

Keuntungan Bagi Pemilik Blog

• 1. Mempercepat indeks dari google search engine
• 2. Mempermudah "calon pengunjung " untuk melihat kategori dari postingan yang ingin ia carijika kita mengunjungi google search engine untuk mencari sesuatu pastinya salah satu hal yang penting adalah melihat label/kategori postingan tersebut, karena kita akan mampu mengetahui postingan itu sesuai dengan keinginan kita atau tidak.
• 3. Menurunkan Bounce Ratedengan adanya breadcrumbs di blog kita, maka pengunjung akan mudah untuk bernavigasi sehingga pengunjung tidak hanya mengunjungi satu postingan tapi akan melihat postingan kita lainnya tentu ini akan menurunkan bounce rate blog kita.
  Read More : Cara Menurunkan Bounce Rate Di Blog

Banyak sekali Breadcrumbs bertebaran di internet namun breadcrumbs satu ini merupakan salah satu yang terbaik karena valid HTML5 dan SEO friendly.

cara pemasangan di blog

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode ]]></b:skin> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi

.breadcrumbs a:hover, .status_msg a:hover {text-decoration: underline;}.breadcrumbs a, .status_msg a {color:#5B5B5B;}.breadcrumbs, .status_msg {width: 720px;background: #FEFFE;-webkit-box-shadow: 0 0 15px #222;-moz-box-shadow: 0 0 15px #222;box-shadow: 0 0 10px #888;-moz-border-radius: 4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;padding: 10px;margin-top: 2px;font-size: 10px;margin-bottom: 25px;text-transform: uppercase;color: #666;} 

Step 5  Sekarang cari kode yang mirip dengan <b:includable id='main' var='top'>

 Step 6  Selanjutnya ganti kode  <b:includable id='main' var='top'> tadi 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'/>

Step 7  Simpan lalu cek bog anda untuk melihat hasilnya


Jika anda memiliki breadcrumbs di blog anda ,anda cukup mengahpus kodenya (kurang  lebih seperti kode yang ada di breadcrumbs ini ). Namun jika anda hanya ingin membuat breadcrumbs lama anda menjadi valid HTML5 dan SEO friendly maka anda bisa membaca prosedur lengkapnya di postingan sumber
klik disini

Saya harap anda berhasil memasang breadcrumbs ini,dan dapatkan hasil yang memuaskan ,sekian postingan saya wassalamualaikum wr.wb.