{"id":37955,"date":"2023-04-03T12:48:21","date_gmt":"2023-04-03T05:48:21","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=37955"},"modified":"2023-04-03T12:58:38","modified_gmt":"2023-04-03T05:58:38","slug":"breadcrumbs-adalah","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/breadcrumbs-adalah\/","title":{"rendered":"Breadcrumbs: Pengertian, Fungsi dan Cara Membuatnya"},"content":{"rendered":"\n<p>Breadcrumbs adalah salah satu elemen pada website yang berfungsi sebagai navigasi yang membantu pengguna untuk memahami posisi halaman yang sedang mereka lihat dalam sebuah situs. <\/p>\n\n\n\n\n\n<p>Pada panduan ini, kami akan menjelaskan tentang apa itu Breadcrumbs hingga cara membuatnya di berbagai CMS dan script. Simak artikel ini sampai akhir!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu breadcrumbs?<\/h2>\n\n\n\n<p>Breadcrumbs adalah fitur navigasi pada sebuah situs web yang berfungsi untuk membantu pengguna dalam memahami posisi halaman yang sedang mereka lihat di sebuah struktur website. <\/p>\n\n\n\n<p>Breadcrumbs biasanya ditampilkan di bagian atas halaman dan berupa serangkaian tautan atau label teks yang menunjukkan rute atau jalur yang dilalui oleh pengguna untuk sampai ke halaman yang sedang mereka akses. Contoh bentuk breadcrumbs seperti &#8220;home -> produk -> hosting&#8221;<\/p>\n\n\n\n<p>Breadcrumbs sendiri memiliki beberapa jenis, diantaranya sebagai berikut :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Breadcrumbs hierarchy-based<\/strong><br \/>Adalah jenis breadcrumbs yang akan menampilkan navigasi di sebuah website sesuai dengan struktur halaman di websitenya. <\/li>\n\n\n\n<li><strong>Breadcrumbs attribute-based<\/strong><br \/>Jenis ini akan menampilkan navigasi sesuai dengan attribut yang ada di halaman websitenya. Breadcrumbs jenis ini banyak ditemui di website yang berbasis toko online.<\/li>\n\n\n\n<li><strong>Breadcrumbs history-based<\/strong><br \/>Sesuai dengan namanya, breadcrumbs ini akan menampilkan navigasi sesuai dengan history kunjungan visitor di website.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fungsi dan Manfaat Breadcrumbs<\/h2>\n\n\n\n<p>Breadcrumbs pada website berfungsi agar pengunjung website dapat meninggalkan jejak, atau mengetahui posisi kunjungan website saat ini. Selain dari sisi pengunjung, breadcrumbs juga dapat digunakan disisi mesin pencari seperti Google untuk mengetahui struktur dari sebuah website.<\/p>\n\n\n\n<p>Penggunaan breadcrumbs juga memiliki manfaat sebagai berikut :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Baik untuk SEO<\/h3>\n\n\n\n<p>Penggunaan breadcrumbs dapat meningkatkan hasil pencarian dari proses crawl mesin pencari. Mesin pencari seperti Google akan mengutamakan website dengan breadcrumbs, karena struktur website akan lebih mudah diketahui.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>BACA JUGA: <a href=\"https:\/\/blog.rumahweb.com\/cara-ampuh-agar-website-cepat-terindex-google\/\" title=\"cara agar cepat terindex\">Cara Ampuh Agar Website Cepat Terindex Google<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Meminimalisir Bounce Rate<\/h3>\n\n\n\n<p>Website dengan breadcrumbs tentunya akan mempermudah user yang mengunjungi sebuah website, karena jelas akan sangat membantu user dalam mengunjungi website Anda.<br \/><br \/>Tanpa adanya breadcrumbs, user mungkin lebih kesulitan dan akan langsung meninggalkan website Anda dan dapat menyebabkan bounce rate yang tinggi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mengoptimasi hasil pencarian<\/h3>\n\n\n\n<p>Selain optimasi di sisi <a href=\"https:\/\/blog.rumahweb.com\/seo-adalah\/\" title=\"seo adalah\">SEO<\/a>, bredcumbs juga akan membuat hasil pencarian yang ditampilkan lebih menarik, dan tentunya akan menampilkan hasil pencarian yang lebih relevan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cara membuat breadcrumbs<\/h2>\n\n\n\n<p>Membuat breadcrumbs ternyata tidak sulit, dan bahkan bisa dikatakan mudah. Berikut cara untuk membuat breadcrumbs di berbagai CMS seperti WordPress, Joomla, dan secara manual melalui script.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Breadcrumbs di WordPress<\/h3>\n\n\n\n<p>Ada setidaknya dua cara yang bisa Anda pilih, untuk membuat breadcrumbs di WordPress. Opsi pertama adalah dengan menggunakan themes yang sudah menyediakan fitur breadcrumbs di dalamnya. Opsi kedua, Anda dapat menggunakan plugins untuk mempermudah pembuatannya. <\/p>\n\n\n\n<p>Pada artikel kali ini, kami akan membuatnya dengan menggunakan plugins Breadcrumb NavXT. Berikut langkah-langkahnya.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install plugin Breadcrumb NavXT melalui dashboard WordPress Anda. Panduan install plugin bisa dipelajari melalui artikel berikut: <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-install-plugin-wordpress\/\" title=\"\">Cara install plugin di WordPress.<\/a><\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Setelah install plugin selesai, silahkan masuk ke menu Appearance > Widgets seperti pada gambar berikut.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1342\" height=\"623\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu.png\" alt=\"menu widget\" class=\"wp-image-37957\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu.png 1342w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-300x139.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-1024x475.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-768x357.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-370x172.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-270x125.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-570x265.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/widget-menu-740x344.png 740w\" sizes=\"auto, (max-width: 1342px) 100vw, 1342px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Setelah itu akan muncul banyak opsi peletakan widget pada themes yang Anda gunakan. Silahkan klik tanda + pada posisi dimana breadcrumbs akan diletakkan. Setelah itu pilih widget Breadcrumb Trail.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1347\" height=\"656\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail.png\" alt=\"breadcrumb trail\" class=\"wp-image-37956\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail.png 1347w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-300x146.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-1024x499.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-768x374.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-370x180.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-270x131.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-570x278.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumb-trail-740x360.png 740w\" sizes=\"auto, (max-width: 1347px) 100vw, 1347px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Kemudian klik save. Untuk memeriksanya, silahkan akses ke website Anda. Apabila sudah benar maka breadcrumbs akan muncul pada website.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1349\" height=\"622\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp.png\" alt=\"breadcrumb wp \" class=\"wp-image-37958\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp.png 1349w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-300x138.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-1024x472.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-768x354.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-370x171.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-270x124.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-570x263.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-wp-740x341.png 740w\" sizes=\"auto, (max-width: 1349px) 100vw, 1349px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Breadcrumbs di Joomla<\/h3>\n\n\n\n<p>Seperti halnya di CMS WordPress, membuat breadcrumbs di Joomla tidaklah sulit bahkan lebih mudah. Hal tersebut karena Anda tidak perlu menggunakan plugins tambahan. <\/p>\n\n\n\n<p>CMS joomla telah menyediakan modul untuk pembuatan breadcrumbs di default installasinya. Berikut langkah untuk menampilkan breadcrumbs di CMS joomla 4.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Silahkan login dahulu di halaman administrator joomla yang digunakan.<\/li>\n\n\n\n<li>Langkah selanjutnya silahkan ke menu system -> manage -> extensions.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1365\" height=\"599\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla.png\" alt=\"menu system joomla\" class=\"wp-image-37959\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla.png 1365w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-300x132.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-1024x449.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-768x337.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-370x162.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-270x118.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-570x250.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/system-menu-joomla-740x325.png 740w\" sizes=\"auto, (max-width: 1365px) 100vw, 1365px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Kemudian ketikan &#8220;breadcrumbs&#8221; di kotak pencarian. Apabila module breadcrumbs belum aktif, silahkan klik bagian tombol &#8220;enable extensions&#8221; di kolom status.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"587\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla.png\" alt=\"breadcrumb activate\" class=\"wp-image-37962\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla.png 1348w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-300x131.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-1024x446.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-768x334.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-370x161.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-270x118.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-570x248.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/activate-breadcrumbs-joomla-740x322.png 740w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Aktivasi breadcrumbs telah selesai, selanjutnya Anda dapat mengakses website untuk memastikan breadcrumbs telah aktif.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1351\" height=\"659\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla.png\" alt=\"Breadcrumbs joomla\" class=\"wp-image-37963\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla.png 1351w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-300x146.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-1024x499.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-768x375.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-370x180.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-270x132.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-570x278.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2023\/04\/breadcrumbs-joomla-740x361.png 740w\" sizes=\"auto, (max-width: 1351px) 100vw, 1351px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Breadcrumbs melalui script<\/h3>\n\n\n\n<p>Lalu bagaimana apabila tidak menggunakan CMS? Apabila tidak menggunakan CMS, Anda dapat menambahkan scripts breadcrumbs pada installasi website yang Anda gunakan. <\/p>\n\n\n\n<p>Berikut contoh scripts breadcrumbs dalam bentuk .json sederhana yang dapat Anda gunakan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Website Anda&lt;\/title&gt;\n    &lt;script type=\"application\/ld+json\"&gt;\n    &#091;{\n      \"@context\": \"https:\/\/schema.org\",\n      \"@type\": \"BreadcrumbList\",\n      \"itemListElement\": &#091;{\n        \"@type\": \"ListItem\",\n        \"position\": 1,\n        \"name\": \"Profil\",\n        \"item\": \"https:\/\/namadomain.com\/profil\"\n      },{\n        \"@type\": \"ListItem\",\n        \"position\": 2,\n        \"name\": \"visi-misi\",\n        \"item\": \"https:\/\/namadomain.com\/profil\/visi-misi\"\n      },{\n        \"@type\": \"ListItem\",\n        \"position\": 3,\n        \"name\": \"Website Anda\"\n      }]\n    },\n    {\n      \"@context\": \"https:\/\/schema.org\",\n      \"@type\": \"BreadcrumbList\",\n      \"itemListElement\": &#091;{\n        \"@type\": \"ListItem\",\n        \"position\": 1,\n        \"name\": \"kontak\",\n        \"item\": \"https:\/\/namadomain.com\/kontak\"\n      },{\n        \"@type\": \"ListItem\",\n        \"position\": 2,\n        \"name\": \"Website Anda\"\n      }]\n    }]\n    &lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Demikian pembahasan kami tentang apa itu breadcrumbs hingga cara membuatnya. Semoga penjelasan diatas dapat membantu Anda dalam mengelola website khususnya optimasi SEO pada website Anda. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Breadcrumbs adalah salah satu elemen pada website yang berfungsi sebagai navigasi yang membantu pengguna untuk memahami posisi halaman yang sedang mereka lihat dalam sebuah situs. Pada panduan ini, kami akan menjelaskan tentang apa itu Breadcrumbs hingga cara membuatnya di berbagai CMS dan script. Simak artikel ini sampai akhir! Apa itu breadcrumbs? Breadcrumbs adalah fitur navigasi [&hellip;]<\/p>\n","protected":false},"author":322,"featured_media":37973,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[1958,323,22],"class_list":{"0":"post-37955","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-seo","8":"tag-breadcrumbs","9":"tag-seo","10":"tag-website"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/37955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/322"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=37955"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/37955\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/37973"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=37955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=37955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=37955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}