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 :

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

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'/>

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/AVvXsEhpNObUDGfJklOExwNGm8xFWGRYC3KZo5ASaRJViptAoq3cE4amotMUHe-1-V3iIkSPcUepL6cAcz25_eftKH0vQcN1x4_mXCfv-FI6cJzY7M_zn8sZW43QE1dc4Q6NIyuhd23z_4KpUB0/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 :

Favicon
Canonical untuk menghindari duplikat konten
Atom RSS
OpenID delegate, untuk berkomentar dengan openID
Meta Description pada halaman postingan
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 + "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>

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

Semoga bermanfaat...

source : http://blog.kangismet.net/2013/09/validasi-html5-binclude-data-blog-name-all-head-content.html

Ditulis oleh: Anonymous Pada : Thursday, January 23, 2014

Label : Tutorial Blogger