Cara Menampilkan Breadcrumb Blogger Terbaru Tanpa Error
January 23, 2020
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 + "?&max-results=10"' 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'> &nbsp;›&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 + "?&max-results=8"' expr:title='data:label.name' itemprop='item' rel='nofollow'>
<span itemprop='name'><data:label.name/></span>
</a>
</span>
</b:loop>
<b:else/>
&nbsp;›&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> &nbsp;›&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.
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 == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <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 != "true"'> , </b:if> </b:loop> </b:if> » <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).*
Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
halo mas, saya sudah mencobanya tapi ternyata masih eror
ReplyDeleteSumber error itu schema breadcrumb di data vocabulary. Kode di atas tanpda schema jadi gak mungkin error
DeleteMas,saya pasang bredcrumb,kok yang muncul malah begini :
ReplyDeleteLink artikel-tanggal postingan
Pengenya begini :
Link artikel-label-tanggal posting,
Gimana caranya mas?
Anehnya,erorr itu cuma versi mobile,versi dekstop normal ( urutan seperti yang saya inginkan)
Di breadcrumb ada tanggal postingan? Sungguh janggal....! Salah kode kali tuh.
DeleteTidak mas,saya lihat kalau browsing di hp,BANYAK blog yang seperti itu bredcrumb nya.Coba deh agan lihat,dan tidak ada artikel yang membahas ini lohh.
Deletesaya pakai tips " breadcrumbs yang TANPA JUDUL " tips yang kedua.
DeleteKhusus untuk kode yang dipasang di id=main var top
Dia tidak bisa kalau tanpa tag penutup b=include
Jadi harus pasang didalam id=main var topnya ( apa ini kesalahanya )?