Membuat Breadcrumb SEO Friendly dan Valid HTML5
Tutorial Membuat Breadcrumb SEO Friendly dan Valid HTML5 | Breadcrumb SEO Friendly dan Valid HTML5 merupakan salah satu navigasi yang digunakan dalam suatu website agar pengunjung lebih mudah dan mengetahui dihalaman mana mereka sedang berada. Seperti halnya sitemap / daftar isi breadcrumb juga memiliki fungsi yang sama. Bagaimana membuatnya? Yuk kita simak bersama.
Tutorial ini saya dapatkan waktu saya blogwalking dan kebetulan masuk ke blog kang ismet dan saya dokumentasikan ke dalam blog ini, agar sewaktu-waktu saya membutuhkan saya dapat mencarinya dengan mudah.
Breadcrumb SEO dan Valid HTML5 ini hanya bisa digunakan di blogger.com. Dan langkah ini bisa dikatakan lebih mudah, karena anda hanya tinggal copy paste saja :D . Juga perlu diketahui juga bahwa anda yang sebelumnya pernah memasang breadcrumb di blog anda, anda bisa memodifikasinya dan menyesuaikan dengan apa yang ada di tutorial ini.
Untuk langkah 1 : Simpan kode ini di atas ]]></b:skin>
.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
margin-top:0px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :
<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'/>
Selesai.
Untuk anda yang pernah membuat breadcrumb SEO Friendly dengan format berikut
<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>
anda bisa memodifikasinya dengan merubahnya menjadi seperti ini.
<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>
Selesai
Demikian tutorial cara Membuat Breadcrumb SEO Friendly dan Valid HTML 5 semoga bermanfaat.