Tips Membuat Breadcrumbs SEO Friendly dengan Font Awesome

Tips SEO Membuat Breadcrumbs SEO Friendly dengan Font Awesome

Hallo, sobat my-seven7ash. Dalam artikel ini saya ingin membagikan Tips & Trik SEO Membuat Breadcrumbs SEO Friendly dengan Font Awesome. breadcrumbs adalah sebuah navigasi yang terdiri dari , home ( nama blog sobat ), label bacaan dan link title post yang berfungsi untuk mendongkrak artikel kita agar bisa berada di halaman pertama google.

Baca Juga

Sebenarnya tanpa sobat sadari breadcrumbs sudah secara otomatis terpasang di template blog sobat , asalkan template yang sobat gunakan , itu merupakan template yang dibuat pada tahun 2014 keatas , namun tidak semua template di era modern ini , breadcrumbnya terindex , karena sebagian blogger tidak suka dengan breadcrumbs navigasi yang terindex ( termasuk saya ) karena saya memiliki alasan tersendiri untuk memilih breadcrumb yang tidak terindex oleh google search .

Mungkin sebelumnya sobat sudah memasang breadcrumbs tetapi hasilnya tidak terlihat didalam pencarian Google seolah-olah tidak di index oleh Google, memang membutuhkan waktu yang sangat lama baginya untuk meng-indeks breadcrumbs yang seperti itu bahkan saya sempet dengar blog anda harus ber-pagerank 3 atau lebih. Tetapi sekarang hal itu tidak perlu dipersoalkan lagi meskipun blog anda belum mempunyai pagerank karena navigasi breadcrumbs yang satu ini akan terlihat di mesin pencari Google dengan waktu yang singkat dan semua label blog akan ter-index olehnya.

inilah langkah - langkah Membuat Breadcrumbs SEO Friendly dengan Font Awesome :

Login di Blogger
Back up template untuk menghindari kesalahan
Pilih Template
Sebelum membuat breadcrumbs nya silahkan sobat masukkan javascript berikut, javascript berikut adalah script untuk font awesome, jika sebelumnya sobat telah menggunakannya sobat tidak perlu lagi menambahkannya, letakkan javascript berikut di atas kode </head>

Masukkan CSS berikut diatas ]]></b:skin> atau di <style>

.breadcrumbs{

background:#ff6c60;

padding:15px 20px 15px 65px;

margin-bottom:19px;

font-size:14px;

color:#fff;

border-radius:4px;

position:relative;

}

.breadcrumbs a{

color:#fddbd8;

text-decoration:none;

}

.breadcrumbs a:hover{

color:#fff;

text-decoration:none;

}

.breadcrumbs:before {

content: "\f041";

font-family:fontAwesome;

font-size:22px;

font-style: normal;

background-color:#e56155;

color:#fff;

border-radius:4px 0 0 4px;

top:0;

left:0;

padding:13px 20px;

position:absolute;

}

Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' 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'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:blog.pageName == ""'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

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

Selesai dan save template (jika ada kesalahan atau bagaimana ?, komentar dikolom yang telah disediakan.)

Penting : apabila sebelumnya sobat telah menggunakan breadcrumbs didalam template sobat, sebaiknya tidak perlu diganti html nya, cukup sobat ganti css nya saja, dan hapus css breadcrumbs sobat sebelumnya dengan css breadcrumbs yang telah saya bagikan diatas tadi.

Terima Kasih Telah Membaca Artikel : Tips Membuat Breadcrumbs SEO Friendly dengan Font Awesome