Cara Memasang Breadcrumbs SEO Friendly

Published by Arlina Design April 22, 2016

Cara Memasang Breadcrumb SEO Friendly - Breadcrumbs adalah 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 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.

Breadcrumbs yang akan saya bagikan ini memiliki kelebihan yaitu SEO Friendly, walaupun Saya sendiri tidak begitu mahir dalam hal SEO. Namun, breadcrumbs ini sudah Saya buktikan sendiri bahwa breadcrumbs ini sudah SEO Friendly, semua label terindeks oleh Search Engine dan tentunya Valid HTML5.

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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<!-- 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 + &quot;?max-results=5&quot;' 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 == &quot;archive&quot;'>
<!-- 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 == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<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>