Cara Menampilkan Breadcrumb Blogger Terbaru Tanpa Error

Baca Juga

BREADCRUMBS atau breadcrumb adalah navigasi internal blog di atas judul posting halaman dalam, berupa tautan teks (text link) ke halaman depan dan halaman label (label page) atau halaaman indeks posting per kategori.

Template-template blog seo friendly terbaru biasanya sudah menampilkan breadcrumbs. Google dan situs-situs ternama juga menampilkan breadcrumbs ini.

Secara harfiyah, dalam bahasa Inggris breadcrumbs artinya remah roti. Entah kenapa disebut demikian, mungkin karena ukuran hurufnya yang biasanya lebih kecil dari ukuran font halaman posting.

Fungsi Breadcrumb

Menurut Google, breadcrumb pada halaman menunjukkan posisi halaman dalam hierarki situs web atau blog.

Seorang pengguna dapat menavigasi sepenuhnya dalam hierarki situs, satu tingkat pada satu waktu, dengan memulai dari breadcrumb terakhir di jejak breadcrumb.

Google Search menggunakan markah breadcrumb di badan halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian.

Seringkali, pengguna dapat tiba di halaman dari berbagai jenis permintaan pencarian. Sementara setiap pencarian dapat mengembalikan halaman web yang sama, breadcrumb mengkategorikan konten dalam konteks permintaan Google Search.

Cara Menampilkan Breadcrumb Blog Tanpa Error

Banyak tutorial lama Cara Membuat Breadcrumb ternyata belakanan error, karena menggunakan schema mark up lama. Pasalnya, schema breadcrumb di data vocabulary sudah tidak berlaku lagi.

Berikut ini Cara Membuat Breadcrumb Terbaru Tanpa Error.  Berikut ini langkah-langkah pembuatan breadcrumb di template blog, dengan schema markup BreadcrumbList.

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.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:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg path{fill:#c8c8c8}

3. Temukan kode <b:includable id='breadcrumb' var='posts'> ... </b:includable>
4. Hapus dan ganti dengan kode breadcrumb tanpa error berikut ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<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'>
<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 expr:content='data:num+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:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

5. Save. Simpan template!

Breadcrumb Tanpa Judul Artikel

Jika ingin menampilkan breadcrumb tanpa judul postingan, yakni hanya berisi link ke Homepaga dan Halaman Label, maka ini kode dan cara memasangnya.

1. Pasang kode CSS Breadcrumb ini di atas kode ]]></b:skin>

.breadcrumbs {font-size: 90%!important;margin-bottom: 15px;border-bottom: 1px solid #eee;padding-bottom: 5px;}
.breadcrumbs a{color:#888}

2. Copas kode berikut ini di bawah kode <b:includable id='main' var='top'> 

<b:include data='posts' name='breadcrumb'/>

3. Copas kode berikut ini di atas kode <b:includable id='comment-form' var='post'>

   <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'>
<b:loop index='nomor' values='data:post.labels' 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:elseif cond='data:view.isPage'/>
<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> &amp;nbsp;&#8250;&amp;nbsp;
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'>
  <span itemprop='name'><data:blog.pageName/></span>
</a>
</span>
</div>
</b:if>
</b:includable>

4. Simpan Template.

Cara lainnya Memasang Breadcrumb Blog Tanpa Error

Ini cara membuat breadcrumb blog dari Maskolis, tidak error, namun tidak terindeks mesin pencari.

1. Klik Tema > Edit HTML.

2. Copas kode berikut ini tepat sebelum kode ]]></b:skin> atau </style>

.breadcrumbs{ padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:1px solid #cadaef}

3. Cari (Ctrl+F) kode seperti ini : <div class='post hentry'>

4. Copas atau simpan kode breadcrumb blog berikut ini tepat setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

5. Save. Simpan Template!

Demikian cara membuat atau menampilkan breadcrumb dengan schema markup BreadcrumbList dan tidak error di Structured Data.

Good Luck & Happy Blogging! (www.contohblog.com).*