W3C Valid Blogger blog: An impossibility

Markup Validator is used to check the validity of Web documents. My previous two templates Standardized and Directus are both 1 error away from W3C Valid label. This error being due to the IE meta tag whose purpose is to make sure everything HTML5 works in the IE9. But recently very weird things started to happen on this blog, neither was I able to Digg any of the new posts nor was the Like button working for them.



What Happened

Faulty Like Button 
All the New posts were showing the Number of likes that the main domain had received rather than the independent Likes of that posts


Unable to Digg
The Digg button was not working for any of the new posts, It was redirecting to a older story that I had Dugg a while back. It was supposing the new posts had already been dugg.


Why it Happened
After going through my source ,it struck that I had removed a couple of lines to achieve W3C validity. After a bit of thinking and testing I realized that the reason for this problem was

<link rel="service.post" type="application/atom xml" title="Blog Name - Atom" href="http://www.blogger.com/feeds/BLOGID/posts/default" />

I had excluded the above line of code, as it was giving a error while the validation process. After including it again ,everything started to work fine.


How was it causing the problem
The cause was the attribute present in the rel tag. W3C showed that the value in the rel tag is not registered

 Line 18, Column 158: Bad value service.post for attribute rel on element link: Keyword service.post is not registered.


With this problem ,It becomes impossible to make a perfectly Valid W3C blog in which the Like and Digg buttons works correctly. There is a alternative that you can use conditional tags to make the Homepage Valid atleast.


For people using the Standardized and Directus template ,here is how you can fix it :


Find the following code:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type='text/javascript'>(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e =b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='http://YourBlogName.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://YourBlogName.blogspot.com/' rel='canonical'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default' rel='alternate' title='Atom' type='application/atom xml'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='RSS' type='application/rss xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<!--[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/754431588-ieretrofit.js"></script> <![endif]-->
<!--[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]-->

Replace it with this line of code:

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

In the upcoming post I will talk how you can achieve W3C validity atleast partially.


I am not aware of the technicalities of why this tag is present in the first place but it has something to with the feed of the post. What are your views on it ?

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox