Cara Membuat Template Valid HTML 5 [blogspot]

Cara membuat template blogspot/blogger valid HTML5 - kali ini Mas Zaid akan  berbagi tehnik membuat template valid HTML 5 yang kemarin sudah dicoba di blog ini dan hasilnya sukses hanya tertinggal 1 warning, pertama - tama saya akan mengucapkan terima kasih kepada Bertiga satu tujuan yang telah membantu saya memvalidkan template Zaid Info ini, berikut ini buktinya.
Cara Membuat Template Valid HTML 5 [blogspot]
Anda bisa cek di validator.w3.org dengan memasukkan url blog ini.

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.
Cara Membuat Template Valid HTML 5 [blogspot]

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 == &quot;item&quot;'>
<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



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 == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, Keyword anda, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><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'/>

Update 02 Maret 2013


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head><link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='index,follow' name='robots'/> <meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='KeyWordmu' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><title><data:blog.pageTitle/></title></b:if>
<b:if cond='data:blog.pageType == &quot;data:post.url&quot;'>
<meta content='index,follow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;data:blog.searchQuery&quot;'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='index,follow' name='robots'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<title><data:blog.pageName/></title>
</b:if>
<b:if cond='data:blog.isMobile'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='noindex,nofollow' name='robots'/>
  <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
<title><data:blog.searchLabel/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<meta content='noindex,nofollow' name='robots'/>
 <meta content='Maaf halaman yang anda cari telah dihapuskan jadi silahkan gunakan search pada blog ini untuk mendapatkan informasi similar' name='description'/>
<meta expr:content='data:blog.pageName + data:blog.pageTitle' name='keywords'/>
<title><data:blog.pageTitle/></title>
</b:if>
<meta content='index, follow' name='robots'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='VALIDASI google' name='google-site-verification'/>
<meta content='VALIDASI alexa' name='alexaVerifyID'/>
<meta content='VALIDASI BING ' name='msvalidate.01'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='2 days' name='revisit-after'/>
<link href='G+ kamu' rel='author'/>
<meta content='noarchive' name='robots'/>
<link href='http://URLMU/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
Jika ada kesulitan bisa PM saya di https://www.facebook.com/zaidblogger