Cara Pasang Google Breadcrumb WordPress tanpa Plugin

Disamping menampilkan link navigasi kepada konten di SERPs, Google Breadcrumbs Rich Snippets ini juga mempermudah user untuk mengeksplorasi isi blog kita langsung dari halaman pencarian, yang pada akhirnya bukan tidak mungkin dapat meningkatkan CTR sekaligus meningkatkan traffic secara signifikan. Jujur saja saya juga baru tahu lho apa itu Rich Snippets? Menurut bahasa saya sendiri sih, Rich Snippets itu sisipan-sisipan kecil informasi yang ada di dalam konten website/ blog kita yang sengaja disajikan agar Search Engine mampu memberikan informasi lebih sebuah konten pada halaman pencarian.
Sebenarnya istilah Rich Snippets ini tidak asing di mata saya, namun dulu saya cenderung tak acuh karena memang nggak tau seperti apa dan bagaimana fungsinya. Yah, persis seperti pepatah “tak kenal maka tak sayang” gitu dweeh… Dan khusus untuk Breadcrumbs Rich Snippets ini ternyata gampang saja lho buatnya, dan hasilnyapun cukup membanggakan (bahasa khusus blogger spt saya 😀 ). Rich snippets ini menampilkan informasi sebuah halaman lengkap dengan kategori atau tagnya, seperti contoh pencarian dengan kata kunci Cara bikin page Navigation Cantik di bawah ini:

Nah, agar hasil pencarian yang menuju kepada website/ blog kita juga dapat menampilkan breadcrumbs, tentunya kita juga harus ikut aturan mainnya Om G. Aturannya sendiri ada yang menggunakan standar microdata, microformat atau RDF (gak ngerti juga deh maxud persisnya apaan). Dan saya sendiri pakai cara yang paling mudah, ini adalah standar micro data untuk breadcrumbs yang disederhanakan:

Tipe 1 Breadcrumb dengan Microdata
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
</div>
»
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/category" itemprop="url"><span itemprop="title">Category</span></a>
</div>


Tipe 2 Breadcrumb dengan RDF
<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="/" rel="v:url" property="v:title">Home</a></span>
»
<span typeof="v:Breadcrumb"><a href="/category" rel="v:url" property="v:title">Category</a></span>
»
Titel Posting di sini
</div>
Sebelumnya sobat sudah pernah memakai breadcrumbs pada blognya’kan? Kalo belum, tuh contohnya ada pada bagian atas halaman ini: Home » Category #1, Category # » Judul Artikel… Sekarang kita tinggal sesuaikan dengan engine wordpress dengan menambahkan property data punya data-vocabulary.org pada file single.php. Jika breadcrumbs sudah ada, sobat hanya tinggal menyesuaikan sedikit datanya pada text yang ditebalkan. Jika belum ada silahkan copy code di bawah ini dan simpan pada bagian atas post kira-kira di atas judul postingan atau yang penting tampilannya rapi. Untuk tutorial ini saya pakai contoh tipe 2:

<div id="postpath" xmlns:v="http://rdf.data-vocabulary.org/#">
	<span typeof="v:Breadcrumb"><a title="Go to homepage" href="/" rel="v:url" property="v:title">Home</a></span>
	&raquo; 
	<?php the_category(', '); ?>
	&raquo; 
	<?php the_title(); ?>
</div>

Langkah selanjutnya, berhubung kode <?php the_category(‘, ‘); ?> sudah menampilkan daftar kategori lengkap dengan link dan atributnya, maka kita harus edit atribut ini. Caranya: buka file category-template.php pada folder wp-includes, lalu temukan dan ubah kode pada line/ baris 163 dan 207 masing-masing menjadi:

Line 163:
$rel = ( is_object( $wp_rewrite ) && $wp_rewrite->using_permalinks() ) ? 'rel="v:url" property="v:title"' : 'rel="category"';

