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 :thumbnail

<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'/>
<!--[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="http://1.bp.blogspot.com/-tu37DGrY2dA/UiaoDNMYz1I/AAAAAAAAFS0/faQ8QSPd4nM/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...

81 komentar

Mantap kang, Artikelnya Sangat Bermanfaat

Balas

Boleh di coba nih kang soalnya blog saya lg ada masalah,,
Mungkin gara gara menghapus Peta situs di webmaster pencarian di google search jadi hilang,,,,

Balas

Untuk javascript paling atas sama kode yang paling bawah apakah itu ga apa2 tidak dicantumkan juga kang... Fungsinya untuk apa kode tersebut?

Balas

sip kang pertamax, yang jadi masalah sekarang bagaimana menghapus error yang ini
[pre]<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=2319533736235461549&zx=df9721d1-d17f-485e-96d4-e45eb5d6db36"/>[/pre]
Mohon peencerahannya

Balas

sedangkan kode tersebut tidak ada dalam template

Balas

@kang Kompi : coba dipelajari lagi aja, kayaknya untuk penentuan waktu sama IE.. saya belum begitu faham

Balas

coba di Kompi Ajaib :
http://www.kompiajaib.com/2013/04/trik-menyembunyikan-css-reset-stylesheet-blogger.html

Balas

Situs www.google.com tidak valid HTML5 ada 25 Errors, 4 warning. Apakah itu merupakan indikasi bahwa valid HTML5 itu ngak penting ya,,! hee

Balas

justru itu sob, masih banyak kontroversi. tapi google sendiri hanya Search Engine, tidak menampilkan selengkap web/blog. trus cuma 25 error, bandingkan blog saya sebelum validasi.. sampai 300an hehheh :)

Balas

Jika memang HTML5 tidak penting, saya pikir tidak mungkin sebuah website hanya memiliki error 25 saja, pasti bisa ratusan errornya jika memang tidak memikirkan tentang HTML5. Mungkin karena Google sangat kompleks, jadi ada beberapa aspek yang belum bisa dijadikan HTML5...itu hanya menurut saya saja hehehehe....

Balas

Selama ini memang saya tidak menggunakan kode "all head content" tersebut, saya pakai seperti kode di atas namun tidak menggunakan RSS atom dan thumbnail. Nah sekarang saya coba kode ini biar lebih komplit heheheehe hatur nuhun...

Balas

Diatas penting dan tidaknya valid HTML5 semua pasti ada alasannya ....
yang pasti blog saya belum di validasi kang ... asa wegah teh hehe !! dan yg lebih penting artikel kali ini cukup mewakili saya dalam menentukan langkah selanjutnya dalam persiapan validasi html5 pada blog saya ..

Balas

saya belum paham masalah html, nyimak saja kang, sambil belajar di blog kang ismet.thks infonya.

Balas

saya juga asalnya ga peduli valid2an kang... tuntutan pertanyaan kang adhy, jadi terbawa. hikmahnya ternyata banyak, saya jadi lebih memahami html, microdata, rdfa dll :)

Balas

silahkan sob, kalau suatu saat terobsesi pada HTML5, tinggal kembali ke sini... :)

Balas

bro bisa bikinin blog saya seo 100% dan html5 gak?

Balas

bisa aja... tapi harus santai :)

Balas

kebanyak kan blog saya error & dengan > bro kalau bisa kita chatting lewat fb atau apa ya? ini fb saya : http://www.facebook.com/bmaster23.wordpress.c0m yah gan makasih banyak :D

Balas

Kang Ismet, apakah jarang Online di Jejaring Sosial seperi Facebook atau Twitter ?.

Artikel yang sangat bermanfaat, terima kasih kang :D

Balas

bukan jarang.. hampir ga pernah :)

Balas

di GPlus aja sob.. males FBan :)

Balas

Saya setuju sama Kang Ismet dan Mas Komi Ajaib. Sesuatu yang Valid tentu lbih baik daripada yang error. Teknologi terus berkembang. kalo tidak mengikuti tentu akan jauh ketinggalan...namun jika melihat kenyataanya web terkemuka spt facebook dan twitter masih memiliki kendala yang sama yakni tidak Valid HTML5

