Cara Membuat Breadcrumbs di WordPress

 Belajar SEO, Tutorial wordpress

cara membuat breadcrumbs blogger wordpressCara membuat breadcrumbs adalah teknik yang sudah lama ada di search engine google. Di dalam buku panduan Google SEO Starter Guide 2010, telah dijelaskan tentang apa itu dan bagaimana fungsi Breadcrumbs.

Breadcrumbs merupakan salah satu cara untuk membuat sebuah blog atau website disukai search engine. Google lebih mengutamakan blog dengan adanya kemudahan navigasi, berikut merupakan kutipan yang saya dapat dari Google “make your site easier to navigate, navigation is very important for search engines”.

Dengan adanya breadcrumbs akan lebih memudahkan pengunjung dan search engine dalam menelusuri isi kontent mulai dari halaman utama (root) menuju ke halaman yang lebih spesifik berdasarkan kategori tertentu yang telah dibuat sebelumnya dan akan lebih memudahkan pengunjung untuk kembali ke halaman sebelumnya (back to home/root).

Disini akan saya bahas mengenai cara membuat breadcumbs untuk halaman single yang menggunakan multiple category (lebih dari satu penggunaan category).

Berikut ini contoh breadcrumbs yang saya terapkan di blog ini.

HomeBloggingTutorial wordpress › Cara Mengganti Avatar WordPress

Cara membuat breadcrumbs di wordpress

  1. Pertama buka function.phpdan tambahkan kode berikut ini.
    //breadcrumbs
    if ( ! function_exists( 'breadcrumbs' ) ) :
    function breadcrumbs() {
    $delimiter = '›';
    $home = 'Home';
    
    echo '<div xmlns:v="http://rdf.data-vocabulary.org/#">';
    global $post;
    echo ' <span typeof="v:Breadcrumb">
    <a rel="v:url" property="v:title" href="'.home_url( '/' ).'">'.$home.'</a>
    </span> ';
    $cats = get_the_category();
    if ($cats) {
    foreach($cats as $cat) {
    echo $delimiter . "<span typeof=\"v:Breadcrumb\">
    <a rel=\"v:url\" property=\"v:title\" href=\"".get_category_link($cat->term_id)."\" >$cat->name</a>
    </span>"; }
    }
    echo $delimiter . the_title(' <span>', '</span>', false);
    echo '</div>';
    }
    endif;
  2. Kemudian buka single.php, dan tambahkan kode berikut.
    <div id="breadcrumbs">
    <?php breadcrumbs(); ?>
    </div>
  3. Kalau di blog saya penempatannya seperti ini.
    <?php get_header(); ?>
    <?php $options = get_option('inove_options'); ?><?php if (have_posts()) : the_post(); update_post_caches($posts); ?>
    <div id="breadcrumbs">
    <?php breadcrumbs(); ?>
    </div>
  4. Untuk mempercantik tampilan breadcrumbs anda dapat menambahkan kode CSS berikut pada file CSS yang anda gunakan.
    #breadcrumbs{
    background:#F6F8F2;
    line-height:16px;margin:0px 0px 2px 0px;border:1px solid #b0aeae;padding:3px 2px 3px 14px;
    font-size:10.5px;box-shadow:2px 2px 2px #b3b3b7;-moz-box-shadow:2px 2px 2px #b3b3b7;-webkit-box-shadow:2px 2px 2px #b3b3b7;letter-spacing:0em;
    font-family:"trebuchet ms",sans-serif;}
  5. Kemudian untuk melihat berhasil atau tidaknya breadcrumbs yang telah dibuat, bisa langsung mengeceknya di Google Richsnippets.

Dengan cara membuat breadcrumbs maka akan memudahkan navigasi pada blog anda. Blog dengan kemudahan navigasi akan jauh lebih SEO friendly dibanding blog yang hanya memberikan navigasi hanya untuk menjebak pengunjung agar mengklik iklan.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

15 Responses

  1. flava21/11/2012 at 20:21Reply

    gan, kok ane udah ikutin cara diatas, trus di function.php udah dikasih
    masih error ya gan?..

  2. Dhimas Kirana03/12/2012 at 14:42Reply

    sukses tanpa cacat kang. terima kasih banyak :D

  3. cahkos19/01/2013 at 08:04Reply

    tanks gan

  4. iBadrudin19/01/2013 at 12:16Reply

    Direkomendasikan banget buat yang pingin blajar coding, untuk yang suka cara simple bisa pakai plugin wordpress seo
    Thakns gan!

  5. Cantik16/02/2014 at 18:05Reply

    Saya coba pasang di theme twentyfourteen tepatnya di function pake plugin yoast tapi kok parse syntax error, apa krn theme gak support? Mhn penjelasan min..

Leave a Reply