Blogermie.com: Cara Memasang Breadcrumb SEO di Blog

26 September 2011

Cara Memasang Breadcrumb SEO di Blog

cara membuat breadcrumb seo friendly di blog
Apa itu Breadcrumb?

Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah blog/website, program atau dokumen. Dalam bentuknya, breadcrumb berupa navigasi yang mengarahkan kita dari menu utama ke sub menu yang lain / tag maupun kategori. Contoh yang bisa saya perjelas seperti gambar dibawah ini

Memasang Navigasi Breadcrumb SEO

Coba perhatikan tulisan Google Product dan HEADLINE NEWS dipisahkan dengan tanda koma, itu karena Postingan Blog memiliki dua Kategori atau label. Sebanyak apa pun label dalam satu artikel selalu akan dipisahkan dengan tanda koma dan itu sangat bagus untuk SEO Blogger.

Membuat Breadcrumb
Apa ini dianjurkan oleh Google?

Membuat Navigasi Breadcrumb SEO Freindly di Blog  merupakan salah satu Tips SEO Blogger. Dengan begitu, Search Engine Google akan lebih senang mengcrawl halaman Blog. Bila anda pengguna Tool Webmaster, sangat perlu dikaji ulangi bahwa Robot Txt  tidak akan mengindeks Label yang ada. tetapi isi dari label tersebut. itu yang menjadi alasan kenapa Galat selalu terjadi pada indeks perayapan URL label

Dari hasil Survey saya terhadap situs Social exchange seperti Lintas berita, plipeo, infogue dsb,  ternyata beberapa Blog Berpage Rank tinggi tersebut Memasang Navigasi Breadcrumb.  Untuk itu tidak ada salahnya buat Sobat Blogger Memasang Navigasi Breadcrumb di blog agar Template Blog menjadi lebih SEO Friendly.

Sangat menarik untuk dicoba bukan ?
Nah, Silahkan ikuti tutorial Membuat Navigasi Breadcrumb SEO Berikut:

  • Login Blog - Klik Design - Edit HTML - dan Centang pada Expand Template Widget
  • Cari kode <div class='post hentry'>dengan menekan tombol F3 dan kode yang dicari akan terseleksi dengan warna hijau

Memasang Navigasi Breadcrumb

  • Copy Kode berikut dan Paste tepat dibawah kode <div class='post hentry'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='http://4.bp.blogspot.com/-UzSCXWhLjTI/Tn7zp7psmmI/AAAAAAAABSI/nFO-z6EvMQs/s320/Blogermie%2BCrumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='http://4.bp.blogspot.com/-UzSCXWhLjTI/Tn7zp7psmmI/AAAAAAAABSI/nFO-z6EvMQs/s320/Blogermie%2BCrumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>
Keterangan: Tulisan Your Are Here bisa anda ganti dengan tulisan yang lain.

Memasang Navigasi Breadcrumb

  • Apabila anda mau menambahkan Kotak (Border) pada tampilan Breadcrumb, silahkan Copy kode berikut:

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

  • Paste kode tadi tepat di atas kode ]]></b:skin>
  • Simpan Template,dan lihat hasilnya
Membuat Breadcrumb


Materi referensi : cara membuat breadcrumb seo friendly di bloghttp://valven-blogger.blogspot.com

Judul: Cara Memasang Breadcrumb SEO di Blog; Reviewer By: Heru Prasetyo; Rating Blog: 5 dari 5
Heru Prasetyo Blogermie.com Updated at: 9/26/2011 07:02:00 PM

2 komentar:

  1. MAKASIH YA KARNA UDAH NULIS SUMBERNYA

    SALAM KENAL

    BalasHapus
  2. ya mas, sama-sama, tipsnya membantu sekali untuk kemajuan blog saya :)

    BalasHapus