Pelajari cara mengaktifkan dan mengimplementasikan Yoast SEO breadcrumbs di WordPress. Panduan lengkap mulai dari pengaturan, penambahan kode tema, penggunaan shortcode, hingga optimasi SEO.
Breadcrumbs merupakan salah satu komponen penting dalam navigasi situs yang sering diabaikan, padahal perannya sangat vital dalam meningkatkan pengalaman pengguna sekaligus performa SEO.
Plugin Yoast SEO menyediakan fitur breadcrumbs yang dapat membantu menampilkan struktur navigasi yang rapi dan mudah dipahami oleh pengunjung maupun mesin pencari. Namun, meskipun Yoast SEO menyediakan fitur ini, implementasinya tidak otomatis muncul di situs.
Terdapat langkah-langkah tertentu yang harus dilakukan agar breadcrumbs dapat muncul di frontend website, baik melalui penambahan kode tema, penggunaan block editor, maupun shortcode.
Artikel ini membahas tuntas apa itu breadcrumbs, mengapa penting untuk SEO, bagaimana Yoast SEO mengeluarkan data breadcrumbs dalam format JSON-LD, cara mengaktifkannya, cara mengimplementasikannya di seluruh situs, serta cara menampilkannya pada halaman tertentu. Semua pembahasan disusun dalam bahasa yang mudah dipahami namun mendalam, sehingga cocok untuk pemula, web developer, maupun praktisi SEO.
Memahami Breadcrumbs dan Perannya dalam SEO
Breadcrumbs adalah elemen navigasi yang menunjukkan lokasi pengguna di dalam struktur sebuah website. Breadcrumbs ditampilkan dalam bentuk jalur hierarki, misalnya:
Beranda > Blog > Panduan SEO > Cara Implementasi Breadcrumbs
Navigasi seperti ini memberikan gambaran kepada pengguna tentang lokasi halaman yang sedang mereka buka serta kemana mereka dapat kembali. Dari sisi pengalaman pengguna, breadcrumbs memberikan kemudahan navigasi tanpa harus mengandalkan tombol kembali di browser. Pengunjung dapat melompat ke kategori atau subkategori dengan mudah.
Dari sisi SEO, breadcrumbs sangat disukai Google dan menjadi salah satu elemen yang bisa meningkatkan CTR. Google sering mengganti tampilan URL pada hasil pencarian dengan jalur breadcrumbs yang lebih jelas. Hal ini membuat tampilan hasil pencarian lebih rapih, informatif, dan meningkatkan peluang pengguna mengklik hasil tersebut.
Selain itu, breadcrumbs memperjelas struktur website. Googlebot yang merayapi situs dapat memahami secara lebih jelas hubungan antarhalaman, kategori, serta level hirarki sebuah konten. Semakin jelas struktur situs, semakin mudah halaman mendapatkan relevansi dan ranking yang lebih kuat.
Mengapa Yoast SEO Menyediakan Fitur Breadcrumbs
Yoast SEO bukan hanya plugin untuk mengatur judul, meta description, atau sitemap. Plugin ini juga menyediakan fitur breadcrumbs berbasis JSON-LD, yaitu format structured data yang direkomendasikan oleh Google.
Sebelum adanya JSON-LD, banyak situs menggunakan microdata atau RDFa. Namun JSON-LD kini dianggap lebih stabil, lebih mudah diterapkan, dan lebih cepat diproses oleh mesin pencari. Karena itu, Yoast SEO secara default memilih JSON-LD sebagai metode output breadcrumbs.
Fitur breadcrumbs Yoast SEO juga fleksibel sehingga pengguna WordPress dapat:
- menampilkan breadcrumbs di seluruh situs
- menampilkan breadcrumbs hanya pada halaman tertentu
- memodifikasi tampilannya sesuai tema
- mengontrol pemisah breadcrumbs, tautan induk, dan struktur navigasi lainnya
Karena Yoast SEO sangat populer, fitur ini menjadi standar implementasi breadcrumbs bagi banyak situs WordPress.
Bagaimana Breadcrumbs Yoast SEO Ditampilkan di Kode Sumber
Saat diaktifkan, Yoast SEO akan menambahkan structured data breadcrumbs ke dalam halaman. Contoh format JSON-LD yang dihasilkan adalah sebagai berikut:
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "WebPage",
"name": "Home"
}
}
]
Struktur ini memberi sinyal kepada Google tentang urutan halaman dalam hierarki website. Yoast menyusun data ini secara otomatis berdasarkan:
- jenis konten
- struktur permalink
- kategori utama yang dipilih
- pengaturan breadcrumbs di Yoast
Dengan menggunakan JSON-LD, Anda tidak perlu lagi menempatkan markup langsung ke elemen HTML, sehingga implementasinya lebih aman dan mudah.
Mengapa Breadcrumbs Tidak Muncul Secara Default
Walaupun fitur breadcrumbs tersedia di Yoast SEO, plugin ini tidak menampilkan breadcrumbs secara otomatis di frontend website. Alasannya sederhana: setiap tema WordPress memiliki struktur berbeda, sehingga mustahil bagi Yoast untuk menempatkan breadcrumbs di posisi yang tepat tanpa mengubah tema secara langsung.
Karena itu, Yoast memberikan tiga metode implementasi breadcrumbs:
- menambahkan kode PHP ke file tema
- menggunakan block editor
- menggunakan shortcode
Dengan demikian, pengguna WordPress dapat memilih metode apa yang paling sesuai dengan kebutuhan situs mereka.
Cara Mengaktifkan Breadcrumbs di Yoast SEO
Langkah pertama sebelum menampilkan breadcrumbs adalah mengaktifkan fitur ini. Berikut cara mengaktifkannya melalui dashboard WordPress.
Masuk ke Dashboard WordPress
Buka menu Yoast SEO
Masuk ke bagian Settings
Pilih menu Advanced
Pilih menu Breadcrumbs
Aktifkan fitur Enable breadcrumbs for your theme
Jika fitur telah aktif, toggle akan berubah menjadi ungu dengan tanda centang. Di area pengaturan breadcrumbs, Anda juga dapat menyesuaikan beberapa parameter seperti:
- pemisah breadcrumbs
- apakah halaman depan tampil sebagai Home atau nama lain
- apakah kategori atau taksonomi harus ditampilkan
- apakah halaman induk muncul dalam jalur navigasi
Setelah selesai mengatur, jangan lupa klik Save changes.
Mengimplementasikan Breadcrumbs Yoast SEO di Seluruh Website
Jika Anda ingin menampilkan breadcrumbs di seluruh situs, misalnya di atas judul artikel, Anda perlu menambahkan kode PHP secara manual ke file tema.
Berikut kode yang harus dimasukkan:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Kode ini akan memanggil fungsi breadcrumbs yang disediakan oleh Yoast dan menampilkannya pada posisi yang Anda inginkan.
Namun sebelum menambahkan kode ini, sangat penting untuk melakukan backup terlebih dahulu karena kesalahan edit tema dapat membuat situs Anda error. Jika Anda menggunakan tema premium, sebaiknya gunakan child theme agar perubahan tidak hilang saat tema diperbarui.
Di Mana Menempatkan Kode Breadcrumbs di Tema
Lokasi paling umum untuk menempatkan kode breadcrumbs adalah:
- di file single.php, tepat di atas judul artikel
- di file page.php untuk halaman statis
- di file header.php di bagian akhir sebelum konten utama
- di file archive.php untuk kategori dan tag
Pilihan lokasi tergantung pada bagaimana tema Anda menampilkan struktur halaman. Jika Anda tidak yakin, coba tempatkan satu per satu hingga menemukan posisi yang paling sesuai.
Sebagian besar tema modern menggunakan template modular, sehingga Anda mungkin harus mencari file seperti content-single.php atau template-parts/content.php. Breadcrumbs dapat ditempatkan setelah hook pembuka konten.
Yang perlu diperhatikan, pada tema tertentu jangan letakkan kode breadcrumbs di functions.php, karena fungsi tersebut tidak akan menampilkan output HTML langsung.
Menggunakan Yoast Breadcrumbs Block di Block Editor
Jika Anda tidak ingin mengedit file tema, Anda dapat menggunakan block editor. Yoast menyediakan block khusus untuk menampilkan breadcrumbs pada halaman tertentu.
Berikut cara menggunakan block breadcrumbs:
Masuk ke Dashboard WordPress
Pilih Posts atau Pages
Buka halaman yang ingin diberi breadcrumbs
Klik tanda plus untuk menambahkan block baru
Cari block bernama Yoast Breadcrumbs
Tambahkan ke halaman
Breadcrumbs akan langsung muncul di area konten halaman tersebut. Namun perlu diingat, metode ini hanya menampilkan breadcrumbs di halaman yang Anda atur, bukan seluruh situs.
Menambahkan Breadcrumbs Menggunakan Shortcode
Jika Anda lebih nyaman menggunakan shortcode, Yoast juga menyediakan cara menampilkan breadcrumbs melalui shortcode.
Gunakan shortcode berikut:
[wpseo_breadcrumb]
Shortcode ini dapat digunakan pada:
- Posts
- Pages
- Categories
- Tags
Anda hanya perlu menambahkan block Shortcode di editor, lalu memasukkan kode di atas. Breadcrumbs akan tampil hanya pada halaman yang memuat shortcode tersebut.
Breadcrumbs di Classic Editor
Untuk pengguna Classic Editor, prosesnya sangat mudah. Cukup tempelkan shortcode berikut di mana pun Anda ingin menampilkan breadcrumbs:
[wpseo_breadcrumb]
Letakkan di bagian atas konten jika ingin breadcrumbs muncul sebelum judul, atau di bagian bawah jika ingin tampil sebagai navigasi tambahan.
Tips SEO dalam Menggunakan Breadcrumbs Yoast SEO
Setelah breadcrumbs berhasil diimplementasikan, ada beberapa tips SEO yang perlu diperhatikan agar hasilnya maksimal.
Struktur kategori harus rapi
Jika kategori tidak tertata dengan baik, breadcrumbs juga akan berantakan.
Gunakan kategori utama yang relevan
Yoast memungkinkan Anda memilih kategori utama. Pastikan selalu memilih kategori yang paling tepat.
Pastikan tidak ada dua breadcrumbs aktif
Jika tema Anda sudah memiliki breadcrumbs bawaan, matikan salah satunya.
Cek output JSON-LD dengan Google Rich Results Test
Pastikan tidak ada error pada structured data.
Gunakan child theme
Gunakan child theme setiap kali mengedit file tema agar tidak hilang saat update.
Pastikan permalink tidak berubah
Perubahan permalink akan memengaruhi struktur breadcrumbs serta indexing Google.
Gunakan tampilan breadcrumbs yang konsisten
Gunakan format pemisah yang sama di seluruh situs untuk konsistensi visual.
Kesimpulan
Breadcrumbs adalah elemen penting dalam navigasi website dan SEO. Yoast SEO menyediakan fitur breadcrumbs berbasis JSON-LD yang mampu meningkatkan struktur data dan membantu Google memahami konteks halaman dan hierarki situs Anda.
Untuk mengimplementasikannya, Anda bisa:
- mengaktifkan fitur breadcrumbs di pengaturan Yoast
- menambahkan kode PHP ke file tema
- menggunakan block editor Yoast
- menggunakan shortcode pada halaman tertentu
Dengan menerapkan breadcrumbs dengan benar, situs Anda akan memiliki struktur navigasi yang lebih baik, pengalaman pengguna lebih optimal, dan potensi SEO yang lebih kuat.
