Validasi HTML5 : <b:include data='blog' name='all-head-content'/>

Validasi HTML5 - Berbicara masalah validasi HTML5, template blogger default sangat jauh dari valid HTML. Perlukah melakukan validasi? tentunya akan mengundang berbagai pendapat dalam hal ini. Terlepas dari perbedaan pendapat apakah perlu validasi atau tidak, bagi sahabat yang melakukan validasi, hampir 99% tutorial mengatakan harus menghapus kode :


Inilah permasalahannya. Dengan menghapus kode di atas, berarti mengapus content defaul blogger yang ada pada bagian 'head'. Saya kembali berfikir, tentunya akan banyak meta tag yang dihilangkan dengan hanya menghapus satu kode ini.

Akhirnya saya melakukan percobaan kembali menambah kode <b:include data='blog' name='all-head-content'/> pada template yang sudah valid HTML5 dan saya hilangkan meta tag yang lainnya. Ternyata dugaan saya benar, dengan menghapus 1 kode saja maka akan hilang beberapa meta tag default blogger.

Inilah kode yang dihasilkan dari <b:include data='blog' name='all-head-content'/> pada hompage :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f&&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chrome.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE),
c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='http://blog.kangismet.net/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://blog.kangismet.net/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://blog.kangismet.net/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Blog Kang Ismet - RSS" href="http://blog.kangismet.net/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://www.blogger.com/feeds/1575214712636951960/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://blog.kangismet.net/" />
<meta content='Blog tentang tutorial, tips dan trik seputar Blogger/Blogspot dan Free Blogger Templates' name='description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

dan pada halaman postingan, semua kode diatas dan ada tambahan :

<link rel="alternate" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://blog.kangismet.net/feeds/7483167200625408636/comments/default" />
<link rel="image_src" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkneTCP2w56WcKSwLSa-ulwXfGlUEisd0FL93LLTMNVjZzF8Rjv_xGV93apYhX5Z4s7EQjDGhvESFUvOjXCLGFc0nymh-mxWfIohn1hC9NYh7n2wZEO6yPQlarlOE2rUSSsae2Vmo95A/s72-c/back-to-top-button.png" />
<meta content='Membuat tombol scrol back to top dengan efek memantul (bounce)' name='description'/>

Lantas apa saja yang hilang?

Yang saya fahami saja, diantara yang hilang adalah :

1. Favicon
2. Canonical untuk menghindari duplikat konten
3. Atom RSS
4. OpenID delegate, untuk berkomentar dengan openID
5. Meta Description pada halaman postingan
6. Post Thumbnail.

Solusi

Sebagai solusi yang saya tawarkan adalah setelah menghapus kode <b:include data='blog' name='all-head-content'/> tambahkan kode dibawah ini, untuk mengganti kode yang hilang diatas :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' 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 == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Sebetunya masih ada yang kurang dari default meta tag blogger. Saya tunggu masukan dan koreksinya.

Semoga bermanfaat...