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

Error Line 18, Column 158Bad 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

Post a Comment
Rahul Roy said...

we ask this question in Blogger help forum, may be they can help!

@rahul royWill try

Anonymous said...

thanks for the post

Navneet said...

@Anonymousyou are welcome.!! :-)

Daudara said...

Customized blogger templates will somehow always fails with W3C valid test.

@Nonamethe thing is that even the default templates provided by Blogger fails the W3C fail the validation

Azshara said...

I dont know, if "fails" is the right word or enough for that. Its more an "epic fail". =D

Rightly said

Chetan said...

Let me try this...even i am facing this problem

Alex said...

Any updates on w3c validation?

Unknown said...

A Blogger blog with valid HTML5 is no longer an impossibility. Maybe you can see the result (http://validator.w3.org/check?uri=http%3A%2F%2Fichlasulaffan7bp12011.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices).

See, it's perfect!

But I'm still consider a CSS3 valid Blogger blog as an impossibility. This site have one error.

Anonymous said...

http://achievementt.blogspot.com/

thanks for the tutorial

You could not valid a blogspot blog. Atleast one error occur i.e. service.post. If you remove blogger and use custom meta tags then you valid your blog but your blog make so many duplicate content for country specific, desktop and mobile view. rel="canonical" metatag does not work.

To avoid duplicate content with valid blogger blog, you have to buy a custom domain.
I use a custom top level domain for my blogger blog http://www.001easytricks.com and you could see it is valid by w3c.

Kennybobs said...

Not one part of this page renders correctly.