Cara Membuat Breadcrumbs SEO Friendly |
Cara Membuat Breadcrumbs SEO Friendly - Apakah anda tahu apa itu breadcrumbs ? Breadcrumbs adalah menu navigasi yang berguna untuk memudahkan pengunjung blog kita untuk mengetahui dimana mereka berada dalam blog kita, dan untuk mempermudah pengunjung untuk kembali ke home page blog kita engan mudah. Breadcrums ini biasanya terletak diatas judul artikel blog kita supaya mempermudah pengunjung blog untuk kembali ke homepage blog kita.
Saat ini banyak breadcrumbs dengan berbagai macam tampilan. Namun, apakah breadcrumbs tersebut seo friendly ? . Dibawah ini saya akan membagikan script breadcrumbs yang valid html5 dan tentunya seo friendly. Berikut tutorialnya :
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
Kode diatas biasanya menyebabkan breadcrumbs tidak valid html5
Langkah-langkah membuat breadcrumbs
1. Masuk ke Blogger.com
2. Klik template, kemudian edit html
3. Copy css dibawah ini
.breadcrumbs{padding:0 5px 5px 0;margin-bottom:20px;margin-top:0;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb}
4. Paste diatas kode ]]></b:skin>
5. Copy script dibawah 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='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'>
» <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>
» <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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
6. Cari kode <b:includable id='main' var='top'>
7. Ganti dengan script diatas
8. Simpan Template
catatan : Cara diatas merupakan cara membuat breadcrumbs yang belum ada pada blog anda
Bagaimana cara mengedit breadcrumbs supaya valid html5 ? Dibawah ini saya akan menunjukkan cara mengedit breadcrumbs agar valid html5.
Langkah mengedit breadcrumbs
1. Masuk ke Blogger.com
2. Klik template, kemudian edit html
3. Cari kode <b:includable id='main' var='top'>
4. Periksa script breadcumbs 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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
Ganti dengan script dibawah
<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'>
» <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. Simpan Template
Sekian artikel Cara Membuat Breadcrumbs SEO Friendly. Jika kurang mohon maaf
Semoga Bermanfaat...... :)
8 Komentar untuk "Cara Membuat Breadcrumbs SEO Friendly"
bermanfaat gan
nice :D
nice info:D
:D
thanks
.... ..
.
.
.
.
```````````` `
`` `` `
keren banget nih, saya pasti bisa
keren sam ```````````` ` `` `` ` `
thans gan
good job bro
Android Restart Sendiri
alhamdulilah bermanfaat
Android Restart Sendiri