Tips Seputar SEO dan Google Adsense

Cara Membuat Breadcrumbs SEO Friendly

Cara Membuat Breadcrumbs SEO Friendly
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 == &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'/>
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'>
&#187; <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'>
&#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. Simpan Template


Sekian artikel Cara Membuat Breadcrumbs SEO Friendly. Jika kurang mohon maaf
Semoga Bermanfaat...... :)

Share :

Facebook Twitter Google+
Back To Top