Cara Terbaru Membuat Breadcrumb Valid HTML5
Salah
satu metode optimasi blog adalah memvalidasi breadcrumbs dan juga seo friendly
di hasil pencarian google. Kebanyakan para blogger pemula mengabaikan hal ini.
Mengapa isi blog harus serba SEO? Jawabannya adalah karena SEO ini memang
sangat diperlukan untuk kelangsungan blog baik di mata pencari google dan pada
user yang mengunjungi blog anda, lebih-lebih jika blog tersebut serba seo
friendly.
Membuat Breadcrumbs SEO Friendly dan Valid HTML5
Mengapa
pula harus valid HTML5? Sebenarnya hal ini tidak begitu penting tapi sangat
dianjurkan, biar blog anda tidak ketinggalan zaman dan valid mata google karena
(minimal) akan error pada bagian template.
Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5
1. Simpan kode di bawah ini di atas </head>
<style type='text/css'>
/* Css Breadcrumbs */
.breadcrumbs{background: linear-gradient(to right, #5B86E5, #36D1DC);color:#f5f5f5;line-height:1.5em;font-size:15px;font-family:'roboto', Arial, Sans-Serif;margin:0;padding:15px 30px;font-weight:normal;font-weight:300;text-overflow: ellipsis;white-space: nowrap;overflow:hidden}
.breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:active{text-decoration:none;transition:all .3s ease-in-out;color:#f5f5f5;overflow:hidden;font-size:100%;line-height:1.6em;margin:0;font-weight:300}
.breadcrumbs a:hover{color:#bfc7dc}
</style>
2. Temukan kode di bawah ini.
<b:includable id='breadcrumb' var='posts'>
Atau
kode ini.
<b:includable id='main' var='top'>
Hapus
kode tersebut hingga </b:includable> lalu ganti dengan kode
di
bawah
ini.
<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'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' 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'>Home</a></span> / <span>Unlabelled</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> / <span>Archives 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'>Home</a></span> / <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> / <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Setelah
itu simpan template anda. Dengan melakukan cara di atas, maka breadcrumbs
template blog telah seo friendly dan valid HTML5. Selamat mencoba.