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
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

1. Buka Blogger > Klik Template > Edit HTML > Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* 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;}

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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<!-- 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 + &quot;?max-results=5&quot;' 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 == &quot;archive&quot;'>
<!-- 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 == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<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 !!!


Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '