Tutorial CSS : Mengubah Layout Blog Agar Lebih SEO Friendly
Seperti yang kita ketahui tampilan/layout blog yang ideal untuk mengoptimalkan SEO (Search Engine Optimization) adalah sidebar di sebelah kanan dalam hal ini format coding html-nya yakni Header - Content - Sidebar - Footer seperti berikut :
Kenapa demikian? ini dikarenakan robot crawler search engine akan meng-crawl urut berdasarkan kode html mulai dari tag html pembuka <HTML> hingga </HTML>. Nah perilaku robot crawler search engine itu sendiri jika menemui anchor link dia akan masuk meng-crawl link tersebut.
Bisa dibayangkan jika layout blog kita mempunyai format coding html-nya Header - Sidebar - Content - Footer atau sidebarnya di sebelah kiri. Maka robot crawler search engine akan jalan-jalan ke link-link yang ada di sidebar dulu sebelum menjangkau ke content. Nah ini kurang optimal banget untuk SEO. Terus bagaimana agar secara coding html layoutnya adalah Header - Content - Sidebar - Footer (sidebar di kanan) sedangkan untuk tampilan adalah Header - Sidebar - Content - Footer (sidebar di kiri) ?
Kita bisa memanfaatkan properties CSS float:left dan float:right untuk mengakali agar tampilan/layout blog sesuai dengan keinginan kita. Pada contoh kasus diatas, meskipun coding html-nya berlayout Header - Content - Sidebar - Footer (sidebar di kanan) kita bisa membuat tampilannya menjadi sidebar di kiri dengan cara menambahkan properties CSS float:left pada ID “sidebar” dan menambahkan float:right pada ID “content”.
Hasilnya :
Berikut contohnya :
<html>
<head><title>Judul</title>
<style type="text/css">
body{font-family:Verdana;font-size:11px;}
#page{margin:0 auto;width:800px;height:500px;}
#header{float:left;width:800px;height:50px;background:#F90;}
#content{float:right;width:590px;height:500px;background:#FF0;}
#sidebar{float:left;width:200px;height:500px;background:#FC0;}
#footer{float:left;width:800px;height:50px;background:#F90;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>HEADERNYA</h1></div>
<div id="content">CONTENTNYA...</div>
<div id="sidebar">SIDEBARNYA...</div>
<div id="footer">FOOTERNYA...</div>
</div>
</body>
</html>
Yup, semoga bermanfaat. Dan ingat SEO bukanlah ilmu pasti, tapi dari pengalaman ngeblog, layout jenis inilah yang disukai search engine :D
Dalam rangka menyambut Ramadhan dan Lebaran 1429 H, 
Halo Ajax, apa kabar??? kenalin nama saya Zawa huehehehe… :P *hayah…*
