Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Cara Memasang Breadcrumbs SEO Friendly Blogger - Breadcrumbs yang saya bagikan kali ini sudah valid html5 sob dan sudah terbukti dalam search engine Google tentunya. Breadcrumbs adalah menu navigasi yang biasanya terletak diatas judul blog contohnya seperti ini Home > Label > Judul Breadcrumbs ini juga termasuk bagian penting dalam menunjang seo dalam blog sobat, jadi tunggu apa lagi langsung saja ke tutorialnya.

Baca Juga : Terapkan 6 Teknik Rahasia Ini Untuk Meningkatkan Seo di 2019

 Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode ]]></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;}

Selanjutnya cari kode <b:includable id='main' var='top'>...</b:includable> didalam template sobat lalu pastekan kode dibawah ini tepat dibawah kode <b:includable id='main' var='top'>...</b:includable>

<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>

Jika sudah klik simpan template sobat.

Baca Juga : Meta Tag Seo Friendly Blogger Terbaru Valid HTML5

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.