Jumat, 29 April 2011

9 Cara Membuat Template Menjadi SEO Friendly

Assalamu'alaikum Wr.Wb Sob

Setelah berulang kali gonta ganti template blog, dan berulang kali juga setting template agar seo friendly, dan berulang kali juga buka postingan di Blognya Juragan, sekarang kuputuskan untuk memposting sendiri cara-cara membaut template menjadi SEO Friendly, yang acuannya tetap ke blognya juragan "thanks ya Juragan ^_^"

langsung saja ya sob :

Masuk dasbor -->> Rancangan -->> Edit Html -->> klik kota Expand / download dulu template kamu sob :)

1. Mengubah Page Tittle


blog yang disukai oleh google adalah blog yang langsung menuju kepada judul postingan, visitor googler juga lebih mendahulukan judul postingan yang dicari ketimbang nama blog sobat, masalahnya page tittle asli masih mendahulukan nama blog baru kemudian judul postingan, sekarang ubah settingan tersebut dengan cara :

a. cari kode berikut ini (gunakan ctrl+f)

<title><data:blog.pageTitle/></title>

b. hapus kode tersebut dan ubah dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Atau sobat juga bisa tambahin beberapa kata kunci ( keyword ) :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | KATA KUNCI | KATA KUNCI | KATA KUNCI </title>
</b:if>

c. save template

2. Mengubah Meta Discription dan Meta Keyword 

suatu blog harus punya sesuatu untuk menggambarkan tentang keadaan blognya, disitulah fungsi dan tugas MD dan MK untuk membantu google dalam mendeteksi konsep blognya, tentu membantu visitor juga loh sob, caranya begini sob:

a. cari kode ini

<b:skin><![CDATA[/*

b. kemudian tambahkan kode dibawah  sebelum kode tadi

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog Sobat" />
<meta name="keywords" content="KataKunci,KataKunci,KataKunci" />
</b:if>

c. save template

3. Memasang SEO Smart Link 

 a. copy dan paste kode di bawah ini di atas kode </body>

<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;Software | Entertainment | Hobi Ngeblog | Artikel Bebas | Tutorial Blog&quot;, &quot;http://kep-katro.blogspot.com/&quot;);
f.startScript();
</script></b:if>

b. kode yang berwarna merah ganti dengan kata-kata yang seringkalian gunakan di setiap postingan kalian sob, kalo aku setiap posting pasti ada kata SOB.

c. save template


4. memasang Breadcrumbs 

google paling suka blog yang ada breadcrumbs nya, cara pasangnya baca disini sob http://kep-katro.blogspot.com/2011/04/memasang-breadcrumbs-sebagian-dari.html

5. memasang Related Post 

Memanjakan Visitor adalah hal yang paling utama, adakalanya visitor malas untuk mencari artikel terkait di daftar isi yang berantakan, nah itulah manfaatnya related post, cara pasangnya juga cukup mudah

a. Login ke Blogger.
b. Di halaman Dasbor, kita pilih Rancangan.
c. Kemudian pilih Edit HTML
d. Beri tanda centang pada Expand Template Widget
e. Cari kode </head>
f. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}


#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}



#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

g. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

h. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas

<!-- Marquee Blogger Katro Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Blogger Katro Related Posts with Thumbnails Code End-->

h. save template


6. Mematikan setting archive ( arsip ) 

a. letakkan kode berikut dibawah kode <head> :

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

b. save template

7. Menambahkan kode �rel=canonical�

a. tambahkan kode berikut setelah kode <head>

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

b. save template

8. Tag Heading 

a. cari kode ini <h3 class='post-title entry-title'>

b. hapus dan ubah menjadi <h1 class='post-title entry-title'>

c. cari kode ini </h3>

d. ubah menjadi </h1>

catatan : poin a dan c ada didalam kode

<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>

e. tambahkan kode berikut sebelum kode ]]></b:skin>

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

f. save template
9. Compress CSS
Kompress ini digunakan untuk template yang terlalu berat, copy CSS blog sobat biasanya CSS dimulai dari kode  <![CDATA[/*  sampai kode ]]></b:skin> nah paste di kolom yang tersedia di situs compressor ini dia situsnya www.minifycss.com dan hasilnya di copy dan pastekan kembali di kode html blog kamu sob, selesai, save template :)

mungkin itu saja yang bisa aku share sob, dapet ilmu dari juragan :)
semoga bermanfaat :)

TTD : Software | Entertainment | Hobi Ngeblog | Artikel Bebas | Tutorial Blog

Tidak ada komentar:

Poskan Komentar