Tutorial Lengkap Pasang Schema Markup Breadcrumbs Blogger

Dalam era persaingan mesin pencari yang semakin ketat, tampil di halaman pertama saja terkadang tidak cukup untuk menarik perhatian pengunjung. Anda membutuhkan sebuah fitur yang membuat tampilan artikel Anda berbeda dan lebih menonjol dibandingkan situs kompetitor. Solusi paling efektif untuk mencapai hal tersebut adalah dengan menanamkan struktur data khusus yang mampu berkomunikasi langsung dengan algoritma Google. Panduan ini akan membagikan cara mengimplementasikan struktur data navigasi tersebut dengan mudah di blog Anda.

Mengenal Kode Schema Markup dan Breadcrumbs

Kode struktur data atau schema markup adalah sebuah bahasa penerjemah tersembunyi yang membantu mesin pencari memahami konteks dan isi dari halaman blog Anda. Sementara itu, breadcrumbs adalah jalur navigasi logis yang menunjukkan hierarki atau posisi sebuah artikel di dalam struktur situs. Jika kedua elemen ini digabungkan melalui format pemrograman ringan yang disebut JSON-LD, Google akan mampu membaca jalur navigasi tersebut dan menampilkannya secara visual di halaman hasil pencarian.

Manfaat Utama untuk Kelangsungan Blog

Keuntungan terbesar dari penerapan kode pintar ini adalah peningkatan drastis pada rasio klik tayang artikel Anda. Tampilan hasil pencarian yang dilengkapi jalur navigasi terlihat jauh lebih profesional, terpercaya, dan rapi di mata calon pengunjung. Selain itu, mesin pencari akan lebih mudah merayapi struktur tautan situs Anda, yang secara jangka panjang akan sangat mendongkrak reputasi dan otoritas blog Anda di mata algoritma penilaian situs.

Contoh Penerapan di Halaman Blog

Mari kita bayangkan saat seseorang mencari tutorial di mesin pencari. Tanpa kode struktur data ini, tautan blog Anda akan terlihat panjang, kaku, dan dipenuhi dengan deretan angka tahun serta bulan publikasi. Namun, setelah kode ini dipasang, tautan yang panjang tersebut akan diubah oleh Google menjadi jalur navigasi yang cantik, misalnya bertuliskan nama blog Anda kemudian diikuti tanda panah kecil dan judul spesifik artikel Anda. Tampilan yang bersih ini secara psikologis terbukti sangat mengundang klik.

Kode Lengkap Siap Pakai

Berikut adalah susunan kode berformat JSON-LD yang sudah disesuaikan dengan tag dinamis bawaan Blogger. Kode ini bekerja secara otomatis di latar belakang dan sama sekali tidak akan merusak atau merubah tampilan visual desain template situs Anda, sehingga sangat aman untuk digunakan oleh pemula sekalipun.

<b:if cond='data:view.isPost'>
  <script type='application/ld+json'>
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Beranda",
        "item": "<data:blog.homepageUrl.jsonEscaped/>"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "<data:view.title.jsonEscaped/>",
        "item": "<data:view.url.jsonEscaped/>"
      }
    ]
  }
  </script>
</b:if>

Cara Memasang Kode di Blogger

Langkah pertama, silakan masuk ke dashboard pengelola akun Blogger Anda menggunakan peramban web di komputer agar lebih leluasa. Temukan panel menu di sebelah kiri layar Anda, kemudian gulir ke bawah dan klik menu Tema untuk masuk ke halaman pengaturan kerangka situs.

Langkah kedua, klik ikon panah kecil yang terletak persis di sebelah kanan tombol Sesuaikan. Setelah muncul menu tarik-turun dengan berbagai pilihan, silakan klik opsi Edit HTML untuk membuka jendela editor yang berisi kode sumber template Anda.

Langkah ketiga, klik satu kali menggunakan tetikus di area kosong mana saja di dalam editor kode tersebut. Selanjutnya, tekan tombol kontrol dan huruf F secara bersamaan pada keyboard untuk memanggil kotak fitur pencarian. Ketikkan tag penutup kepala dokumen yaitu </head> di dalam kotak pencarian tersebut dan tekan tombol enter untuk menemukannya.

Langkah keempat, salin seluruh baris kode struktur data yang telah disediakan pada bagian sebelumnya. Tempelkan kode yang baru saja Anda salin persis satu baris di atas tag </head> yang berkedip. Pastikan Anda berhati-hati agar tidak ada satupun karakter dari kode template lama yang terhapus secara tidak sengaja.

Langkah kelima, simpan perubahan template Anda dengan mengklik ikon berbentuk disket yang berada di sudut kanan atas layar. Tunggu beberapa saat hingga proses pemrosesan selesai dan layar menampilkan pemberitahuan bahwa pembaruan telah berhasil disimpan.

Cara Menguji Keberhasilan Script

Setelah kode terpasang dengan baik, Anda wajib memastikan bahwa sistem Google dapat membacanya tanpa hambatan. Anda bisa melakukan pengujian ini secara gratis menggunakan alat resmi yang disediakan oleh Google, yaitu halaman Pengujian Hasil Kaya.

Silakan buka situs web Pengujian Hasil Kaya Google melalui peramban Anda, lalu tempelkan alamat URL salah satu artikel blog Anda yang sudah dipublikasikan dan tekan tombol uji URL. Jika kode terpasang dengan benar, dalam hitungan menit Anda akan melihat indikator centang hijau dengan keterangan bahwa item Breadcrumbs valid dan terdeteksi pada halaman tersebut. Ini menandakan blog Anda sudah siap tampil menonjol di halaman pencarian.

Kesalahan Umum Saat Mengedit Template

Terjadi Duplikasi Kode Struktur Data

Salah satu kendala yang sering diabaikan adalah fakta bahwa beberapa template hasil unduhan ternyata sudah memiliki fitur struktur data bawaan. Memasang dua kode yang memiliki fungsi sama akan membuat mesin pencari kebingungan dalam merender tampilan. Sebelum menempelkan kode baru ini, selalu periksa alamat artikel Anda di situs pengujian terlebih dahulu. Jika hasilnya kosong atau belum ada keterangan Breadcrumbs, maka Anda bebas untuk memasang script ini.

Posisi Penempatan yang Kurang Tepat

Kode dengan format JSON-LD sangat disarankan untuk ditempatkan di dalam area kepala dokumen agar lebih cepat dipindai oleh robot perayap Google sesaat setelah mereka tiba di situs Anda. Menempelkan kode ini di luar tag kepala, misalnya di bagian paling bawah dokumen tubuh, sering kali menyebabkan instruksi navigasi terlambat terbaca atau bahkan diabaikan sepenuhnya oleh perayap mesin pencari.

Penutup

Semoga panduan pemasangan kode navigasi struktur data ini bermanfaat dan mampu memberikan dampak positif yang terukur bagi pertumbuhan lalu lintas pengunjung blog Anda. Jika Anda menemui kesulitan teknis atau memiliki pertanyaan lanjutan seputar proses pemasangan di atas, silakan berdiskusi melalui kolom komentar yang telah disediakan di bawah. Ikuti terus pembaruan dari blog ini untuk mendapatkan berbagai trik optimasi mesin pencari dan panduan modifikasi template menarik lainnya. Selamat mencoba dan semoga sukses!

Link profil berhasil disalin!