Blogcahti: Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly

Cara Membuat Breadcrumbs (Navigasi diatas judul Postingan) di Blogspot yang SEO Friendly

Cara Membuat Breadcrumb di Blog - Saat kamu mengunjungi sebuah blog, pada bagian atas halaman terdapat navigasi berupa link. Biasanya navigasi tersebut berada tepat diatas judul postingan. Link tersebut menunjukkan lokasi dimana kamu sedang berada pada sebuah halaman blog, itulah yang disebut breadcrumb.

Breadcrumb menunjukkan posisi kamu ketika mengunjungi suatu artikel, label, atau halaman tertentu. Tujuan membuat breadcrumb yaitu agar memudahkan mesin pencari untuk menemukan blog kita. Selain itu breadcrumbs juga sangat user friendly.

Cara membuat breadcrumbs yang SEO friendly

Oke, ikuti langkah-langkah berikut supaya blog kamu menarik di mata pengunjung dan juga mesin pencari.

1. Login ke blogger
2. Klik Tema > Edit HTML
3. Cari kode <b:includable id='main' var='top'> atau bisa tekan CTRL+F lalu ketikkan kode tersebut kemudian tekan enter
4. Ganti kode diatas dengan kode berikut :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>



<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='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&amp;max-results=7"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> » <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>



<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span><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'/>

Catatan : Kamu bisa ubah tulisan yang berwarna biru sesuai keinginan kamu. Kode » merupakan spesial karakter. Dapat kamu lihat disini untuk kode-kode spesial karakter lainnya.

5. Copy kode ini dan taruh dibawah <b:skin> atau sebelum </b:skin> :

.breadcrumbs{padding:10px 5px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.breadcrumbs a {color:#999;}
.breadcrumbs a:hover{color:#2471a3 ;text-decoration:underline;}

6. Klik Simpan

Setelah itu kamu bisa cek dengan mengunjungi blog kamu. Jika berhasil maka breadcrumbs akan muncul diatas judul artikel, label, atau halaman lainnya.

Sekian artikel tentang Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly semoga bermafaat.