Cara Pasang Seo Dan Valid Breadcrumb Untuk Blogger Template

Cara Pasang Seo Dan Valid Breadcrumb Untuk Blogger Template

Cara Pasang Seo Dan Valid Breadcrumb Untuk Blogger Template memang banyak di pencarian google, untuk informasi dan cara yang digunakan tentu beragam bahkan tidak semua teori yang diberikan sukses apabila di terapkan pada template blogger. Terkadang teori pemasangan Breadcrumb sukses di terapkan pada template blogger namun Breadcrumbnya tidak tampil di pencarian google.

Misalnya setelah saya memasang Breadcrumb pada template blogger, saya menginginkan link https://www.bebas.site/2019/03/perlukah-memasang-cookie-notice-pada.html berubah menjadi https://www.bebas.site › Blogging pada penelusuran google. Namun kenyataannya di google yang tampil tetap https://www.bebas.site/2019/03/perlukah-memasang-cookie-notice-pada.html

Terus apa yang anda pikirkan jika illustrasinya seperti diatas, tentu mungkin anda akan beranggapan "Apa gunanya script Breadcrumb di pasang pada template blogger namun hasilnya tidak sesuai dengan yang diharapkan, nambah size html saja...!"

Jujur saja, tujuan saya memasang Breadcrumb pada blog bebas.site ini agar lebih SEO Friendly dalam artian setiap link postingan yang ada di google tidak menampilkan tahun serta bulan , contohnya saja jika kamu mencari link di google dengan kata kunci tententu mana yang lebih kamu pilih untuk klik website seperti ini "https://www.bebas.site › Blogging" atau yang ini "https://www.bebas.site/2019/03/perlukah-memasang-cookie-notice-pada.html"?.  Jika kedua link tersebut tampil di penelusuran google tentu kamu akan memilih "https://www.bebas.site › Blogging" bukan!, untuk alasannya tentu beragam, salah satunya "jika link suatu blog atau website ada bulan bahkan tahun kemudian tampil di penelusuran google maka rata-rata visitor beranggapan bahwa postingan tersebut sudah tidak mengikuti zaman, lalu mereka abaikan begitu saja", padahal isi potingannya sangat bagus. Itu lah satu alasan knapa setiap blog sebaiknya menggunakan Breadcrumb.

Berikut Cara Pasang Seo Dan Valid Breadcrumb Untuk Blogger Template:
  • Pada bagian Edit HTML kamu cari code ini
<b:defaultmarkup type='Common'>
  • Setelah kamu temukan, tambahkan kode seperti dibawah:
<b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>
  • hasilnya:
 <b:defaultmarkup type='Common'>
<b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>
  • Untuk mengaktifkan Breadcrumb kamu gunakan code:
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>
  • Cari lagi kode:
<article class='post-outer-container'>
  • Kamu pasang code dibawah tepat setelah code <article class='post-outer-container'> , jadinya:
  <article class='post-outer-container'>
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>
  • Langkah terakhir, kamu tambahkan CSS berikut sebelum </b:skin>:
.breadcrumbs {font-size:90%;overflow:hidden;color:#368bf4;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}
  • Kemudian kamu SAVE.
Langkah atau Cara Pasang Seo Dan Valid Breadcrumb Untuk Blogger Template sudah saya terapkan sendiri pada template bawaan blogger ini dan hasilnya bisa kamu cek di pencarian google " site:bebas.site " *tanpa tanda kutip.
Load comments

Popular posts

Tanaman Hias Apung Aquascape Atau Kolam Amazon frogbit

Tanaman Hias Cryptocoryne Untuk Aquascape Dan Aquarium

Hairgrass Mini Atau Dwarf hairgrass

Tanaman Hias Aquascape Atau Aquarium Cabomba caroliniana

Tanaman Aquascape Atau Aquarium Alternanthera Reineckii Mini

Tanaman Hias Terkenal Aquascape Anubias Nana