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.
Baca Juga
Cara membuat breadcrumbs ini sama saja dengan breadcrumbs seperti biasanya, hanya saja disini saya tambahkan element font awesome yang letaknya disebelah kiri breadcrumbs, dan kode yang telah saya bagikan dibawah ini telah Valid HTML5,
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>
- Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :
- Selesai dan save template (jika ada kesalahan atau bagaimana ?, komentar dikolom yang telah disediakan.)
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
.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;
}
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;
}
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><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' 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"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<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"'>
<div class='breadcrumbs'>
<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:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
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.
No comments:
Post a Comment