Line 207:
$thelist .= '<span typeof="v:Breadcrumb"><a href="' . esc_url( get_category_link( $category->term_id ) ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a></span>';

Catatan: baris kode mungkin tidak sama persis, terlebih jika sobat mengedit category-template.php dari web editor, saya sendiri menggunakan notepad++. Namun tak perlu bingung, sobat tinggal copy saja sebagian kodenya dan lakukan pencarian kode yang sama persis. Selain itu kode dengan huruf tebal adalah kode-kode sisipan yang digunakan untuk menambahkan atribut data agar sesuai dengan standard kode untuk breadcrumbs ini. Awalnya saya sendiri sering salah menyisipkan kode (maklumlah wordpress hacker kacangan, hicks..), tapi setelah dipelajari lebih tenang ternyata mudah saja. Prinsipnya hanya merubah dan menambahkan atribut link pada kategori saja, gitu lho!

UPDATE:, Berhubung cara di atas akan hilang setiap kali kita melakukan update wordpress, karena data ubahan kita akan hilang oleh file asli bawaan wordpress. Maka saya mengadaptasikan kode di atas pada fungsi tambahan theme. Teruskan membaca…

Cara Pasang Breadcrumbs SEo WordPress Otomatis tanpa Plugin

SEO breadcrumbs Google ini sebenarnya adalah penyederhanaan dari cara manual di atas. Jika dengan cara membuka dan mengedit file engine wordpress di atas kurang mudah diterapkan, terutama bagi blogger newbie. Maka cara ini sangatlah mudah dan siapapun bisa melakukannya. Anda hanya perlu menambahkan satu fungsi baru pada tema wordpress dan memanggilnya pada halaman post. Oke, untuk cara pakainya cukup lakukan dua langkah di bawah:

• Buka file functions.php melalui cpanel hosting, atau jika Anda ingin membukanya live dari Dashboard wordpress pilih Menu Appearance – Editor – Cari dan buka “Theme Functions (functions.php)” lalu tambahkan kode ini pada baris paling bawah:

  <?php
  if ( ! function_exists( 'dvs_seobreadcrumbs' ) ) :
  function dvs_seobreadcrumbs() {
  $separator = ' &raquo; ';
  $home = 'Beranda';
  echo '<div id="postpath" xmlns:v="http://rdf.data-vocabulary.org/#">';
  global $post;
  echo '<span typeof="v:Breadcrumb">
  <a rel="v:url" property="v:title" href="https://blog.finderonly.net/" title="Beranda">'.$home.'</a></span> '; $category = get_the_category(); if ($category) { foreach($category as $category) { echo $separator . '<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'.get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.'</a></span>'; }} echo $separator .get_the_title(). '</div>';} endif;
  ?>
  

  Kode di atas menggunakan breadcrumb RDF yang cenderung tidak lolos validasi untuk HTML5. Jika tema Anda menggunakan HTML5 gunakan breadcrumb alternatif dengan microdata yang sudah Valid HTML 5 di bawah ini:

  <?php
  if ( ! function_exists( 'dvs_seobreadcrumbs' ) ) :
  function dvs_seobreadcrumbs() {
  $separator = ' » ';
  $home = 'Beranda';
  echo '<small>';
  global $post;
  echo '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://blog.finderonly.net/" itemprop="url"><span itemprop="title">'.$home.'</span></a></span> '; $category = get_the_category(); if ($category) { foreach($category as $category) { echo $separator . '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_category_link($category->term_id).'" itemprop="url" title="'.$category->name.'"><span itemprop="title">'.$category->name.'</span></a></span>'; }} echo $separator .'<span>' .get_the_title(). '</span></small>';} endif;
  ?>
  

  Jangan lupa ganti blog.finderonly.net dengan alamat asli situs Anda lalu save atau update file.

• Langkah kedua, menampilkannya pada artikel (single post). Buka file single.php dan tambahkan kode berikut:

  <?php if(function_exists('dvs_seobreadcrumbs')){ dvs_seobreadcrumbs(); } ?>
  

  Simpan kodenya di atas sebelum judul artikel (<?php the_title(); ?>)

Dengan cara ini kini tidak perlu lagi mengubah file engine wordpress atau menggunakan plugin tambahan lain, karena Breadcrumb rich snippet google ini sudah ditambahkan pada template atau theme wordpress Anda. Dan yang paling penting, tentunya breadcrumb akan muncul pada search engine Google.

Kalau langkah-langkah di atas sudah selesai, saatnya kita test pemakaian google breadcrumbs wordpress ini pada halaman posting wordpress sobat. Kunjungi link Rich Snippets Test ini, masukan salah satu URL postingan sobat (link single post ya, bukan halaman utama, page atau, kategori) dan klik preview. Jika pemakaian kode di atas sudah benar, maka selamat kini blog sobat sudah memiliki breadcrumbs rich snippets yang akan tampil pada halaman pencarian. Tapi sabar dulu ya, mungkin hasil nyatanya tidak akan langsung muncul instan, sebab google perlu waktu untuk mengcrawl ulang blog sobat yang kini sudah dilengkapi microdata breadcrumbs ini. Untuk blog inipun saya butuh waktu sehari menunggu, dan hasilnya baru bisa dilihat sehari kemudian. Ayo coba, sobatpun bisa kok! 😀
Pilihan Rich Snippets lainnya adalah dengan menambahkan rating bintang yang akan muncul pada halaman pencarian. Silahkan diikuti caranya pada Pasang Rich Snippet Star Ratings.