Bagi kamu yang belum tahu cara membuat Breadcrumb di Blogger agar blog mu menjadi lebih SEO friendly, kamu sedang membaca artikel yang tepat karena kamu akan menemukan caranya disini.
Selain membagikan cara membuatnya, Gubuk Pintar juga akan memaparkan sekilas tentang apa itu Breadcrumb dan keuntungan menggunakannya.
Yuk simak lebih lanjutnya artikelnya!
| Daftar Isi |
Apa Itu Breadcrumb?
Breadcrumb adalah skema navigasi sekunder dari sebuah situs yang memiliki stuktur hierarki untuk menunjukkan lokasi pengguna.
Sejatinya, kamu dapat menemukan lokasi mu di dalam sebuah situs melalui alamat URL nya. Contohnya seperti berikut ini,
>https://www.gubukpintar.com/2021/03/cara-menggunakan-dns-prefetch-agar-loading-blog-cepat.html
URL diatas biasa kamu temukan untuk situs berbasis Blogger, dimana pengelompokkan berbasis pada waktu penerbitan artikel.
Bagian
https://www.gubukpintar.com menunjukkan alamat beranda situs. Selanjutnya, 2021 merupakan label waktu dalam satuan tahun yang menunjukkan kapan artikel dibuat. Dalam label 2021, terdapat pula label 03 yang menunjukkan bulan.Nah, bagian
cara-menggunakan-dns-prefetch-agar-loading-blog-cepat.html menunjukkan halaman yang sedang kamu buka. Ini adalah hierarki dari halaman tersebut. Namun karena sulit bagi pembaca untuk bernavigasi menggunakan alamat URL, Breadcrumb pun dibutuhkan. Contoh Breadcrumb di Gubuk Pintar seperti berikut ini,
 |
| Contoh Breadcrumb Blog Pada Gubuk Pintar |
Kamu juga dapat melihatnya secara langsung di bagian atas artikel ini.
Keuntungan dari penggunaan Breadcrumb sendiri yaitu,
- Mempermudah pengguna untuk kembali ke halaman yang lebih umum (kategori, label atau beranda).
- Menurunkan bounce rate karena pengguna dapat dengan mudah mengakses halaman yang lebih umum (khusus untuk pengguna yang datang dari halaman pencarian).
- Navigasi dapat dilakukan secara langsung dan praktis dalam halaman yang sedang di akses.
- Tampilan pada halaman pencarian lebih rapi dan profesional.
- Mengoptimalkan SEO (mesin pencari melihat ini sebagai salah satu faktor yang menunjukan user experience yang positif).
Baca Juga: Cara Memasang Meta Tag SEO Friendly di Blog
Cara Membuat Breadcrumb di Blogger
Ada dua cara yang dapat kamu gunakan untuk memasang Breadcrumb di Blogger yaitu dengan Microdata HTML dan JSON-LD. Gubuk Pintar akan cantumkan pula kelebihan dan kekurangan dari keduanya.
Cara Memasang Breadcrumb di Blogger Menggunakan Microdata HTML Schema.org
Kelebihan dari cara ini yaitu Breadcrumbnya akan muncul di halaman dan dapat memberikan informasi navigasi halaman tidak hanya kepada mesin pencari tetapi juga pengunjung blog. Adapun kekurangannya yaitu proses pemasangannya yang tahapannya lebih panjang.
Ikuti langkah berikut ini untuk membuatnya,
- Buka Edit HTML Tema blog mu
- Cari kode
<b:includable id='comment-form' var='post'> - Letakkan kode berikut ini DI ATAS
<b:includable id='comment-form' var='post'><b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<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'>
<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 + "?&max-results=16"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<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>
Apabila sebelumnya sudah ada kode sejenis, silahkan ganti dengan kode diatas ya. - Letakkan CSS berikut ini DI ATAS kode
</style>atau]]></b:skin>/* 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} - Letakkan kode berikut ini di lokasi yang kamu ingin kan untuk menampilkan Breadcrumb,
<b:include data='posts' name='breadcrumb'/>
Biasanya, Breadcrumb dimunculkan di bagian atas artikel. Untuk itu, kamu dapat meletakkannya di bawah kode<b:includable id='main' var='top'>. - Simpan Tema
Proses diatas merupakan cara membuat Breadcrumb di Blogger yang di bagikan oleh situs Kompi Ajaib dan telah berhasil Gubuk Pintar aplikasikan di blog ini. Cara ini juga menggunakan ikon SVG yang membuat tampilan Breadcrumbnya menjadi semakin menarik seperti Breadcrumb Gubuk Pintar.
Cara Memasang Breadcrumb di Blogger Menggunakan JSON-LD
Untuk yang satu ini, cara pemasangannya cukup mudah dan tanpa menggunakan HTML ataupun CSS apapun yang berpengaruh pada halaman blog. Hanya saja, Breadcrumb ini tidak tampil di halaman blog. Jadi, hanya mesin pencari saja yang dapat mengakses navigasinya.
Cara membuatnya seperti berikut ini,
- Buka Edit HTML Tema blog
- Cari kode
<data:post.body/> - Letakkan script berikut ini DI BAWAH nya,
<script type='application/ld+json'>{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "<data:blog.homepageUrl.canonical/>"
<b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
{
"@type": "ListItem",
"position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
"name": "<data:label.name/>",
"item": "<data:label.url.canonical/>"
<b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
]
}</script> - Simpan Tema
Cara Validasi Breadcrumb di Blog
Setelah kamu memasang Breadcrumb, pastikan bahwa Breadcrumb tersebut dapat dibaca oleh mesin pencari. Salah satu caranya adalah dengan memanfaatkan Google Search Console.
Ikuti langkah berikut ini,
- Buka Google Search Console
- Uji salah satu alamat URL artikel blog mu
- Apabila Breadcrumb telah valid, maka akan muncul seperti berikut ini
Contoh Breadcrumb Yang Tervalidasi - Kamu dapat melihat detailnya yang kurang lebih seperti ini,
Informasi Detail Pada Breadcrumb - Apabila sudah sesuai, maka Breadcrumb situs mu sudah valid dan terstruktur dengan baik
Selain menggunakan Google Search Console, kamu juga dapat memvalidasinya menggunakan Google Rich Result.
Penutup
Seperti itulah cara membuat Breadcrumb di Blogger untuk optimalisasi SEO blog mu. Semoga artikel ini bisa bermanfaat ya.
***
Apabila
memiliki pertanyaan seputar artikel Cara Membuat Breadcrumb di Blogger Agar SEO Friendly, silahkan tulis dikolom komentar ya.
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
Mantap mas tutorialnya jelas banget dan mudah dipahami
BalasHapus