Breadcrumbs merupakan sebuah menu navigasi yang biasanya berada di atas judul postingan suatu blog atau website. Isinya berupa link yang...
Breadcrumbs merupakan sebuah menu navigasi yang biasanya berada di atas judul postingan suatu blog atau website. Isinya berupa link yang menuju home atau halaman utama yang diikuti dengan label kemudian judul dari postingan yang sedang dibuka. Breadcrumbs ini cukup penting sebagai faktor pendukung SEO di blog, karena dengan breadcrumbs kita bisa menginformasikan kepada pengunjung mengenai kategori dari artikel yang ada di dalam blog tersebut. Nah karena itu pada kesempatan kali saya akan berbagi tutorial Cara Memasang Breadcrumbs SEO Friendly yang beberapa waktu lalu juga pernah di bahas di blog Arlina Design milik Arlina Fitriyani.
Breadcrumbs ini sudah dibuktikan sendiri kualitasnya oleh Arlina Fitriyani pemilik blog Arlina Design bahwa breadcrumbs ini sudah SEO Friendly, semua label terindeks oleh Search Engine dan tentunya Valid HTML5.
Berikut Cara Memasang Breadcrumbs SEO Friendly
1. Buka Blogger > Klik Template > Edit HTML > Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}2. Langkah selanjutnya, cari kode HTML post seperti ini
<b:includable id='main' var='top'>...</b:includable>3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas
<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"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <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 + "?max-results=5"' 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"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<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>4. Simpan template.
Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog, Sobat bisa cek di sini Google testing tool
