Cara Memasang Breadcrumbs Hanya Menampilkan Satu Label

Cara Memasang Breadcrumbs Hanya Menampilkan Satu Label

Cara Memasang Breadcrumbs di Blogger Seo Friendly

Beberapa waktu lalu saya terpikir bagaimana ya caranya breadcrumb hanya menampilkan (1) satu label saja di postingan Blogger.

Bisa terpikir seperti itu karena kebetulan saya punya blog yang setiap post nya menggunakan banyak sekali label.

Oh iya, di kesempatan sebelumnya saya juga sudah bahas bagaimana cara mebuat widget label scroll, cocok banget buat blog yang punya banyak label.

Back to topik.

Akhirnya coba searching di mbah google, namun ternyat hasilnya nihil. Di titik saya ingin menyerah, ternyata di pencarian muncul postingan bungfrangki dan isinya seperti yang saya cari.

Mungkin sampai di sini pasti Anda akan bertanya-tanya, apakah menggunakan cara tersebut akan berpengaruh terhadap seo dan kontennya di dalam SERP.

Sejauh ini saya menggunakan breadcrumb satu label tidak ada dampak negatif yang ditimbulkan.
Dengan kata lain, Aman.

Di hasil Pencarian Google pun juga menampilkan satu label saja.

Bagaiman, tertari ingin mencoba? Oh iya, Breadcrumb ini juga sudah menggunakan Microdata Schema.org loh.

Cara Memasang Breadcrumbs Seo Friendly Hanya Tampil Satu label Saja


1. Seperti biasa, masuk ke halaman tema lalu Edit HTML. 

2. Lalu cari kode breadcrumb template Anda, kodenya biasanya diawali dengan <b:includable id='breadcrumb' var='posts'>...... </b:includable>

3. Jika sudah ketemu silahkan hapus dan ganti dengan kode breadcrumb berikut ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<b:if cond='data:num == (data:post.labels.size - 1)'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:if>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Jangan lupa ganti CSS Breadcrumb blog Anda dengan di bawah ini.

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:inherit;font-weight:400}
.breadcrumbs a:hover{color:inherit}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -4px}
.breadcrumbs svg path{fill:#c8c8c8}

5. Selesai

Perlu saya beritahu bahwa kekurang dari Breadcrumb ini yaitu kita tidak bisa mengatur label mana yang di tampilkan di Breadcrumbs.

Label yang tampil di Breadcrumb biasanya adalah label dengan huruf abjad paling akhir.

Jujur, kalau menurut saya itu bukan merupakan suatu masalah yang perlu di khawatirkan. Toh, jika Anda memberikan label pada postingan Anda, tentu saja itu adalah label yang paling relevan dengan artikel Anda.

Jadi tak perlu khawatir tentang label mana yang akan tampil.

2. Cara Alternatif Lebih Mudah


Cara kedua bisa dibilang tidak terlalu sulit untuk dilakukan. Karena Anda hanya perlu mengganti beberapa bagian kode Breadcrumbs, tanpan perlu mengganti keseluruhan kode dan css nya.

1. Cari code breadrumb Anda.

2. Lalu tambahkan first ke bagian kode breadcrumbs label yaitu data:post.labels sehingga akan menjadi seperti ini.
data:post.labels.first

  • Dengan menambahkan first, artinya hanya akan tampil label urutan pertama. Jika Anda ingin menampilkan hanya label terakhir, tambahkan last.

3. Lebih jelasnya bisa Anda lihat kode breadrumb theme saya berikut ini.
  • Bisa dilihat di kode breadcrumb saya ini terdapat 2 buah data:post.labels, nah tambahkan first di kedua data:post.labels bagian breadcrumb sehingga menjadi seperti berikut ini.
  • Ingat ya, hanya tambahkan first atau last di bagian data:post.labels breadcrumb. Karena di setiap template biasanya terdapat beberapa kode data:post.labels.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
    <b:loop values='data:posts' var='post'>
        <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
            <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
            <meta content='1' itemprop='position'/>    
<span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>    </span>    
<b:if cond='data:post.labels.first'>    
<b:loop index='nomor' values='data:post.labels.first' var='label'> &amp;nbsp;&#8250;&amp;nbsp;      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>        
<meta expr:content='data:nomor+2' itemprop='position'/>        <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>          <span itemprop='name'><data:label.name/></span>        </a>  
</span>    
</b:loop>    
<b:else/>    &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
        </b:if>
        </div>
    </b:loop>
</b:includable>

Silahkan pilih dari kedua cara tersebut yang paling mudah menurut Anda.

Agar lebih Afdal, Anda juga perlu membuat label di bawah postingan. Jadi label di bagian breadcrumb hanya menampilkan satu saja, sedangkan label di bawah post nantinya akan menampilkan keseluruhan dari label Anda.

Demikian pembahasan mengenai blogger kali ini. Dengan menggunakan cara ini, sekarang Anda bisa menambakan label sebanyak mungkin di setiap artikel Anda. Selamat mencoba.

Refrensi: https://www.bungfrangki.com/2019/12/cara-memasang-breadcrumbs-menampilkan-satu-label.html

Share
Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel