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 aba-aba 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 aba-aba <b:includable id='comment-form' var='post'>. Jika sebelumnya sudah ada aba-aba yang menyerupai atau menyerupai mirip itu, silahkan ganti dengan aba-aba di atas.

Kemudian tambahkan CSS style berikut biar 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 aba-aba berikut di mana Anda ingin menampilkan breadcrumb.

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

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

Selamat mencoba dan semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post