Balas

hampir semua artikel disini memang terhitung baru kang.. :-d

Balas

ilmu baru deui euyyy, mantap pokonya, nyobaan ahhhh mudah2an blog ana bisa valid HTML5, haturnuhun kang.!

Balas

Validasi HTML 5 Dan CSS 3 Memang sangat di anjurkan
Buat blogging yang peduli dengan HTML5 tersebut Kang
Memang masih banyak yang kontraversi, tapi itu semua
Terserah hak masing2 sih. tapi saya pribadi valid html 5
Dan CSS3 Sebuah Template Web site atau blog itu sangat
Penting sekali, karena offtimisasi apapun entah seo dan
Sebagai nya, apalah artinya kalau memang Template
Blog kita tidak valid HTML 5 CSS3, apa lagi kalau sudah
terdetek error dan warning, dengan jumlah besar pada template.
Menurut saya itu sia-sia artikel dan content kita, karena

Template yang kita pakai belum valid HTML5. kurang lebih
Mungkin Kang Ismet yang lebih tau,. terima kasih atas
Artikel nya yah Kang semoga sobat yang lain bisa lebih
Memahami artikel Akang, ini yang sangat membantu..

Trima kasih.. happy blogging.

Balas

Memang setelah diperbaiki pada artikel yang diposting Kang Ismet di Cara Buat Blog Valid HTML 5 alhamdulillah visitornya bertambah kang...
Kalau yang ini belum tak coba Kang

Balas

Sebenarnya bukan tidak penting Mas Adhy tapi masih banyak orang yang belum mengetahui cara membuat Valid yang pada awalnya sangat terasa sulit ..beruntung ada mas kompy ajaib dan kang ismet memberi solusinya....windows saja selalu di perbaharui begitu pula dengan HTML ..masak kita masih akan mengikuti HTML Yang lama sedangkan W3C sebagai pengembang XHTML saja sudah membuat HTML 5,tentunya mempunyai alasan tersendiri yang salah satunya untuk mendukung teknologi multimedia terbaru

Balas

kalau yang daerah comments hack bagaimana ya Mas ?? sharenya dong

Balas

makasih infonya kang, langsung ke TKP

Balas

itu dia kang yang saya maksud kemarin, jadi secara gak langsung kita manggil b0t si mbah buat ngubek2 blog kita hhi :p

#gutjob

Balas

kalo menurut sayah, si mbah pasti punya standart tool tersendiri gan :D

Balas

Kalo menurut saya kalo google mau Valid 5 tinggal suruh kang ismet aja benerin.. pasti deh valid :D

Balas

Pertanyaan saya apa meta tag yang lama harus dihapus diganti dengan ini kang?

Balas

Memangnya kenapa kang tidak pernah ?
banyak loh yang mengirim pesan di Fanpagae, apalagi yang mentions di Twitter :D

Balas

Setelah sekian lama ngubek, akhirnya nemu jawabannya nggak jauh2..di blog kang Ismet juga nemunya. Kalau gak salah setahuan lalu saya udah lama pernah menghgapus kode itu kang di beberapa blog saya. Dan alhasil, yang paling menyolok dampaknya adalah meta description di hasil SERP jadi aneh tampilannya.

Jadi solusinya dengan mengganti kode yang dihapus itu dengan kode-kode yang akang kasih diatas itu, kan?

Saya coba dulu deh. Terima kasih banget sebelumnya kang Ismet :)

Balas

hahaha.. males aja ga tau kenapa :)

Balas

kade ah keuna virus HTML :D

Balas

beuuuh... hebat argumennya kang.. pokonya setuju lah

Balas

wah mantap dong sob.. masih banyak nih artikel tentang validasi html5 :)

Balas

episode selanjutnya... :) diitunggu aja

Balas

tengkyu2.... karena komennya saya jadi ngacak2 :)

Balas

