Monday, April 23, 2012

Cara membuat navigasi breadcrumb seo friendly


Posted by: Bloggertrik // 4:28 PM | Kategori: trik blog
Cara membuat navigasi breadcrumb seo friendly
Navigasi breadcrumb memiliki banyak fungsi, selain memudahkan pengunjung untuk mengakses ke postingan pada kategori yang sama navigasi breadcrumb juga berguna dalam SEO dan akan memberikan hasil SERP yang bagus pada blog kita.

Wikipedia mengartikan bahwa navigasi breadcrumb adalah sutu menu horisontal di bagian atas sebuah halaman web, letak breadcrumb biasanya ada di bawah bar judul atau header.
Navigasi Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Breadcrumb juga berguna untuk hasil pencarian di google sehingga menghasilkan google snippet yang berupa judul, description, dan url link posting.

Tampilan navigasi breadcrumb yang terpasang di blog
Cara membuat navigasi breadcrumb yang seo friendly

Tampilan hasil pencarian blog yang memasang navigasi breadcrumb di google dengan dilengkapi google snipppet
Cara membuat navigasi breadcrumb yang seo friendly

Cara membuat navigasi breadcrumb adalah sebagai berikut,sebelumnya back up dulu template sebelum melakukan cara di bawah agar menghindari apabila terjadi suatu kesalahan kode :
1. login ke akun blogspot
2. klik menu rancangan
3. pilih edit html
4. centang terlebih dahulu checklist disebelah tulisan expand widget
5. cari kode ]]></b:skin>, kemudian pastekan kode dibawah ini sebelum ]]></b:skin>:

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px;
font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}


6. kemudian pastekan kode dibawah ini setelah kode <b:include data='top' name='status-message'/> (jika terdapat 2 kode di dalam htmlnya, pilih saja kode yang kedua)

<b:include data='posts' name='breadcrumb'/>


7. langkah terakhir, pasekan kode di bawah ini diatas kode <b:includable id='main' var='top'>


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


8. Klik tombol simpan template

Ingat pada wikipedia bahwa sering sparator yang digunakan adalah dengan simbol > karena di google breadcrumb yang muncul sebagai google snippet adalah breadcrumb yang menggunakan sparator >.
Cara membuat navigasi breadcrumb seo friendly
Cara membuat navigasi breadcrumb seo friendly Bloggertrik
By:
Published:
Rating Artikel : 5 rates
Jumlah Voting : 160 Orang Total time:

Link Url: http://bloggertrik.blogspot.com/2012/04/cara-membuat-navigasi-breadcrumb-seo.html