Cara Edit Template Agar Seo Friendly

Posted by : ahman " creativ" Jumat, 26 Oktober 2012

Beberapa waktu lalu, ianhacks sempat gonta-ganti template dan itu mungkin membuat bingung pengunjung karena melihat perubahan mendadak saat surfing di blog ini. Pergantian template tersebut dimaksudkan untuk mempelajari struktur dari template dan beberapa aplikasi yang memang dibutuhkan dalam pengolahan blog yang optimal. Walau hasilnya masih jauh dari harapan, setidaknya dapat memberikan sedikit solusi dari apa yang di dapat melalui perjalanan tersebut.

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

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

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

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

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

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

</b:if>

Hapus garis putus-putus seperti di bawah ini

-----------------------------------------------

Blogger Template Style

Name: Minima

Date: 18 Juli 2012

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>

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.

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

</a>

</span>

</b:if>

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

<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

Menjadi seperti ini

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>

Pasang Heading Tag

Cari kode berikut, bila tidak ketemu kamu ganti kode h3 dengan h2

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

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

<b:else/>

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

<b:else/>

<data:post.title/>

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

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,selamat mencoba sobat!!