Cara Membuat Breadcrumbs Pada Blog Langsung Terindeks Oleh Google
- Seperti biasa kunjungi situs blogger.com dan masukkan email dan password Anda
- Silahkan Anda pilih Tab Rancangan kemudian Edit HTML.
- Seperti biasa berikan tanda Centang atau ceklist pada tulisan Expand Template Widget yang berada pada sudut kiri atas, Tanda ceklist ini bertujuan agar kode yang tersembunyi yang dicari nantinya bisa ditemukan.
- Cari Kode dibawah ini ( tekan CTR + F untuk memudahkan pencarian )
<b:includable id='main' var='top'>
- Jika sudah menemukan, silahkan Anda hapus kode tersebut dan ganti dengan kode di bawah 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' 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'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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. Bagaimana sudah ? Jika sudah, cari lagi kode ]]></b:skin>
7. Jika sudah ketemu, letakkan kode CSS dibawah ini di atas kode ]]></b:skin>
8. Terakhir, silahkan Anda Save template kesayangan Anda.breadcrumbs{padding:8px 5px 5px 0;margin:10px 0 0px;font:normal 11px georgia; border-bottom:1px dashed #ccc;font-weight:normal}
Untuk meliha hasilnya, silahkan Anda membuat sebuah postingan. Setelah postingannya di publish, silahkan periksa di mesin pencari google. Sebagai contoh agar Anda merasa yakin, silahkan perhatikan gambar sreenshoot di bawah ini
Untuk meliha hasilnya, silahkan Anda membuat sebuah postingan. Setelah postingannya di publish, silahkan periksa di mesin pencari google. Sebagai contoh agar Anda merasa yakin, silahkan perhatikan gambar sreenshoot di bawah ini
Perhatikan Gambar di atas ! Yang dilingkari merupakan contoh breadcrumb yang telah saya pasang dalam template blog, dimana kategori postingannya adalah Tutorial blog sehingga orang yang menjelajah google langsung tahu mengenai kategori apa tulisan tersebut sebelum mereka membukanya. Navigasi Breadcrumbs selain memperkuat SEO On Page blog kita, tampilan postingan dalam mesin pencari juga terlihat rapi sehingga memberikan kesan yang Proffesional bagi blog yang telah terpasangi Navigasi breadcrumb
Links
|
Hayaridin Blog |
No comments:
Post a Comment