Cara Membuat Breadcrumbs Versi Terbaru SEO Friendly Valid HTML5 - Breadcrumb merupakan sajian navigasi kecil yang umumnya berada di atas halaman postingan blog, fungsi dari breadcrumb yakni untuk memberitahukan kepada pembaca atau visitor dimana lokasi mereka pada website atau blog.
Menurut saya, jikalau memasang breadcrumb pada blogspot atau website berarti sama saja dengan memasang internal link secara otomatis, alasannya isi breadcrumb ini yakni sebuah link yang menuju homepage, label / kategori postingan.
Dengan memasang Breadcrumb dapat sangat mendukung dalam SEO, alasannya membantu memudahkan googlebot untuk mengenali data terstruktur dalam blog.
Di postingan ini, aku 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 instruksi 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 instruksi ibarat ini.
<b:includable id='breadcrumb' var='posts'>...</b:includable>3. Jika sudah ketemu, hapus instruksi tersebut kemudian ganti dengan instruksi dibawah ini.
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> › <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <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' itemscope='itemscope' 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 == "archive"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> › <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> › <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> › <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> › <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 aku bagikan juga mengunakan icon svg serta sangat unik dan berbeda dari breadcrumb yang digunakan oleh kebanyakan blogger Indonesia. Breadcrumb ini Keren, dapat di geser ke samping.
Untuk demo, silahkan sahabat lihat breadcrumb yang aku pakai atau dapat melalui link dibawah
Cek Breadcrumb Blog
Untuk mengetahui breadcrumb sudah terpasang dengan benar, silahkan sahabat kunjungi https://search.google.com/structured-data/testing-tool, isi form dengan url artikel.
Itulah artikel perihal Cara Membuat Breadcrumbs Versi Terbaru SEO Valid HTML5, biar bermanfaat, terimakasih sudah berkunjung. Happy Blogging!!
(https://masihterjaga.blogspot.com)
