Breadcrumbs SEO Friendly dan Valid HTML5

Breadcrumbs SEO Friendly dan Valid HTML5

Memasang Navigasi Breadcrumbs merupakan salah satu cara untuk optimasi SEO, dengan memasangnya akan memudahkan pengunjung dan Mesin Pencari dalam menjelajahi blog Anda. Navigasi Breadcrumbs sangat penting untuk sebuah blog, oleh karena itu Breadcrumbs ini harus SEO agar data dapat tampil pada mesin pencari.

Breadcrumbs adalah sebuah peta dimana dan di kategori apa artikel yang kita buat di publikasikan. Adanya navigasi breadcrumbs pada blog akan memudahkan pengunjung untuk menjelajahi blog Anda, dengan begitu pengunjung dapat mengetahui dimana dan pada kategori apa artikel tersebut dipublikasikan.

Pada breadcrumbs ini sudah Saya tambahkan title tag pada labelnya sehingga lebih SEO. Untuk pemasangan navigasi breadcrumbs silakan disimak baik - baik :D

Langkah Pertama

Silakan Anda simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>.
.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah Kedua

Silakan Anda cari kode dibawah ini pada template Anda.
<b:includable id='main' var='top'>
Kemudian Anda ganti dengan dengan kode dibawah ini.
<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' title='Beranda'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<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' title='Beranda'><span itemprop='title'>Beranda</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' expr:title='data:label.name' 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' title='Beranda'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Arsip untuk <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' title='Beranda'>Beranda</a></span> &#187; <span>Semua posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Penelusuran <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'/>

Bagi Anda yang ingin membatasi jumlah artikel pada label breadcrumbs silakan baca artikel berjudul Membatasi Jumlah Artikel Pada Label Blog.

Artikel Terkait

Komentar

Anonim
Saya juga telah menerapkannya kedalam blog saya gan hehe
Nice post and info (y)
Kang Mousir
sip gan, memang wajib Navigasi Breadcrumbs yang satu ini ;)
Imam Zw
Sebenernya navigasi breadcrumbs kayak gini gak terindex URL nya oleh search engine. Tapi entah kenapa bisa SEO :3
Kang Mousir
Kata siapa ? Namanya juga SEO Friendly ya pasti ke index, lihat tuh gambar diatas.

SEO karena breadrumbs ini ditambahkan Microdata Format ;)
Dian AnaR-chyta
Setelah saya cek di template ternyata sama kang..
Makasih atas infonya :-d
Asrizal Wahdan Wilsa
Komentar ini telah dihapus oleh pengarang.
Kang Mousir
Sip kalau Breadcrumbsnya sudah SEO :D
Hand Excel
Breadcrumbs itu apaan ya saya kok gak paham hehe :D
Kang Mousir
Itu loh yang ada diatas judul artikel ini :D
Beranda » Belajar SEO » HTML5 » Tutorial Blogger » Breadcrumbs SEO Friendly dan Valid HTML5
Umraici ,
udh coba, tp waktu simpan templete muncul error, gmna cara atasinya? mkasih
KOPERASII LESTARI
Lalu, Template Sang SEO Kang Mousir Yang Saya Pakai Breadcrumbs-nya Sudah SEO Friendly Belum Kang??
Hafizuddin S I
Jos mas ^_^ sudah saya terapkan >,<9
ary setyobudi
Template saya belum ada breadcrumb-nya. Baru saya pasang pakai tutorial disini Kang, sudah berhasil. Terimaksih.
hary dhelta
ijin, trimakasih banyak langsung saya praktekkan dan mantap deh panduannya....sangat bermanfaat !!!

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal