Artikel ini muncul dari keresahan beberapa kawan-kawan (termasuk saya sendiri) ketika mem-validasi HTML di W3C. Sebuah pertanyaan muncul ketika kode yang divalidasi akhir tidak pernah valid. Ketika saya dan kawan-kawan cek ulang kerja tersebut, ternyata ada beberapa kode bawaan blogger berpengaruh terhadap validasi. Hal lainnya yang juga dapat berpengaruh adalah ketika kita menambahkan terlalu banyak kode atau widget yang sebenarnya tidak perlu, bahkan bila widget tersebut berindikasi tidak mendukung konten blog kita, tentunya akan berpengaruh pada optimasi blog anda. Akhirnya saya berkesimpulan tidak semua template itu valid, dan walau ada template valid XHTML, saya rasa ketika anda cek akan tetap mempunyai error code. Solusinya bagi kawan-kawan adalah mengurangi kode yang error tersebut, dan anda harus berbesar hati ketika masih menemukan tidak validnya kode di template anda, yang penting tidak terlalu banyak dan bermasalah dengan kinerja spider bot. Saya rasa itu sudah cukup.
Setelah melakukan beberapa pembelajaran dan perbandingan perubahan template, baik beberapa blog yang mengupas tentang widget pendukung seo, pengeditan template agar seo friendly, dan juga masalah edit kode untuk mengurangi kerusakan kode ketika anda memvalidasi, ternyata template yang sederhana termasuk struktur yang di sukai google. Alasannya spiderbot akan mudah menjelajahi blog anda dan itu akan menjamin optimasi seo anda. Selanjutnya anda hanya perlu memasang beberapa widget yang benar-benar dibutuhkan untuk blog anda. Saran saya pasanglah widget seperlunya, karena blog bukan sebuah rumah yang indah atau terkesan mewah bila ditambah dengan berbagai perabotnya. Hal mendasar yang harus kita pahami adalah bertanya kepada diri sendiri, aksesoris apa yang ingin anda tambahkan, walau sederhana namun tidak kalah menarik dalam tampilan. Minimal masalah layout akan terlihat rapi dan nyaman dipandang mata.
Berangkat dari perjalanan kemarin, saya akan terangkan bagaimana cara mengedit template anda agar seo friendly dan menambahkan beberapa kode untuk mengurangi broken code saat validasi. Saya mohon maaf sebelumnya, kalau saya lancang membeberkan masalah ini, dan terus terang saya buka seorang master seo dan ahli dalam masalah coding. Selanjutnya saya memohon bimbingan melalui kritik dan saran yang membangun untuk pembelajaran saya dan perkembangan blog ini ke depannya. Kepada kawan-kawan blogger semua, harap artikel ini di kritisi dan dijadikan sebuah pembelajaran kita bersama.
Sebelumnya saya juga mengucapkan terima kasih kepada blog juragan, keluarga-madinah, blogger admin, om choen, dan beberapa sahabat blogger yang banyak memberi masukan melalui artikel dan ceramah mereka.Makasih banyak kepada seorang sahabat Hacker yang kemarin telah berkunjung ke rumah dan membeberkan masalah coding pada web yang akhirnya sangat membantu dalam memaksimalkan kinerja blog ini. Ane suka gaya ente...jangan ;upa juga kopinya di bawa lagi bro...heheheeeee.
Silahkan simak struktur template di bawah ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>goblog</title>
</head>
<body>
</body>
</html>
Antara <head> ke </head> adalah peletakan kode css dan antara <body> ke </body> adalah peletakan kode html-javascript. Sedangkan bagian <html> ke </html> adalah bagian keseluruhan dari isi template anda, seperti header, sidebar, content, dan footer. Kenapa ini saya terangkan, hanya untuk mempermudah anda kalau anda ingin mengganti template setelah anda mengikuti artikel ini. Saran saya kalau anda mengganti template silahkan ganti dengan template seo friendly. Masalah validasi CSS dan HTML yang sering di tanyakan kawan-kawan nanti saya terangkan belakangan. Cari juga template yang hanya menggunakan sidebar kanan karena akan mempercepat loading. Alasannya katika template dibaca di mulai dari header, sidebar kiri, posting, sidebar kanan, lalu bagian footer.
Saya akan terangkan dulu beberapa widget yang harus anda tambahkan ke dalam template anda, seperti daftar isi yang baik, breadcrumb, artikel terkait, permalink, dan entri populer. Widget ini akan membantu kemudahan pengunjung dalam berselancar di blog anda dan dalam peningkatan optimasi SEO blog anda. Selanjutnya bagian penambahan kode dan pengurangan atau pergantian kode pada template untuk mengurangi error code pada template anda. Saya akan terangkan saja langsung pada bagian edit template, ikuti langkah berikut.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expan Template Widget
Cari kode di bawah ini, letaknya di atas kode <head>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Ganti dengan kode berikut
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Pasang Meta Tag di setiap Postingan Secara Otomatis, kode ini saya tambahkan dengan mata tag dasarnya. Ganti Meta Tag di bawah kode <head> semuanya dan ganti dengan Meta Tag di bawah ini.
<b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='DESKRIPSI BLOG ANDA' name='DESCRIPTION'/>
<meta content='KATA KUNCI BLOG ANDA' name='KEYWORDS'/> </b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='NAMA ADMIN' name='author'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='NAMA WILAYAH ANDA' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>
Hapus garis putus-putus seperti di bawah ini
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Hilangkan garis putus-putusnya bro -----------------*/ Menjadi seperti ini
/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/
Masukkan kode di bawah ini di atas kode <body>
<!--<body><div></div>-->
Selanjutnya hapus juga kode ini, karena tidak berguna lagi.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
Kode di atas untuk menghilangkan navbar yang akan berpengaruh pada validasi blog anda, ada anggapan kawan-kawan bahwa navbar tersebut tidak valid. Kalau salah tolong di kritisi atau yang tau tolong share ya. Nanti anda akan di bawah apakah navbar akan dihapus, klik saja Hapus Widget.
Hapus semua tanda obeng (quickedit)
Kode yang harus anda hapus seperti di bawah ini.
<b:include name='quickedit'/>
Cari kode di bawah ini dan hapus kode tersebut.
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
Ganti dengan kode di bawah ini.
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
Pasang Tag nofollow pada setiap link semua link yang mengandung label search karena akan sia-sia ketika anda memberikan backlink menuju sebuah alamat url label pada blog spot. contohnya seperti di bawah ini
<a href='http://blogonol.blogspot.com/search/label/blog%20info'>blog info</a>
Menjadi seperti ini
<a href='http://blogonol.blogspot.com/search/label/blog%20info' rel='nofollow'>blog info</a>
Mematikan Fungsi Arsip
Pasang kode ini di bawah kode <head>
<b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if>
Kalau anda ingin setting dari pengaturan ikuti langkah berikut.
Klik Pengaturan atau Setting
Klik Arsip atau Archive kalau pake bahasa bule dan setting Tidak Ada Arsip atau NoArchive, contohnya seperti gambar di bawah ini.
Menghindari Duplikat Konten
Pasang kode berikut di bawah kode <head>
<link expr:href='data:blog.url' rel='canonical' />
Pasang Heading Tag
Cari kode berikut, bila tidak ketemu kamu ganti kode h3 dengan h2
<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>
Ganti h3 yang cetak tebal dengan h1 kemudian tambahkan kode berikut di atas kode ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
Selanjutnya klik Simpan Template
Pasang SEO Smart Link
Masukkan kode berikut 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) != " "){keyword = " " + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName("div");
for(var i=0; i<objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf("post-body")>-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, "<a href='"+href+"'>"+keyword+"</a>", "gi");
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout("f.createAnchor()", 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add("MASUKKAN SATU KATA KUNCI ANDA", "http://ALAMAT BLOG ANDA.blogspot.com/");
f.startScript();
</script></b:if>
Kata kunci ini bersifat Case Sensitive, maksudnya kalau anda masukkan tutorial, maka kata Tutorial dengan huruf besar tidak akan terbaca. Jadi pilih kata yang sering anda gunakan saat menulis artikel anda.
Sampai di sini dulu cara edit template agar seo friendley, kalau ada salah tolong di kritisi. Sekian dan semoga bermanfaat bagi semua.
"keep spirits and do the best"
