Sebelum melangkah ke topik utama, mari kita bahas terlebih dahulu apa sih HTML5? HTML5 adalah bahasa markup yang digunakan untuk penataan dan konten di World Wide Web(WWW). Bahasa HTML versi ini diselesaikan, dan diterbitkan, pada 28 Oktober 2014 melalui World Wide Web Consortium (W3C). HTML5 adalah revisi kelima dari standar HTML sejak awal World Wide Web(WWW). Versi sebelumnya, HTML4 adalah standar pada tahun 1997. Jadi HTML5 adalah revisi kelima dari sejak dikeluarkannya HTML. Bahasa ini support untuk browser modern seperti IE8+, mozilla, chrome, dll. IE7 kebawah tidak support untuk HTML.
Apa sih keuntungan dari valid HTML5, banyak artikel yang saya baca banyak sekali keuntungan dari valid HTML5, saya sendiri tidak terlalu pusing mementingkan keuntungannya, hanya sekedar keren keranan saja. Buktinya website seperti, google, facebook bahkan tempat belajar CSS, HTML(www.w3schools.com) pun tidak valid HTML5. Tidak hanya itu, framework HTML seperti bootstrap, pure css, materializecss pun tidak valid. Nah loh..
Lantas kenapa banyak blog ingin berlomba lomba untuk memvalidkan blognya di w3c. Saya sendiri kurang tahu alasan mereka apa, tapi blog saya sendiri(http://gianmr.blogspot.co.id/) sengaja saya buat untuk valid di semua validator, tidak percaya silahkan cek saja di http://validator.w3.org/unicorn/ tidak hanya valid html5, tapi juga CSS3, international languange, dan feed. Tujuan sendiri hanya untuk membangun kepercayaan dari pengunjung, bahwa design yang bagus belum tentu tidak valid untuk html5 dan CSS3.
Lanjut ke pembahasan utama, bagaimana sih cara membuat blogger anda valid HTML, berikut adalah langkah langkah yang bisa anda terapkan di blog anda:
1. Seperti biasa saya ingatkan, sebelum anda mengedit blog anda, alangkah baiknya backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot
2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot
3.Setelah itu silahkan anda masuk ke editor template anda,
<!DOCTYPE html>
<html b:version='2' class='v2' 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'>
Ganti dengan kode:
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<meta charset='UTF-8'/> 4. Langkah selanjutnya adalah cari kode:
<b:include data='blog' name='all-head-content'/>
Lalu ganti kode diatas dengan kode:
<meta content='blogger' name='generator'/>
<meta charset='UTF-8'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
5. Langkah berikutnya adalah kita remove default css dari blogger, cari kode:
<head>
Lalu ganti kode diatas dengan kode:
</head><!--<head/>-->
6. Hapus semua kode berikut:
<b:include name='quickedit'/>
7. Hapus juga semua kode berikut:
<a expr:name='data:post.id'/>
8. Lalu kita hapus juga semua kode berikut:
<b:include data='post' name='postQuickEdit'/>
9. Ganti semua kode & dengan &
10. Selesai sudah...
Buat diperhatikan valid HTML5 tidak ada hubungannya dengan SEO.
Perlu diperhatikan:
- Jangan lupa tiap anda posting gambar selalu gunakan kode alt di img nya.
- Hindari penggunakan <center>
- Hilangkan kode border pada tag img
Anda bisa cek valid html di:
http://validator.w3.org/nu/
Untuk cek keseluruhan termasuk CSS3, international languange dan Feed bisa di cek di:
http://validator.w3.org/unicorn/
Ok cukup sekian, kalau bingung anda bisa berkomentar. Atau nanti saya akan coba share template valid buatan saya, stay tune.
0 comments