Cara Memasang Breadcrumbs SEO Friendly di Blog

Istilah breadcrumbs mungkin terasa asing bagi beberapa orang khususnya blogger pemula, meskipun bentuknya sering kita lihat ketika membuka artikel di suatu blog/web, dan mungkin banyak yang bertanya bagaimana ya cara membuatnya, pada artikel kali ini kita akan membahas cara memasang breadcrumbs SEO friendly di blog, tapi sebelumnya kita cari tahu dulu apa itu breadcrumbs.

Apa Itu Breadcrumbs dan Fungsinya

Breadcrumbs adalah menu navigasi pada suatu blog/web yang menginformasikan keberadaan posisi lokasi postingan yang sedang aktif.

Pada gambar diatas yang diberi kotak merah adalah contoh breadcrumbs yang ada di blog, strukturnya diblogger yaitu home kemudian label kemudian judul postingan. Breadcrumbs itu sendiri berfungsi untuk mempermudah pengunjung blog mengetahui posisi artikel atau postingan yang sedang aktif, breadcrumbs juga sangat baik untuk SEO karena menambah keyword atau kata kunci pada halaman blog dan membantu pemetaan pada serach engine.

Langkah-langkah Memasang Breadcrumbs pada Blogger

Untuk memasang breadcrambs pada blog anda, langsung saja ikuti langkahnya dibawah ini:
1. Login ke Blogger
2. Pilih Template -> Edit HTML
3. Kemudian cari kode ]]></b:skin dan kemudian simpan kode dibawah ini diatas kode ]]></b:skin

CSS .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}

4. Selanjutnya cari kode <b:includable id='main' var='top'>, setelah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini:

HTML<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' 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>
    </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'/>

5. Simpan Template
Sampai tahap ini berarti anda telah selesai memasang breadcrumbs pada halaman blog anda, silahkan anda cek dibagaian atas halaman artikel blog anda. semoga bermanfaat.
Sekian artikel Cara Memasang Breadcrumbs SEO Friendly di Blog, semoga bermanfaat.

Unknown

Share this

Related Posts