Membuat Breadcrumb Microdata Schema.Org Dengan Ikon Svg

Sebenarnya tidak perlu markup apa pun untuk menciptakan breadcrumb tampil di hasil pencarian, yang penting ada navigasi halaman berupa list.

Namun apa pun itu, sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari menyerupai Google. Salah satunya menciptakan breadcrumb dengan markup schema.org.

Kali ini aku akan membagikan cara menciptakan breadcrumb untuk Blogger dengan memakai markup microdata schema.org dengan menambahkan ikon SVG sebagai separator dari tiap labelnya.


Untuk menciptakan menyerupai itu, silahkan ikuti langkahnya berikut ini.

Silahkan copy instruksi 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'>
 <svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
 <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
 <a expr:href='data:blog.homepageUrl' title='Home' itemprop='item' itemtype='https://schema.org/Thing'>
 <span itemprop='name'>Home</span></a>
 <meta content='1' itemprop='position'/>
 </span>
 <svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></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=16&quot;' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing'>
 <span itemprop='name'><data:label.name/></span>
 </a>
 <meta expr:content='data:num+2' itemprop='position'/>
 </span>
 <b:if cond='data:label.isLast != &quot;true&quot;'>
 <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
 </b:if>
 </b:loop>
 <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
 <span><data:post.title/></span>
 </div>
 </b:if>
 </b:loop>
 </b:if>
 </b:includable>

Silahkan simpan di atas instruksi <b:includable id='comment-form' var='post'>. Jika sebelumnya sudah ada instruksi yang menyerupai atau menyerupai mirip itu, silahkan ganti dengan instruksi di atas.

Kemudian tambahkan CSS style berikut semoga tampilan breadcrumb menjadi rapih.

 /* Breadcrumb */
 .breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;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:#666;font-weight:400}
 .breadcrumbs a:hover{color:#11589D}
 .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
 .breadcrumbs svg path{fill:#666}

Terakhir, simpan instruksi berikut di mana Anda ingin menampilkan breadcrumb.

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

Sebagai contoh, Anda dapat simpan di bawah instruksi <b:includable id='main' var='top'> dan breadcrumb akan tampil di bab atas postingan.

Selamat mencoba dan semoga bermanfaat.

Share this post