oleh

Pengertian Apa Itu Breadcrumbs, Cara Membuat, Dan Manfaat Untuk SEO

Pengertian Apa Itu Breadcrumbs, Cara Membuat, Dan Manfaat Untuk SEO – Ngomong-ngomong mengenai breadcrumbs, banyak blogger yang belum mengenal fungsi ini pada blognya terutama blogger baru. Dibilang penting sih tidak, namun sebagian blogger mengatakan pemberian breadcrumbs pada blog sangatlah penting terutama untuk memudahkan navigasi.

Lantas apa itu definisi breadcrumbs?. Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website. Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, kategori, tag, dan arsip website. Memang menurut saya breadcrumbs ini tidak terlalu penting karena sudah ada kategori, tag, dan arsip yang membantu pengunjung. Namun namanya manusia pasti selalu ada yang pemahamannya kurang bagus jadi perlu bantuan ekstra.

Dilihat dari pengertian breadcrumbs, terserah anda ingin menggunakannya pada blog anda atau tidak. Saran saya gunakan saja breadcrumbs agar website anda terlihat lebih sempurna. Untuk contoh breadcrumbs nya yakni seperti gambar dibawah.contoh breadcrumbsYang saya kasih tanda panah itu (dewailmu>>adsense>>Judul artikel) adalah breadcrumbs ya guys, tau kan?.

Setelah Mengetahui Apa Itu Breadcrumbs, Lantas Apa Fungsi Breadcrumbs Sebenarnya Pada Blog?

Sebenarnya breadcrumbs ini berfungsi sebagai navigasi website yang memudahkan mesin pencari melakukan crawl sehingga dapat menemukan website kita dengan mudah. Dilihat dari SEO, cara ini cuku bagus mendongkrak sedikit skor seo anda.

Pada mesin pencari, blog yang menggunakan breadcrumbs akan terlihat seperti ini contoh breadcrumbs pencarian

Pada gambar yang saya beri tanda panah merah itulah breadcrumbs. Tidak langsung menampilkan url nya namun hanya menampilkan tag atau kategori nya saja.

Jadi berpengaruh juga ya terhadap seo? bagus juga tuh, boleh dicoba. Namun bagaimana cara membuatnya?

Cara Membuat Breadcrumb Pada Blogspot

  • Masuk ke dashboard blogspot anda.
  • Klik menu “Template” dan klik lagi “edit html”.
  • Copy dan paste kode dibawah ini sebelum kode ]]></b:skin> atau </style>.
  • /* Breadcrumbs */
    .breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
    .breadcrumbs a,.post-info a {color:#19abea;}
    .breadcrumbs a:hover,.post-info a:hover {color:#464646;}
    
  • Jika sudah di paste kemudian cari kode html post seperti ini
    <b:includable id='main' var='top'>...</b:includable>
    
  • Kemudian langsung copy dan pastekan kode berikut ini dibawah kode diatas
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Breadcrumb Untuk Halaman Pos -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs'>
    Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
    <b:loop values='data:post.labels' var='label'>
    / <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
    </b:loop>
    / <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- Breadcrumb Untuk Label Search dan Search Pages -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable
    
  • Simpan template kemudian lihat hasilnya.

Cara Membuat Breadcrumb Pada WordPress

Membuat Breadcrumbs Menggunakan Plugin Yoast SEO

  • Ini merupakan cara termudah menurut saya karena dibantu dengan plugin yang memudahkan proses pembuatannya. Langsung saja terlebih dahulu plugin yoast seo di dashboard wordpress dan klik menu Plugin > Tambah Baru. Lalu pada kolom pencarian plugin ketik yoast seo, jika sudah muncul kemudian instal dan aktifkan.
  • Nanti akan ada menu baru pada dashboard anda seperti pada gambar dibawah dan klik pada SEO > Advance dashboard yoast seo
  • Kemudian nanti anda akan diarahkan ke menu lanjutan yoast seo. Pada kolom teratas nanti anda akan menemukan tulisan “Breadcrumbs”.
  • Ada pilihan enabled dan disabled. Aktifkan dengan mengarahkan bar berwarna ke pilihan enabled. Pengaturan dibawahnya biarkan default saja, atau anda dapat meniru pengaturan milik saya seperti pada gambar dibawah pengaturan breadcrumbs
  • Terakhir gulir kebawah kemudian simpan perubahan.
  • Tunggu guys, belum berakhir sampai disini.
  • Selanjutnya yakni mengcopy paste kode yang diberikan yoast seo, untuk menemukan kode tersebut lihat gambar yang ditunjuk panah merah dan klik. Lihat gambar cara menggunakan breadcrumbs
  • Nanti anda akan diarahkan ke website yoast seo, nah disitu nanti anda akan diberikan kode php. Copy kode tersebut kemudian paste ke template wordpress di Tampilan > Editor lalu buka Single.php.
  • Cari kode di bawah ini atau sejenisnya

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  • Kemudian pastekan kode dari yoast tadi tepat dibawah kode diatas.
  • Terakhir klik simpan perubahan dan lihat hasilnya.
  • Cara melihat hasilnya yakni dengan membuka salah satu postingan, jika ada tanda navigasi seperti gambar paling atas berarti tutorial nya work. Tapi saya pastikan work 100% jika anda mengikuti tutorial dari saya dengan teliti.
  • Begitulah cara membuat breadcrumb pada wordpress.

Nah itulah artikel lengkap mengenai apa itu breadcrumbs, cara membuatnya sampai manfaatnya. Meskipun tidak begitu penting dalam blog, namun ini bisa menyempurnakan navigasi blog anda agar memudahkan pengunjung dalam mencari informasi.

Selain menggunakan breadcrumbs, ada lagi salah satu cara membuat navigasi blog dengan sempurna menggunakan link building.

Sekian, semoga artikel ini bermanfaat bagi anda para teman-teman blogger, terima kasih telah berkunjung.

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

18 comments

  1. Wah betul jg sy sebagi blogger yang baru mulai menggeluti blogging, baru mngetahui jika dengan mengetahui breadcrumbs bisa mengoptimasi blog tersebut di mesin pencari google.. Mkasih banyak min utk informasi nya,artikel nya sangat friendly (y)