Cara Membuat Template Valid HTML 5 [blogspot]

Cara membuat template blogspot/blogger valid HTML5 - kali ini kita akan update dan mengambil dari posting Mas Zaid mengenai berbagi tehnik membuat template valid HTML 5

Untuk tutorialnya kita mulai dulu mengenal apa itu HTML 5, menurut wikipedia HTML 5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Setelah mengenal apa itu HTML 5 kali ini saya akan membawa anda untuk mempelajari bagaimana memvalidkan HTML 5 pada blogspot. Ayo kita mulai.

Tutorial Valid HTML 5 [blogspot]

1) Masuk ke validator.w3.org
2) Masukkan url anda pada kolom address dan lakukanlah seperti gambar dibawah ini.

Cara Membuat Template Valid HTML 5 [blogspot]

3) Klik Check dan lihat hasilnya, seberapa banyak eror terjadi, coba perbaiki satu demi satu, lihat pada validator output.

4) Ubah meta tag anda menjadi default seperti ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Keyword blog anda' name='keywords'/></b:if>
<link href='http://zaid-info.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://zaid-info.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://zaid-info.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='kode validasi dari google webmaster' name='google-site-verification'/>
<meta content='kode validasi alexa' name='alexaVerifyID'/>
<meta content='kode validasi dari bing' name='msvalidate.01'/>
<meta content='Nama Anda' name='Author'/>

silahkan ubah http://zaid-info.blogspot.com/ ke url blog anda.
kembalikan <html 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'> menjadi <html> setiap kali edit HTML

5) Perbaiki kesalahan pada Edit HTML ( Expand Widget Templates )
6) Jangan terpaku dengan Edit HTML cek juga kesalahan pada post
7) Selamat berjuang

Update

Setelah selesai semua anda bisa ke setting (pada tampilan baru) >> Searh preferences >> setting robot.txt, Description, Custom robots header tags

Baca disini tutorialnya -> http://zaid-info.blogspot.com/2012/08/setting-robottxt-dan-custom-robots.html

Update 2 September 2012

Meta tag lebih seo friendly berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
<meta content='Keyword anda' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + ", Keyword anda, " + data:blog.pageName' name='Keywords'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if>
kode validasi google alexa dan bing<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='nama anda' name='author'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://url anda.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http:// url anda.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>

Jika ada kesulitan bisa PM Mas Zaid di https://www.facebook.com/zaidblogger

Refrensi http://zaid-info.blogspot.com/2012/08/cara-membuat-template-valid-html-5.html