Cara Membuat Breadcrumbs Versi Terbaru SEO Valid HTML5

Cara Membuat Breadcrumbs Versi Terbaru SEO Friendly, Valid HTML5 dan mengunakan markup Schema.org.. Breadcrumb blog bisa digeser atau di slide ke samping..memasang breadcrumb di blog sangat disarankan...

Daftar Isi:

Cara Membuat Breadcrumbs Versi Terbaru SEO Friendly Valid HTML5 - Breadcrumb merupakan menu navigasi kecil yang umumnya berada di atas halaman postingan blog, fungsi dari breadcrumb adalah untuk memberitahukan kepada pembaca atau visitor dimana lokasi mereka pada website atau blog.

Menurut saya, jika memasang breadcrumb pada blogspot atau website berarti sama saja dengan memasang internal link secara otomatis, karena isi breadcrumb ini adalah sebuah link yang menuju homepage, label / kategori postingan.

Dengan memasang Breadcrumb bisa sangat mendukung dalam SEO, karena membantu memudahkan googlebot untuk mengenali data terstruktur dalam blog.

Di postingan ini, saya akan membagikan Breadcrumb Blog SEO Friendly Keren Valid HTML5 dan mengunakan markup Schema.org.

Baca Juga: Trik Mengoptimalkan SEO OnPage Blogger

Cara Membuat Breadcrumbs Versi Terbaru SEO Valid HTML5

1. Buka Blogger > Klik Menu Template > Edit HTML > Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* Breadcrumb */
.breadcrumbs {
 background: #fff;
 line-height: 1.2em;
 display: inline-block;
 padding: 10px 4px 7px;
 overflow: hidden;
 font-size: 80%;
 color: #000;
 font-weight: 400;
 border-top: 1px solid #000
}
.breadcrumbs a {
 display: inline-block;
 text-decoration: none;
 transition: all .3s ease-in-out;
 color: #000;
 font-weight: 400
}
.breadcrumbs a:hover {
 color: #0f7aff
}
.wadah {
 white-space: nowrap;
 overflow: auto;
 padding: 2px 4px;
 margin-bottom: 5px
}
.breadcrumbs svg {
 width: 16px;
 height: 16px;
 vertical-align: -4px
}

2. Selanjutnya, Cari kode seperti ini.

<b:includable id='breadcrumb' var='posts'>

...............
...............

</b:includable>

3. Jika sudah ketemu, hapus kode tersebut lalu ganti dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#8250; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='wadah'>
<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> <a expr:href='data:blog.homepageUrl' title='Home'><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' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing' rel='tag'><span itemprop='name'><data:label.name/> </span>
</a> / <meta expr:content='data:num+1' itemprop='position'/>
</span>
</b:loop><span><data:post.title/></span>
</div>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#8250; <span>Archive for <data:blog.pageName/></span> 
</div> 
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#8250; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#8250; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#8250; <span><data:blog.pageName/></span> 
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan Template.

Selain SEO, breadcrumb yang saya bagikan juga mengunakan icon svg serta sangat unik dan berbeda dari breadcrumb yang dipakai oleh kebanyakan blogger Indonesia. Breadcrumb ini Keren, bisa di geser ke samping.

Untuk demo, silahkan sobat lihat breadcrumb yang saya pakai atau bisa melalui link dibawah

Cek Breadcrumb Blog
Untuk mengetahui breadcrumb sudah terpasang dengan benar, silahkan sobat kunjungi https://search.google.com/structured-data/testing-tool, isi form dengan url artikel.

Itulah artikel tentang Cara Membuat Breadcrumbs Versi Terbaru SEO Valid HTML5, semoga bermanfaat, terimakasih sudah berkunjung. Happy Blogging!!
(https://masihterjaga.blogspot.com)

Terkait Dengan Cara Membuat Breadcrumbs Versi Terbaru SEO Valid HTML5

Kebijakan Berkomentar: Berikan komentar sesuai bahasan artikel dengan tidak mencantumkan link aktif, hal ini bertujuan agar komentar Anda tidak dianggap sebagai spam, Terimakasih. :))
Komentar