Membuat Breadcrumb Microdata Schema.Org Memakai Ikon Svg

Baca Juga

Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG - Pada waktu yang kemudian Saya sudah membagikan tutoral Cara Membuat Breadcrumbs/Navigasi Terindex Google. Dan pada kesempatan kali ini Saya akan coba posting dengan judul cara Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG.

Breadcrumb yakni sebuah hidangan navigasi berupa list yang akan di tampilkan di halaman pencarian. Breadcrumb akan tampil dibawah url blog anda di hasil pencarian.

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

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

Nah, jikalau Anda ingin Membuat Breadcrumb Microdata Schema.org Menggunakan Ikon SVG ini di blog Anda, mari kita lihat caranya dibawah ini.

Silahkan copy isyarat 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'>
 <a expr:href='data:blog.homepageUrl' title='Home'>
 <svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
 <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' itemscope='itemscope' itemtype='https://schema.org/Thing'>
 <span itemprop='name'><data:label.name/></span>
 </a>
 <meta expr:content='data:num+1' 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 isyarat <b:includable id='comment-form' var='post'>. Jika sebelumnya sudah ada isyarat yang menyerupai atau menyerupai mirip itu, silahkan ganti dengan isyarat 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 isyarat berikut di mana Anda ingin menampilkan breadcrumb.

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

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