Cara Membuat Breadcrumbs SEO Friendly Valid HTML5

Cara Membuat Breadcrumbs SEO Friendly Valid HTML5 - Breadcrumbs adalah sebuah menu navigasi untuk memudahkan pengunjung suatu website atau blog melacak lokasi dimana pengunjung sedang berada dan kembali ke halaman awal (beranda/hompage) dengan mudah. Biasanya breadcrumbs ini berada di atas setiap judul artikel, karena dengan menggunakan breadcrumbs ini akan memudahkan pengunjung atau pembaca artikel tersebut sedang berada dilokasi mana dalam blog Anda.

Banyak sekali breadcrumbs dengan berbagai macam tampilan yang menarik dan SEO Friendly, namun dari sekian banyak breadcrumbs yang telah di buat semenarik mungkin ada saja yang tidak valid hmtl5, dan pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah tutorial memasang atau membuat breadcrumbs seo friendly Valid HTML5. Bagi blog Anda yang tidak memiliki breadcrumbs alangkah baiknya Anda memasang breadcrumbs ini pada blog Anda, ini akan sangat bermanfaat dan berguna untuk blog Anda, dan jika blog Anda sudah menggunakan breadcrumbs alangkah baik mengecek setiap kode script yang ada pada breadcrumbs tersebut apakah sudah valid html5 atau belum ? Jika belum, silahkan ganti saja kode breadcrumbs yang ada pada blog Anda lalu membuat breadcrumbs baru dengan kode script breadcrumbs yang akan saya bagikan dibawah ini.

Breadcrumbs yang saya bagikan ini sudah valid html5 dan tentunya seo friendly, jadi Anda sangat beruntung telah membaca dan menggunakan kode script berikut untuk mengganti breadcrumbs yang ada pada blog Anda, oke langsung saja bagi Anda yang ingin membuat atau menjadikan breadcrumbs pada blog Anda menjadi valid html5 silahkan baca tutorialnya mengenai cara membuat breadcrumbs seo friendly valid html5 dibawah ini :

Biasanya kode dibawah ini yang menjadikan breadcrumbs menjadi tidak valid html5 :

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin-bottom:20px;margin-top:0;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb}

5. Lalu cari kode seperti ini <b:includable id='main' var='top'>
6. Lalu Ganti dengan kode script dibawah ini :

<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'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://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'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives 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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

7. Lalu klik Simpan Template

Catatan :
Cara diatas adalah cara untuk membuat breadcrumbs baru pada blog Anda

Lalu bagaimana cara mengedit breadcrumbs pada blog agar menjadi valid html5 ?
Dibawah ini saya akan membagikan cara edit breadcrumbs agar menjadi valid html5, seperti yang sudah saya bilang diatas bahwa setiap blog atau website terkadang sudah atau bahkan ada yang belum memasang breadcrumbs pada blog atau websitenya, nah cara diatas merupakan cara membuat breadcrumbs baru pada blog Anda. Lalu bagaimana dengan website atau blog yang sudah memiliki breadcrumbs namun masih belum valid html5 ? Silahkan Anda bisa melihat tutorial cara edit breadcrumbs menjadi valid html5 dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3.Cari kode seperti ini <b:includable id='main' var='top'>
4. Lalu periksa kode script breadcrumbs pada blog Anda seperti dibawah ini :

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

Lalu ganti menjadi :

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://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'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

5. Jika sudah silahkan klik Simpan Template

Sekian artikel mengenai Breadcrumbs SEO Friendly Valid HTML5. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini