Cara Memasang Breadcrumb SEO Friendly
Snippet
Indzgn - Breadcrumb merupakan sebuah menu navigasi yang biasanya ada di atas judul artikel. Isinya berupa Home atau halaman utama yang kemudian diikuti oleh label dan sampai pada artikel post. Breadcrumb ini sangat penting agar sebuah blog menjadi SEO Friendly. Karena breadcrumb ini kita bisa menginformasikan kepada pengunjung mengenai kategori artikel pada yang ada pada blog tersebut.
Breadcrumb yang akan saya bagikan ini sudah SEO Friendly. Meskipun saya masih belum begitu mahir dalam hal SEO, namun Breadcrumb ini sudah SEO Friendly karena saya buktikan sendiri. Semua Label terindex oleh Search Engine dan sudah pasti Valid HTML5.
Ok, langsung saja kita simak tutorialnya berikut ini.
Cara Memasang Breadcrumb SEO Friendly
1. Buka akun Blogger kamu, kemudian masuk ke Template, dan klik Edit HTML. Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/*Post Info Indzgn.blogspot.com*/
.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. Jika sudah kamu tambahkan, cari kode di bawah ini.
<b:includable id='main' var='top'>...</b:includable>3. Kemudian tambahkan kode HTML Breadcrumb ini 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. Langkah terakhir, simpan template kamu dan lihat hasilnya.
Sangat mudah bukan?
Untuk mengetahui Breadcrumb sudah terpasang dengan benar atau belum, kamu bisa mengeceknya di Google Testing Tool.
Demikian informasi yang saya berikan untuk kamu mengenai Cara Memasang Breadcrumb SEO Friendly. Semoga bermanfaat dan menampah pengetahuanmu dalam dunia blogging.
