Blog Personal tentang tips Blogging dan Internet

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.

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

16 Komentar untuk "Breadcrumbs SEO Friendly dan Valid HTML5"

Giovani Aluha

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

wajib gan sebagai pendukung Optimasi SEO ;)

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

Komentar ini telah dihapus oleh pengarang. - Hapus
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 !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d