Cara Memasang Yoast SEO Breadcrumb di WordPress

Breadcrumb adalah sederet tautan navigasi dari halaman utama ke postingan khusus pada website Anda. Breadcrumb adalah salah satu fitur navigasi yang membuat situs Anda lebih ramah pengunjung dan SEO friendly. Terutama jika tema yang Anda gunakan tidak memiliki navigasi, seperti tema yang digunakan pada blog ini.

Breadcrumb adalah sebaris link navigasi pada artikel blog Anda. Biasanya, breadcrumb terletak di atas judul artikel/postingan

Masalahnya, tidak semua tema CMS WordPress memiliki Breadcrumb ini. Jadi, akan sedikit tricky bagi Anda yang tidak pengalaman dengan coding atau oprek theme WordPress.

Untungnya, Yoast SEO, salah satu plugin wajib WordPress sudah dilengkapi dengan fitur pemasangan breadcrumb yang SEO friendly. Pada artikel ini, Anda akan mempelajari bagaimana cara memasang breadcrumb di situs berbasis WordPress yang Anda miliki. Kami juga menyertakan beberapa kode CSS untuk membuat breadcrumb yang menarik.

Cara Memasang Yoast Breadcrumb di WordPress

Mengaktifkan Fitur Breadcrumb di YOAST SEO

  • Pastikan Anda telah menginstall dan mengaktifkan Yoast SEO plugin
  • Setelah aktif, silahkan akses Dashboard>SEO>Search Appearance>Breadcrumbs
  • Pada section Breadcrumbs setting, klik toggle button dari ‘Disabled’ menjadi ‘Enabled’. Perhatikan animasi gif berikut:
  • Pilih tipe Taksonomi “Category’ pada pilihan Taxonomy. Anda juga bisa mengubah anchor text “Home” menjadi nama situs Anda.

Nah. Sekarang, Breadcrumbs SEO friendly Anda telah aktif. Namun, Anda masih harus memasangnya pada lokasi yang Anda inginkan.

Biasanya, tipe halaman yang dipasangi breadcrumbs adalah post, page, dan archive. Berikut cara memasang Breadcrumb pada tipe-tipe halaman tersebut.

Memasang Breadcrumb pada Single Post WordPress

Memasang Kode Breadcrumbs Yoast dengan Theme Editor

Tiap theme wordpress memiliki file dan lokasi file single.php tersendiri. Jadi, Anda harus jeli mencari file ini. Secara umum, file ini dapat Anda akses via Dashboard>Theme Editor. Setelah itu, Anda bisa mencari file dengan nama single.php atau content-single.php pada sidebar sebelah kanan layar komputer Anda.

  • Setelah itu, temukan kode berisi perintah untuk menampilkan judul artikel. Biasanya ditandai dengan elemen-elemen berikut:
<header class="entry-header">
  • Setelah kode tersebut Anda temukan, copas kode php berikut tepat diatasnya.
<?php if ( function_exists('yoast_breadcrumb') ) 
{ yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?>
  • Simpan hasil editing Anda dengan meng-klik tombol “Update FIle”
  • Hasilnya kurang lebih seperti tangkapan layar berikut:

Memasang Breadcrumb Yoast SEO via Cpanel

Terkadang segala jenis perubahan pada file Theme yang Anda gunakan tidak dapat tersimpan. Untuk mengatasi masalah ini, Anda bisa memasang kode PHP Breadcrumbs Yoast via Code editor di Cpanel hosting Anda.

Berikut langkah pemasangannya:

  • Login ke cPanel hosting Anda.
  • Akses File Manager>NamaSitusAnda>wp-content>Themes>ThemeAnda atau File manager>public_html>FolderSitusAnda>Wp-content>Themes>ThemeAnda.
    Opsi lain: File manager>public_html>wp-content>Themes>ThemeAnda
  • Cari file single.php, content-single.php, atau tipe lain yang ingin Anda pasangi Breadcrumbs
  • Selanjutnya, ikuti langkah bagian “Memasang Kode Breadcrumbs Yoast dengan Theme Editor

Anda berhasil memasang breadcrumb pada postingan situs Anda. Selanjutnya Anda akan belajar bagaimana cara mengubah tampilan breadcrumb Anda menjadi lebih rapi dan menarik.

Mempercantik BreadCrumb dengan CSS

Berikut kode CSS yang Kami pasang pada situs-situs yang Kami miliki:

/* Breadcrumbs */
breadcrumbs{
font-size: 80%; color: #8e908f;
text-align:center;
}
breadcrumbs a {
display: inline; border: none; padding: 0; text-transform: none;
}

Intinya, pada kode CSS diatas, Kami mengatur agar breadcrumb Kami berukuran 80% dari ukuran font pada artikel, berwarna abu, dan terletak di tengah. Anda dapat mengubah warna, ukuran dan posisi breadcrumb Anda sesuai selera.

Anda dapat memasangnya pada CSS editor di Dashboard>Appearance>Customize>Additional CSS

Copas CSS diatas pada bidang CSS editor, ubah sesuai selera dan klik tombol “Publish” pada bagian atas Customize Bar.

css breadcrumb

Jika Anda berhasil, tampilan Breadcrumb situs Anda kurang lebih akan seperti ilustrasi di bawah ini:

cara memasang breadcrumb

Sumber

Implement Yoast SEO Breadcrumb – Yoast.com

Yoast Breadcrumbs CSS Styles for WordPress Templates

Leave a Comment