Memasang Breadcrumbs SEO Friendly Valid HTML5

Cara Memasang Breadcrumbs SEO Friendly Blogger Valid HTML5 - Pada artikel kali ini saya akan membagikan Breadcrumbs SEO Friendly yang sudah valid html5, Walaupun saya tidak begitu paham tentang SEO, tapi ini sudah saya buktikan sendiri bahwa Breadcrumbs SEO Friendly ini Valid HTML5, Semua label terindeks oleh Mesin Pencari Google dan yang pasti Valid HTML5.

Baca Juga: Memasang Meta Tag SEO Friendly dan Valid HTML5

Bicara mengenai breadcrumbs, banyak blogger yang belum mengenal apa fungsi breadcrumbs pada blognya terutama blogger baru. Dibilang penting sih tidak, namun sebagian blogger mengatakan pemberian breadcrumbs pada blog sangatlah penting dan berguna terutama untuk memudahkan navigasi.

Lalu apa itu breadcrumbs?. Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah situs. Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, label, tag, dan lain-lain. Memang menurut admin sendiri breadcrumbs ini tidak terlalu penting karena sudah ada kategori, tag, dan arsip yang membantu pengunjung. Namun namanya manusia pasti selalu ada yang pemahamannya kurang bagus jadi perlu bantuan ekstra.

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 di Blog

Pertama-tama Anda harus masuk terlebih dahulu ke Blogger -> Tema -> Edit HTML, Lalu 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;}

Jika sudah, Selanjutnya cari kode <b:includable id='main' var='top'>...</b:includable> didalam template Anda 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.

Mudah bukan untuk Memasang Breadcrumbs SEO Friendly Valid HTML5 di Blog?

Baca juga: Cara Agar Artikel Blog Cepat Terindeks Google Terbaru

Nah, Seperti itulah Cara Memasang Breadcrumbs SEO Friendly Valid HTML5. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Referensi:

https://www.arlinadzgn.com/2016/04/cara-memasang-breadcrumbs-seo-friendly.html

https://dewailmu.id/apa-itu-breadcrumbs/

Penutup

Terima kasih telah membaca artikel Cara Memasang Breadcrumbs SEO Friendly Valid HTML5, Semoga bermanfaat untuk kalian semua.