Jumat, 17 Februari 2012

Cara Merubah Template Blog Agar Seo Friendly

Silahkan Login terlebih dahulu ke akun blogger anda dan menuju ke tab template lalu klik bagian edit HTML dan jangan lupa melakukan backup buat jaga-jaga dan centang bagian expand template widget.

1. Halaman Judul/Page Title
Format halaman judul/page title blogger biasanya adalah : JUDUL BLOG : JUDUL POSTING, supaya blog lebih disukai google, maka format page title yang standart harus kita rubah menjadi : JUDUL POSTING | JUDUL BLOG

cari kode berikut : <title><data:blog.pageTitle/></title>

Ganti dengan kdoe berikut ini

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

2. Menambahkan Meta keyword dan deskripsi
Google sangat menyukai blog yang memiliki tema dan konten yang jelas. Jadi , anda harus memberikan tag yang lazim disebut sebagai meta tag. Caranya, tambahkan kode di bawah ini sebelum kode <b:skin><![CDATA[/*

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog anda" />
<meta name="keywords" content="Kata kunci , kata kunci, kata kunci, kata kunci , kata kunci" />
</b:if>

3. Pasang Related Post.
Related post sangatlah disarankan untuk SEO terlebih lagi untuk pengunjung anda. Ada banyak cara untuk memasang related ini.

Cari kode </head> Gunakan Ctrl+F untuk memudahkan pencarian.
Tambahkan kode berikut ini tepat sebelum kode </head> yang baru saja anda temukan tadi.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6R3qoUGZnYlRt7SSqNdTIOL-QU5xbeNuRRzowfX6KkizX7tildME6wOBWsTllKqxNSWVo71JAiJ_IUlII9IjV6JCtmgg6Ln4qTzANxA-I0QntbY0bhzJX3vqoJY3pFVtTfy44eRrLuY0/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

Sekarang cari kode <data:post.body/> Dalam beberapa templates kode ini bisa terlihat sepertikode berikut <div class='post-body> atau <data:post.body/>

Tambahkan kode berikut tepat di bawah kode yang baru saja anda temukan tadi.

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

Untuk merubah angka maksimum dari related posts yang sedang ditampilkan untuk setiap label, Cari kode di bawah (di dalam kode diberikan angka 7) dan rubah menjadi angka "5" atau jumlah berapapun sesuai keinginan anda.

max-results=5

Jika related posts anda tidak bekerja dengan benar :

1. Cari baris kode URL berikut (gunakan Ctrl + F): http://theblogtemplates.com/scripts/Related_posts_hack.js
2. Ganti URL di atas dengan : https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js

4. Pasang Breadcrumbs.
Breadcrumbs merupakan navigasi menu diatas postingan. Navigasi BreadCrumb menurut para webmaster penting keberadaannya untuk meningkatkan pencarian di search engine dengan adanya breadcrumb robot seacr engine lebih mudah menelusuri seluruh konten berdasarkan keyword utama dalam blog tersebut (terutama robot om google:D) tentunya blog akan lebih mudah terindeks google.
Nah kalau navigasi breadcrumb ini begitu penting dan bnyak mamfaatnya kenapa tidak pasang aja?

Ok mari kita mulai saja langkah langkahnya

- Login ke blog masing masing
- Beri centang Expand Template Widget
- Klik menu design->edit HTML (peringatan: selalu back-up template asli sebelom memulai pengeditan tempalte).
- Cari kode berikut ]]></b:skin>
- Copy kode dibawah ini dan paste di atas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

- Cari kode berikut <div class='post hentry'>
- Copy kode dibawah ini dan paste di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

5. Matikan setting archive
Begini alasannya :
jika anda membuat sebuah blog (tentu saja di blogger.com), kemudian anda membuat 3 posting, 1 posting per harinya. Di halaman utama blog anda akan muncul 3 posting dan juga akan muncul sebuah link arsip dengan alamat url seperti ini, http://BLOGSOBAT.blogspot.com/2007_03_01_archive.html, nah, di halaman arsip tersebut otomatis akan memunculkan 3 posting yang isinya tentu saja sama dengan yang muncul di homepage.

Kesimpulannya seperti ini, ada 2 link menuju pada 2 halaman berbeda akan tetapi punya konten yang sama. Bagi google (atau search engine lain) ini tentu saja menjadi masalah yang serius. Maka, sebaiknya opsi archive di non-aktifkan, berikut caranya : sesudah login lalu klik tab setting >> Archiving >> di bagian Archiving frequency ubahlah menjadi no archive. >> kemudian save/simpan setting.

Namun jika anda tidak ingin menonaktifkan fungsi arsip dan hanya ingin agar link archive tidak ditelusurioleh google, pasang kode berikut ini tepat di bawah kode <head>

<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>

6. Tambahkan kode ‘rel=canonical’
Fungsinya adalah untuk menghindari duplikat konten, karena google sangat tidak mentolerir duplicate content. Berikut caranya, setelah login ke blogger, masuk ke edit html tambahkan kode berikut ini tepat setelah kode <head>

<link expr:href='data:blog.url' rel='canonical' />

Save/simpan template

7. Tag Heading
Posting yang sangat disukai oleh Google adalah posting atau judul yang memiliki tag H1. Agar template anda memiliki format tag H1, anda bisa mengubah ukuran judul posting dengan tag H1. Berikut caranya, carilah kode seperti berikut ini :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kemudian untuk kode yang dicetak tebal(warna orange) hapuslah dan ganti h3(atau pada beberapa template menggunakan h2) menjadi h1. Slenjutnya tambahkan kode berikut ini tepat sebelum kode ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Meskipun sedikit, sepertinya beberapa tips SEO untuk template blogger tersebut cukup bermanfaat untuk meningkatkan SERP Blog anda di mesin pencari, utamanya google.

8. Smart Link
Setelah saya belajar dari beberapa blogger yang sdh hebat dan berhasil, Ternyata template blogspot tidak begitu SEO friendly jika di bandingkan dengan template dari wordpress, namun para blogger sejati trus mencari solusi bagaimana agar template blogspot bisa SEO friendly seperti layaknya template wordpress, di temukanlah jurus - jurus ini.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<script type='text/javascript'>
function autoLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;SEO&quot;, &quot;http://jasabuatblogmurah.blogspot.com/&quot;);
f.add(&quot;blog (keyword kedua)&quot;, &quot;http://jasabuatblogmurah.blogspot.com/ (URL kedua)&quot;);
f.startScript();
</script>
</b:if>

Silahkan anda ganti huruf yang berwarna Merah dengan kata kunci yang anda miliki

Selamat mencoba

Semoga bermanfaat

Tidak ada komentar: