Tips blogging kali ini tentang Cara Membuat Breadcrumb di Blogger dan WordPress. Breadcrumb secara bahasa artinya remah roti.
Konon, nama breadcrumb memang berasal dari kisah seseorang yang meninggalkan jejak di hutan dengan remah roti. Jejak itu membuat tim pencari mudah melacak posisi seseorang tersebut.
Dalam blogging atau desain web, breadcrumbs adalah tautan teks berisi link ke halaman depan (Homepage) dan halaman label/kategori.
Breadcrumbs membantu pengguna Anda menavigasi situs Anda dengan lebih baik. Breadcrumbs juga ditampilkan di Google untuk pengalaman pengguna yang lebih baik. Ini artinya, breadcrumb itu penting dan menambah SEO blog.
Cara Membuat Breadcrumb di Blogger
Berikut ini cara menampikan breadcrumb di Blogger:
1. Pasang kode CSS breadcrumb berikut ini di atas kode ]]></b:skin>
.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0 0 10px;margin:0 auto 10px;font-size:87%;color:#888;font-weight:300}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
2. Pasang kode berikut ini tepat di bawah kode <b:includable id=’main’ var=’top’>
<b:include data='posts' name='breadcrumb'/>
3. Pasang 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>
Simpan template.
Kini blog Anda sudah memunculkan breadcrumb di atas judul postingan. Terdiri dari link ke halaman depan dan halaman label, tanpa judul. Misalnya: Home > Blogging
Cara Membuat Breadcrumb di WordPress
Untuk menampilkan breadcrumb di WP lebih mudah. Cukup pasang dan aktifkan (enable) breadcrumbs di plugin Yoast SEO.
Setelah mengaktifkan breadcrumb, otomatis muncul di atas judul. Namun, jika tidak muncul, bisa menerapkan tips di panduan setting breadcrumb Yoast.
