Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Membuat Breadcrumb Seo Friendly

Cara Membuat Breadcrumb Seo Friendly | Hai..sobat pada kesempatan kali ini saya akan membahas mengenai "Cara Membuat Breadcrumb Seo Friendly".  Breadcrumb....? Apa itu...? Mungkin ada beberapa blogger yg belum tau difinisi Breadcrumb.


Definisi breadcrumb menurut wikipedia adalah seperti berikut ini :

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Breadcrumbs biasanya terlihat seperti ini:


Home page> Nama Kategori> Judul Postingan
atau
Home page: Nama Kategori: Judul Postingan


Nah..sobat sudah taukan apa itu Breadcrumb..
Lalu apa itu Breadcrumb Seo Friendly...? Breadcrumb Seo Friendly adalah Breadcrumb yg terindex oleh mesin pencarian. Maksudnya..? Jadi gini jika sobat mengetikan salah satu keyword postingan blog sobat di seach eangine dan di bawah keyword tersebut akan ada  Breadcrumb seperti ini :

http://namablog.com/ >> nama kategori/label

ini dia contoh gambarnya :


Lalu bagaimana Cara Membuat Breadcrumb Seo Friendly...?




Cara Membuat Breadcrumb Seo Friendly

Ada beberapa hal yg perlu sobat lakukan jika ingin Membuat Breadcrumb Seo Friendly

  • Membuat Breadcrumb
  • Buatlah 1-2 lebel saja dalam 1 posting
  • Cantumkan label entry pada sidebar atau bagian footer blog
  • Buatlah nama lebel yg tidak jauh dengan isi posting

Cara Membuat Breadcrumb 


  • Login ke Blogger
  • Pilih Template >> Edit HTML >> Conntreng Expand Widget Templates.
  • Cari kode ]]></b:skin> Untuk mempermudah sobat bisa gunakan F3 atau Ctrl+F
  • Copy lalu pastekan kode di bawah ini tepat di atas kode ]]></b:skin>
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

  • Setelah itu cari kode <b:includable id='main' var='top'>
  • Setelah ketemu, ganti kode <b:includable id='main' var='top'> 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 == &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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <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>
&#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'/>

  • Simpan.
  • Begitulah penjelasan saya mengenai "Cara Membuat Breadcrumb Seo Friendly"

31 komentar:

  1. Thanks sob atas infonya... coba dlu ah

    BalasHapus
  2. makasih sdh berbagi sob! *smile

    BalasHapus
  3. trmksi banyak mas trik nya mancap D:

    BalasHapus
  4. Thx sharenya ssob.. Bisa saya lakukan nih..

    BalasHapus
  5. Saya udah pake cara ini sobb... :)

    BalasHapus
  6. thx sobat sangat membantu artikelnya..

    come back yaa..

    BalasHapus
  7. alhamdulillah, ane sudah pake gan... mantab dah

    BalasHapus
  8. bagus kawan, kebetulan saya juga sudah pasang.

    BalasHapus
  9. makasih sob. aku coba dulu.

    BalasHapus
  10. makasih ya mas caranya maknyos

    BalasHapus
  11. alhamdulillah akhirnya saya bisa juga thank sob

    BalasHapus
  12. punya saya kok belom ke detek dii serep ya :(

    BalasHapus
  13. Thank's ya infonya, sudah diterapkan diblog saya dan berhasil.

    BalasHapus