Membuat Breadcrumbs SEO Menarik

Baca Juga

Kang Fiqih | Assalamu'alaikum wr.wb., sebelumnya apakah ada yang sudah mengenal breadcrumbs? Pasti disini ada yang sudah tahu dan mungkin ada juga yang tidak. Sedikit saya berikan pengertian mengenai breadcrumbs ini, breadcrumbs adalah sebuah navigasi pada blog yang biasanya memberikan informasi kepada pengunjung blog, dimana posisinya sekarang. Maksudnya, posisi atau letak postingan yang mereka baca.

Breadcrumbs juga mempunyai fungsi atau manfaat untuk SEO blog milik Anda. Berikut adalah beberapa manfaat yang saya dapat :

• Keyword Density-breadcrumbs menambahkan keyword atau kata kunci yang Anda fokuskan bangun dalam halaman blog Anda, building desinty.
• Untuk index halaman oleh Google. Dalam pencarian google, biasanya si mesin pencari ini juga menyertakan navigasi blog yang sedang di cari, atau bisa dikatakan bahwa google juga mengindex navigasi terkait keyword yang Anda isikan dalam kotak pencariannya. Contoh kecil seperti gambar di bawah ini:

Langsung saja jika Anda menginginkan adanya breadcrumbs di blog Anda, di bawah ini langkah-langkahnya :

• Login ke akun blog Anda.
• Klik Template --> Edit HTML.
• Cari kode ]]></b:skin>, untuk memudahkan mencarinya gunakan Ctrl+F. 
• Setelah kodenya ketemu, maka masukkan kode di bawah ini di atas kode ]]></b:skin>.

.breadcrumbs{background:0 rgba(255,255,255,0.1) 15px;height:30px;line-height:30px;border:solid 1px #bababa;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;overflow:hidden;padding-left:10px;-moz-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-ms-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-o-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;text-shadow:0 1px 0 #FAFAFA;color:#666;margin:0;margin-bottom: 6px;}<br />.breadcrumbs li{list-style-type:none;display:inline-block;float:left}<br />.breadcrumbs a{display:inline-block;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7z4tz7akyhNQ9QLvSpEX89RlZ4vMEEPQyzI_33i65lQ_CFvnCk89uHnxGF7irGu8hz_2Z_xK22mNy-7tyCLPt0yIZ2Y0NYTNQIMziLO5hjc-DEiURtcHL65X3G3cV7O4pAO3MQQvxmKFO/s1600/border_kanan.gif);background-repeat:no-repeat;background-position:right;padding-right:10px;text-decoration:none;color:#666;outline:none;text-shadow:0 1px 0 #fafafa}<br />.breadcrumbs a:hover{color:#000}

• Kemudian langkah selanjutnya adalah mencari kode <b:includable id='main' var='top'>, cara mencarinya sama dengan langkah ke 3.
• Masukkan kode di bawah tepat di atas kode <b:includable id='main' var='top'>.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> <span><data:post.title/></span> </div></b:if> </b:loop> </b:if> </b:includable>

• Langkah terakhir adalah mencari kode <b:include data='top' name='status-message'/> dan masukkan kode di bawah ini tepat di atas kode <b:include data='top' name='status-message'/>. (jika kode <b:include data='top' name='status-message'/> ada dua maka masukkan kode dibawah ini di kedua kode tersebut)

<b:include data='posts' name='breadcrumb'/>

Lihat hasilnya, mudah-mudahan dapat memuaskan Anda dan artikel ini dapat bermanfaat untuk Anda. :D