How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5

Breadcrumbs merupakan salah satu elemen penting yang terdapat pada struktur elemen sebuah template; dimana keberadaan breadcrumbs tersebut sangat berpengaruh terhadap SEO tidaknya sebuah blog. Bisa dikatakan, salah satu elemen yang mampu meningkatkan performa blog Anda adalah dengan keberadaan breadcrumbs tesebut.

Yang tidak kalah pentingnya lagi, komponen breadcrumbs kali ini sudah valid html5. Dan setidaknya, hal itu pula yang menjadi nilai tambah selain SEO friendly.

Baca juga: Meta Tag SEO Friendly Valid HTML5

Dalam kesempatan ini sedikit kami berikan sebuah metode langkah-langkah membuat beradcrumbs di dalam template blog. Bagaimana langkah-langkahnya? Berikut langkah demi langkah sata tuliskan dengan sederhana:

/* 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;}

3. Silakan copas kode di bawah ini di atas kode <b:includable id=’main’ var=’top’>…</b:includable> dengan kode berikut:

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

4. Save template

Mudah bukan? Jika ingin model berbeda, silakan lakukan tips berikutnya di bawah ini.

Breadcrumbs SEO Valid HTML5 Versi 2

Read also: 2 Prioritas SEO Paling Penting di Tahun 2017 [Sering Diabaikan]

Demikian sekilas informasi mengenai How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5. Semoga bermanfaat.