Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017
DP BBM 23 - Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 - selamat pagi dan selamat menyantap makan sahur aja guys .. dan selamat berjumpa kembali untuk pembaca blog DP BBM 23 semuanya .. setelah beberapa jam lalu membahas dan berbagi mengenai Kalau Sudah Begini Rasanya Ingin Membuat Blog Zombie Aja !!! Emang Apa Sih Blog Zombie ?? .. pada kesempatan kedua nya ini .. admin akan sedikit berbagi cara pembuatan Breadcrumbs yang SEO Friendly .. untuk ulasannya simak dibawah ini ..
cara pemasangan Breadcrumbs ini sangat terbilang mudah terlebih lagi di dalam template - template yang dibuatkan oleh para designer sudah memasukan kode Breadcrumbs secara otomatis di dalamnya .. namun masih ada juga lho sebagian pembuat template di dalamnya tidak disertai juga pemasangan Breadcrumbs sekalipun template tersebut sangat keren / bagus dan SEO Friendly .. nah, maka dari itu kita bisa memasukkan Breadcrumbs sendiri dengan cara mengedit templatenya ..
Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017
namun sebelumnya akan saya ulas sedikit .. karena mungkin masih ada sebaian dari sobat yang belum tau apa itu Breadcrumbs ?? Breadcrumbs adalah sebuah menu navigasi yang biasanya berada di atas judul postingan suatu blog atau website .. Isinya berupa link yang menuju home atau halaman utama yang diikuti dengan label kemudian judul dari postingan yang dibuka .. Breadcrumbs ini cukup penting sebagai faktor pendukung SEO di blog .. karena dengan breadcrumbs kita bisa menginformasikan kepada pengunjung mengenai kategori dari artikel yang ada di dalam blog tersebut ..
contohnya seperti ini guys : Home > Label 1 > Label 2 > Label 3 > Judul Postingan dan itu biasanya berada diatas header post .. dan yang saya maksud Label sebanyak 3x itu .. maksudnya yang mengarah kesuatu label yang masih bersangkutan dengan judul postingan tersebut .. misalnya saja sekarang saya membuat postingan Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 dan berada dalam label Blogger maka hasilnya menjadi Home > Blogger > Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 ..
Untuk membaca semua artikel dan semua label post yang ada diblog DP BBM 23 bisa sobat klik salah satu atau semuanya dibawah ini ..
1. All Article
2. All Label
begitupun jika terdapat banyak label didalam 1 postingannya .. akan berurutan nama - nama label sebelum judul posts dan sesudah menu home .. untuk lebih jelasnya bisa sobat lihat gambar dibawah ini ( lihat yang saya kasih lingkarang biru dan tanda panah biru ) itu saya ambil contohnya dari salah 1 blog saya .. yang dimana pada gambar tersebut terdapat 3 buah label sebelum judul postingan ..
Contoh Breadcrumbs
di dalam gambar tersebut terdapat 3 buah label Home > MP4U > Tips & Trik > Windows10 > Cara Mengatasi Google Chrome Not Responding .. yang dimana kode Breadcrumbs tersebut sudah otomatis terpasang didalam templatenya .. karena kebetulan blog tersebut menggunakan template dari mbak lin ( arlina design ) .. dan di blog ini memang tidak terlihat ada nya Breadcrumbs di atas kepala postingan .. bukan tidak dipasangi melainkan tidak terlihat saja .. karena kalau di google search sudah tertera urutan - urutan dari masing - masing labelnya .. seperti gambar - gambar dibawah ini ..
Breadcrumbs 1 Label
Breadcrumbs 2 Label
Breadcrumbs 4 Label
dari hasil telusur google dan dari atas postingan ( Breadcrumbs diatas header posts ) berbeda .. jika di blog penyusunannya seperti yang saya sebutkan diatas Home > Label 1 > Label 2 > Label 3 > Judul Postingan namun jika di telusur google ( google search ) kata Home nya diganti dengan URL / Link blog seperti pada gambar diatas www.kata-anak.tk > Label 1 > Label 2 > Label 3 > Judul Postingan ..
nah, sekarang sudah cukup paham kan ?? dan jika sobat tertarik ingin membuatnya / dipasang pada blog sobat yang belum terpasangi breadcrumbs .. simak terus ulasannya dan copas semua kode - kode yang nanti saya berikan dibawah dan Breadcrumbs yang akan saya bagikan ini memiliki kelebihan yaitu SEO Friendly .. walaupun Saya sendiri tidak begitu mahir dalam hal SEO .. Namun, breadcrumbs ini sudah Saya buktikan sendiri bahwa breadcrumbs ini sudah SEO Friendly .. semua label terindeks oleh Search Engine dan tentunya Valid HTML5 ..
2. Langkah selanjutnya .. cari kode HTML post seperti dibawah ini
3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas
4. Simpan template ..
Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog .. Sobat bisa cek di sini Google testing tool
Kalau Sudah Begini Rasanya Ingin Membuat Blog Zombie Aja !!! Emang Apa Sih Blog Zombie ??
DP BBM 23 - Kalau Sudah Begini Rasanya Ingin Membuat Blog Zombie Aja !!! Emang Apa Sih Blog Zombie ?? - selamat tengah malam dan selamat berjumpa kembali untuk semua pembaca blog DP BBM 23 .. setelah kemarin siang membahas dan berbagi mengenai Cara Mudah Dan Simple Menambahkan Elemen Baru Diatas Blog Posts d...View More
ok next .. sekiranya hanya itu saja guys .. yang dapat adim blog DP BBM 23 bagikan dikesempatan pagi ini mengenai Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 semoga bermanfaat bagi sobat yang memerlukannya .. selamat pagi dan sampai jumpa lagi !!!
cara pemasangan Breadcrumbs ini sangat terbilang mudah terlebih lagi di dalam template - template yang dibuatkan oleh para designer sudah memasukan kode Breadcrumbs secara otomatis di dalamnya .. namun masih ada juga lho sebagian pembuat template di dalamnya tidak disertai juga pemasangan Breadcrumbs sekalipun template tersebut sangat keren / bagus dan SEO Friendly .. nah, maka dari itu kita bisa memasukkan Breadcrumbs sendiri dengan cara mengedit templatenya ..
Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017
namun sebelumnya akan saya ulas sedikit .. karena mungkin masih ada sebaian dari sobat yang belum tau apa itu Breadcrumbs ?? Breadcrumbs adalah sebuah menu navigasi yang biasanya berada di atas judul postingan suatu blog atau website .. Isinya berupa link yang menuju home atau halaman utama yang diikuti dengan label kemudian judul dari postingan yang dibuka .. Breadcrumbs ini cukup penting sebagai faktor pendukung SEO di blog .. karena dengan breadcrumbs kita bisa menginformasikan kepada pengunjung mengenai kategori dari artikel yang ada di dalam blog tersebut ..
contohnya seperti ini guys : Home > Label 1 > Label 2 > Label 3 > Judul Postingan dan itu biasanya berada diatas header post .. dan yang saya maksud Label sebanyak 3x itu .. maksudnya yang mengarah kesuatu label yang masih bersangkutan dengan judul postingan tersebut .. misalnya saja sekarang saya membuat postingan Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 dan berada dalam label Blogger maka hasilnya menjadi Home > Blogger > Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 ..
Catatan :
Untuk membaca semua artikel dan semua label post yang ada diblog DP BBM 23 bisa sobat klik salah satu atau semuanya dibawah ini ..
1. All Article
2. All Label
begitupun jika terdapat banyak label didalam 1 postingannya .. akan berurutan nama - nama label sebelum judul posts dan sesudah menu home .. untuk lebih jelasnya bisa sobat lihat gambar dibawah ini ( lihat yang saya kasih lingkarang biru dan tanda panah biru ) itu saya ambil contohnya dari salah 1 blog saya .. yang dimana pada gambar tersebut terdapat 3 buah label sebelum judul postingan ..
Contoh Breadcrumbs
di dalam gambar tersebut terdapat 3 buah label Home > MP4U > Tips & Trik > Windows10 > Cara Mengatasi Google Chrome Not Responding .. yang dimana kode Breadcrumbs tersebut sudah otomatis terpasang didalam templatenya .. karena kebetulan blog tersebut menggunakan template dari mbak lin ( arlina design ) .. dan di blog ini memang tidak terlihat ada nya Breadcrumbs di atas kepala postingan .. bukan tidak dipasangi melainkan tidak terlihat saja .. karena kalau di google search sudah tertera urutan - urutan dari masing - masing labelnya .. seperti gambar - gambar dibawah ini ..
Breadcrumbs 1 Label
Breadcrumbs 2 Label
Breadcrumbs 4 Label
dari hasil telusur google dan dari atas postingan ( Breadcrumbs diatas header posts ) berbeda .. jika di blog penyusunannya seperti yang saya sebutkan diatas Home > Label 1 > Label 2 > Label 3 > Judul Postingan namun jika di telusur google ( google search ) kata Home nya diganti dengan URL / Link blog seperti pada gambar diatas www.kata-anak.tk > Label 1 > Label 2 > Label 3 > Judul Postingan ..
nah, sekarang sudah cukup paham kan ?? dan jika sobat tertarik ingin membuatnya / dipasang pada blog sobat yang belum terpasangi breadcrumbs .. simak terus ulasannya dan copas semua kode - kode yang nanti saya berikan dibawah dan Breadcrumbs yang akan saya bagikan ini memiliki kelebihan yaitu SEO Friendly .. walaupun Saya sendiri tidak begitu mahir dalam hal SEO .. Namun, breadcrumbs ini sudah Saya buktikan sendiri bahwa breadcrumbs ini sudah SEO Friendly .. semua label terindeks oleh Search Engine dan tentunya Valid HTML5 ..
Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}
2. Langkah selanjutnya .. cari kode HTML post seperti dibawah ini
<b:includable id='main' var='top'>...</b:includable>
3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas
<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><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 + "?max-results=5"' expr:title='data:label.name' 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' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><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 + "?max-results=5"' expr:title='data:label.name' 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' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
4. Simpan template ..
Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog .. Sobat bisa cek di sini Google testing tool
Kalau Sudah Begini Rasanya Ingin Membuat Blog Zombie Aja !!! Emang Apa Sih Blog Zombie ??DP BBM 23 - Kalau Sudah Begini Rasanya Ingin Membuat Blog Zombie Aja !!! Emang Apa Sih Blog Zombie ?? - selamat tengah malam dan selamat berjumpa kembali untuk semua pembaca blog DP BBM 23 .. setelah kemarin siang membahas dan berbagi mengenai Cara Mudah Dan Simple Menambahkan Elemen Baru Diatas Blog Posts d...View More
ok next .. sekiranya hanya itu saja guys .. yang dapat adim blog DP BBM 23 bagikan dikesempatan pagi ini mengenai Cara Memasang Breadcrumbs SEO Friendly Terbaru 2017 semoga bermanfaat bagi sobat yang memerlukannya .. selamat pagi dan sampai jumpa lagi !!!