ga usah... kecuali satu dari yang atas, kalau memang sudah ada.. meta description untuk postingan tidak usah dipasang

Balas

betul sob.. tinggal nambah sam kode yang diatas aja

Balas

Kang saya coba buka pakai chrome kok blognya aneh seperti yang lupa memperpanjang domain gitu :D

Balas

benar mas adhy .. saya semalam sampe buka 5 kali dan jdi aneh nih tampilannya ..
udah restart chormenya angger we aneh ... tapi sekarang mah biasa lagi ..
kunaon tah kang kunaonnnn ???

Balas

salut gue bro, teu capek kitu?
dah capek ngeganti, eh tauknya google menambahkan syntax lagi, eh add lagi, eh google tambah lagi, eh add lagi...rek neupi kamana errotna tah...wekewakwaokwauk

Balas

oh pantesan meta description untuk postingan yang bikin down artikel di serp.. Wah padahal hampir semua diatas kemaren setelah ganti turun2 terus :(

Balas

gan gimana gan jadi gak bikini ane html5 ?
mumpung malam ini OL gan,kalau bisa bantu saya bikin responsif ya gan :(

Balas

alhmdllh blog ane udah lama valid html 5

Balas

oh iya kang blog saya kan sudah responsive, tapi masalah margin dan padding pada responsivenya yang saya binggung? bisa dibantu kang ukuran margin dan padding di query brp aja?

Balas

Alhamdulillah kang, valid di homepage ... :D

Balas

Alhamdulillah tos tiasa on deui kang hehehehe....

Balas

Dikupas tuntas masalah valid :p
mantep kang..
Tapi punten bade nyario rada jauh..

gimana cara membuat "klik ganda untuk seleksi"?

Balas

ngaraosan teh teu ngajak2 si aki mah -_-

Balas

bener kata kang adhy... domain saya kemarin expire :)

Balas

wkwkwkkw erot mah ka palabuhanratu kang... resiko eta mah

Balas

tinggal halaman posting... tunggu artikelnya :)

Balas

nuhun kang atensina.. heheh sempet expire janten lami propagansi ke serverna

Balas

ke sini aja http://blog.kangismet.net/2013/08/menampilkan-komentar-blogger-dan-google-plus-bersamaan.html?showComment=1378133935918#c494318272044954167 kalau pada tag pre tinggal ganti aja

Balas

apa Kang Ismet juga pakai ini ?? saya takut terganggu SEOnya :D

Balas

iya sob.. hehehe saya juga coba2... beberapa hari ini sih aman2 saja :)

Balas

Teu tiasa gening kang?
Abdi bade nganggo ka pre nu bade di klik ganda untuk seleksi

Balas

ngapain ngepost pertanyaan di forum kalau jawabannya ada di sini...hehehe

ternyta feed yang hilang itu karena mas adhy tidak memakai kode <b:include data='blog' name='all-head-content'/> di template nya.

Nah setelah saya terapkan di blog, yang muncul adalah ...pada halaman home page deskripsi blognya yang hilang kang, tapi di halaman item semua sudah muncul

Balas

perlu ditambah lagi meta tag kayanya kang

Balas

dibungkus pakai tag kondisional b:if ya kang....jadi cuma muncul di homepage

Balas

sukses kang.... terima kasih banyak

Balas

trims kang,masalah ane jadi kelar...hoho

Balas

Alhamdulilah Valid 5 template saya

Balas

Saya masih menggunakan al head content bawaan bloggernya Kang, tetapi saat di cek masih VALID kang, menurut Kang Ismet apakah saya harus menggantinya seperti di atas atau tetap menggunakan bawaan bloggernya?

Balas
Komentar ini telah dihapus oleh pengarang.

Postingan ini bermanfaat Kang :D -- saya hanya membutuhkan sedikit mengenai isi Head, yaa beruntung saya menemukan postingan ini, sekarang saya buang all head content dan mengisi apa yang saya perlukan saja, bisa kang ismet lihat di posting terakhir saya di blog saya hehehe. :)

Balas

Poskan Komentar


×
Chat