Saturday, 14 January 2012

Cara Cek dan Memperbaiki Validasi HTML (SEO Friendly)

Advertisement

Lagi2 tentang SEO, khususnya SEO On Page. Salah satu point yang bisa meningkatkan optimasi on page pada blog kita adalah dengan melakukan cek validasi html. Sebagian blogger mengatakan bahwa cek validasi html tidaklah begitu penting, tapi ada juga yang mengatakan kalau harus valid html sesuai aturan yang ada.

Kalau saya sih yang sedang2 saja hehehe, kalau bisa lebih valid kenapa tidak? Bagi sebagian sobat blogger yang masih newbie seperti saya ini mungkin masih bingung dengan apa yang disebut validasi html, setelah browsing2 akhirnya saya pun malah semakin gag paham dengan apa yang dimaksud validasi html dan kenapa kita harus melakukan cek validasi html (gubrak). Yasudahlah, whatever, bydeway, anyway dan busway, daripada iseng dan ngupil mendingan nulis tentang cara cek validasi html hahahaha.

Apa yang dimaksud dengan validasi html?


Bagi sebuah web atau blog, cek validasi html bisa menjadi sesuatu yang sangat penting, hal ini tidak lepas dari pemeliharaan blog tersebut. Semakin valid html maka semakin baik web atau blog tersebut atau bahasa kerennya web atau blog sobat menjadi semakin cross browser compatible.


Bagaimana jika seandainya saya mengabaikan validasi html blog saya?


Website atau blog yang tidak lulus validasi, meskipun bisa berjalan namun tetap memiliki error di dalam struktur mark up nya. Fitur error correction pada setiap browserlah yang menghandle error tersebut, namun masalahnya tidak semua browser menerjemahkan error tersebut dengan cara yang sama.

Melalui validasi html, semua browser, bahkan yang paling tua sekalipun akan bisa membaca dokumen blog sobat dengan mudah.

Bagaimana contoh html yang valid?


Contoh hal simple yang bisa menyebabkan kode html disebut tidak valid misalnya seperti ini:

<img src="/images/cara cek validasi html.jpg" />

bandingkan dengan

<img src="/images/cara cek validasi html.jpg"  alt="cara cek html yang valid"/>

kedua kode diatas sama2 bisa diakses oleh browser, akan tetapi kode ke2 yang mengikuti aturan main validasi html lebih cepat dibaca oleh bot, hal ini dikarenakan pada sebuah gambar, tag "alt" lah yang menjadi referensi dr gambar tersebut.


Bagaimana cara cek validasi html?


Untuk melakukan cek validasi html sobat bisa menggunakan tools bernama Markup Validation yang disediakan oleh W3C. Silahkan menuju ke http://validator.w3.org. Gimana sudah dicek? Apakah banyak error sob? Wajar kalau banyak error karena memang pada dasarnya template blogger mengandung banyak kode css yang njlimet. CMIIW

Cek validasi html dan cara mengurangi error html


Setelah kita melakukan cek validasi html, tibalah saatnya untuk berbuka mengurangi error html tersebut. Mari mulai mengurangi error html walaupun tidak bisa 100 persen :)

  1. Ganti kode html bawaan blogger, kodenya seperti ini:



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    ganti dengan kode seperti ini:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. Selanjutnya cari kode berikut:
    <b:include name='quickedit'/>
    Hapus semua kode yang seperti itu, catatan setiap menambahkan widget sobat harus melakukan delete lagi supaya validasi html nya tetap optimal.

  3. Untuk poin ke3 dalam rangka cek validasi html ini kita akan merubah salah satu kode bawaan blogger lagi, yaitu kode yang seperti ini :
    <b:include data='blog' name='all-head-content'/>
    ganti kode tersebut dengan

    <!-- Blogger Default Meta -->
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <link expr:href='data:blog.url' rel='canonical'/>
    <link href='http://www.blogger.com/profile/IDBLOGGERPROFILESOBAT' rel='me'/>
    <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
    <link href='http://www.blogger.com/rsd.g?blogID=IDBLOGGERSOBAT' rel='EditURI' title='RSD' type='application/rsd xml'/>
    <link href='http://www.blogger.com/feeds/IDBLOGGERSOBAT/posts/default' rel='service.post' title='JUDULBLOG - Atom' type='application/atom+xml'/>
    <link href='http://www.URL-BLOG.blogspot.com/feeds/posts/default' rel='alternate' title='JUDULBLOG - Atom' type='application/atom+xml'/>
    <!-- End Blogger Default Meta -->


    IDBLOGGERPROFILESOBAT = dapat sobat lihat pada alamat URL Profile Blogger sobat.
    IDBLOGGERSOBAT = dapat sobat lihat pada alamat URL edit Html Blog.
    URL-BLOG = isi dengan url blog sobat.

  4. Mengurangi penggunaan kode strip/dash (-)



    Untuk HTML

    <!------ Blogger Default Meta ------> SALAH



    <!-- Blogger Default Meta --> Benar


    Untuk CSS


    </*----------- Header ------------*/ SALAH



    /* Header */ Benar



  5. Cari kode </head> jika sudah ketemu, letakkan kode berikut dibawahnya :
    <!-- <body><div></div> --> 



  6. Biasakan menggunakan atribut alt pada gambar, contoh

    <img alt='cara cek validasi html' src='URL gambar cek validasi html'/>

Ya begitulah akhir dari cerita tentang cara cek validasi html ini :D saya bukan ahli html apalagi ahli kunci tiga menit jadi sob, itu hanya hasil dari baca2 blog yang sudah mengulas tentang cara cek validasi html sebelumnya. Kalau mau nambahin atau mungkin nyalahin ya monggo ajah, kotak komen terbuka lebar :p

Semoga bermanfaat.


EmoticonEmoticon