Google SEO Test – Does Google Prefer Valid HTML & CSS?


What does Website Accessibility have to do with SEO?

Valid code is a sign of a web developer who has a passion for web accessibility, usability and good design – with an attention to detail, and a pride in their work. A site built to standards is often easier to access using many devices. The idea is to have clean, properly marked up code. A good content-to-code ratio.

Essentially what is being stated is a fairly logical conclusion: reduce the amount of code on your page and the content (you know, the place where your keywords are) takes a higher priority. Additionally compliance will, by necessity, make your site easy to crawl and, additionally, allow you greater control over which portions of your content are given more weight by the search engines. The thinking behind validating code for seo benefits is that,once you have a compliant site, not only will your site be a better user experience on a much larger number of browsers, but you’ll have a site with far less code, that will rank higher on the search engines because of it.

That sounds nice, but in reality, it’s difficult to prove, especially in competitive verticals.

To be sure, W3C validation is not the “seo magic bullet” to top rankings. There is no magic bullet.  There IS an argument to take every advantage you can –  to not only get to the first page, but to consolidate your position against those who want to take it from you (as you took it from someone else) but for me, making a website validate is not a priority, when it comes to Google rankings, as there are more important factors at play than page level code quality.

If Google can read it – it will rank it. Google was built to understand websites with low quality code, and it’s got a lot better over the years. I have never observed a site that was inaccessible run into major ranking problems that weren’t probably caused by other more important factors.

While there are benefits, Google doesn’t really care if your page is valid html and valid css. This is clear – check any top ten results in Google and you will probably see that most contain invalid HTML or CSS. I love creating accessible websites but they are a bit of a pain to manage when you have multiple authors or developers on a site. It’s easy to let standards slip, on your own site.

If your website is VERY badly designed with a LOT of invalid code even Google and browsers cannot read it, then you have a problem. I’ve not come across many sites in that bad  a condition, recently.

Where possible, if commissioning a new website, demand at least minimum accessibility compliance on a site (there are three levels of priority to meet), and aim for valid html and css. Actually, provision of web accessibility is law in the UK and in some other countries, although you would not know it, and be prepared to put a bit of work in to keep your validation badge.

Valid HTML and CSS are a pillar of best practice website optimisation, not strictly search engine optimisation (SEO). It is one form of optimisation Google will not penalise you for.

Where can you test the accessibility of your website – Cynthia Says – http://www.contentquality.com/ – not for the faint hearted! :)

Addition – I will be following W3C recommendations that actually help seo;

Hypertext links. Use text that makes sense when read out of context. W3C Top Ten Accessibility Tips

Testing If Google Prefers Valid HTML

I ran a (VERY SMALL SCALE!) test to see if I could quickly see if Google preferred Valid HTML and VALID CSS. (PLease note I have since cleaned up my site and removed old pages, including these test pages – but there were up for people to look at themselves at the time – back in 2007!).

It consisted of:

  • 4 Pages on the hobo site
  • New but Duplicate Content of Course
  • All html pages
  • All page names garbled letters to ensure no preference in Google. Will Google read the pages by alphabetical order, date created etc? Who knows – maybe we’ll find out this too.
  • 1 Valid HTML + CSS
  • 1 Valid HTML + Invalid CSS
  • 1 Invalid HTML + Valid CSS
  • 1 Invalid HTML + Invalid CSS
  • Anchor Text same text so as not to influence Google (of course this isn’t good for accessibility having links to different pages using the same text phrase)
  • As far as we know we’ve tried to duplicate the pages including page titles and meta-descriptions etc. What this test should also test is will Google, today at any least, collect at least one page from this duplicate content or will it ignore them all.
  • We assume every thing is equal apart from validation – that includes duplicate keyword descriptions, keywords and title elements etc.
  • In this first test we’ll put it in a folder. This may make everything go supplemental but we can wait and seo ;)

I was actually surprised at the results. From these 4 pages Google ranked the page with valid css and valid html top. Google spidered the pages, examined them, applied duplicate content filters as expected, and selected one to rank. It just happens that Google seems to prefer the page with valid code as laid down by the W3C (World Wide Web Consortium).

Was this evidence Google preferred Valid code at a very granular level?

Well at the time, I thought so, but I had a lot to learn about testing seo, and in the end, I could not determine if Google just picked the most recent edited documents. It WAS the last edited document that came top, as well as it being valid.

I didn’t run the test again.

What is CSS?

CSS, or Cascading Style Sheets, is a ‘language’ that website designers use to develop the style, look and feel of layout, text and colours on a website page.

Used properly, CSS can be used to separate design from content, making websites easier to use and ultimately, maintain. It can also help with download times as the CSS is downloaded only once and held in browser cache.

A good (the best?) website development technique is to build your pages using HTML and link this page to what is called an external css file that controls all elements of style on the site. You then link the stylesheets in your like so:

 

  • CSS means (is an acronym for) ‘Cascading Style Sheets’
  • CSS Styles help define how to display HTML elements in a browser
  • CSS Styles are normally stored in ‘External’ CSS Style Sheets on a site
  • CSS Styles were added to HTML 4.0 by the W3c
  • External Style Sheets can save website designers a lot of time and effort when updating sites – we at Hobo use them
  • Multiple CSS style definitions are designed to ‘cascade’ into one

What Is CSS For?

HTML tags / elements were originally designed to define the content of a document. They were supposed to say “This is a header”, or “This is a less important header “, or “This is a paragraph “, and by using tags.

The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Netscape and Internet Explorer continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification. It soon became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) – the non profit, standard setting consortium, responsible for standardizing HTML – created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets, although some, handle them slightly differently, which an be a pain to the website designer!

Cost Effective Website Design With CSS

CSS defines how HTML elements are to be displayed. CSS Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS allows website developers to control the style and layout of multiple web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many website pages as you want. To make a site-wide change, simply change the style, and all elements in the website are updated automatically.

Multiple Styles Will Cascade Into One Style

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order of CSS

CSS styles will “cascade” into a style by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

For a more complete guide to CSS – visit W3C Schools.

UK Government recommendations:

‘Use HTML to structure the document, not style it. Use Cascading Style Sheets to format and style basic elements of a website’

Guidelines for UK Government websites
Illustrated handbook for Web management teams



Loading Facebook Comments ...

17 Responses

  1. Shaun Anderson (Hobo says:

    Cerbera at Accessify pointed out – “These tests inevitably mean the pages are not identical. As such, whether it’s the conformance of the markup or the effect of content being offset by a few bytes creating microscopic differences in ranking is impossible to say. They also send slightly different Last-Modified and Expires headers: 1. Last-Modified: 08 May 2007 00:48:54. Expires: 13 May 2007 11:18:17. 2. Last-Modified: 08 May 2007 00:48:56. Expires: 13 May 2007 11:18:25. 3. Last-Modified: 08 May 2007 00:48:57. Expires: 13 May 2007 11:18:03. 4. Last-Modified: 08 May 2007 00:48:59. Expires: 13 May 2007 11:18:31. Even though the modification dates are sequential, the Expires header for page “c” is earlier than all the others. It may be that Google picked what seemed like the most current one.” This is a very good point, Ben and I factor this sort of thing into ALL my tests these days!

  2. Jim Hobson says:

    Thank you for doing this test! I am in the minority that defends the importance of Validation. In our opinion Validation is the cherry on the top of the SEO cake. Our website has validated pages and they DO rank very well for our keywords/phrases. Likewise our client’s that made the extra investment for our time to validate their sites have also seen very good ranking results (along with our SEO). In our opinion the timimg issue mentioned above is irrelavent because all pages were indexed with the same process, coding and content drive relevance and the outcome speaks for itself. Validation takes time and skill. For a web designer this is where character shows . . . are you willing to do the right thing even when no one may notice? But then again . . . maybe it is good for us that our competition doesn’t get it.

  3. Nemesis Web Design says:

    Nice test. Why don’t do the same test with Yahoo? I think that yahoo take more care for valid xhtml than google.

  4. Forrest says:

    The answer for Yahoo really doesn’t matter that much; they’ve lost too much market share for it to be important. I think this test is a great idea, but with duplicate content, it might just come down to which page Google discovered first.

  5. Heather Paquinas says:

    Content is nothing without seo. SEO is nothing without content. Hittail, hittail, hittail! Its possible all this means is that google has lots of little tests which give certain pages indexing priority; maybe validated code is one of those tests? And on some level it makes sense for code that passes the strictness of an sgml/html validator would/should/could be crawled first, since those pages probably take a less memory and cpu time to crawl, assuming it’s not the duplicate content myth at work here. Extremely interesting test in any case. The only scary thing about validation after the fact is that it’s horrible to do by hand; hopefully someone will write a good html to xhtml convertor for all that messed up frontpage and dreamweaver code. Hopefully frontpage 2007/expression designer is much better as it’s purported to be. NVU and html/xhtml tidy is the bloggers best friend.

  6. Robert says:

    A webmaster commented that their is no way I could outrank my competitors because my website is full of html errors. I have my site checked in W3C, It really has more than a hundred html errors. I only know basic html,so what I did is trial and error technique. It took me 8 hour before my site passed the validation. It feels great to have that W3C logo in my site.

  7. Shaun Anderson says:

    “A webmaster commented that their is no way I could outrank my competitors because my website is full of html errors.” – Robert this is incorrect advice. You can rank well with invalid html – as long as it is not so screwed up Google cannot read it. Valid HTML is just, well, cleaner – and good practice. Some of the pages on this site do not validate because we’ve been tinkering about in the background but they still do well in Google. This seo test was just to see if Google would like the validated page “all else being equal” – in reality, nothing is ever equal ie number and quality of links, KD….

  8. Brian Turner says:

    Hm…certainly an interesting result. On the one hand, I think the test would need redoing, of course, to attempt to eliminate some of the variables suggested above. Even still, it’s nice to see an actual live test to explore the issue of W3C standards in SEO.

  9. Shaun Anderson says:

    Cheers Brian (haven’t we met on the UKBiz Forums? Thanks for dropping by). :)

  10. Brian Turner says:

    Yep, that we have. :)

  11. Mike says:

    Whenever I’ve performed SEO work with clients I’ve always told them that validation isn’t as important as content. Still, with the quality of Web Design today validation should not be a problem for anyone and your Google rank would obviously benefit from a clean page structure. I think that’s where validation helps the most. A valid web page just makes sense.

  12. Tom says:

    The Web sites must be always validated against W3C standards regardless of the SEO effect, because such sort of programming style indicates about professionalism of the Web design company and capabilities of the team in particular. The output generated will look better in all browsers anyway and this will benefit the end users as well.

  13. valid8or says:

    This was a very interesting test. Although as others have pointed out, it doesn’t conclusively prove that valid HTML was the causal factor in Google indexing that particular page. Google itself uses invalid HTML, which might be some indication of how important they consider valid code to be. Though I’m hoping this will change.

  14. Dan Taylor says:

    We are currently doing a similar thing but on a bigger scale taking into consideration other variables.

  15. Hans says:

    Nothing new to me – I invest great effort in valid HTML / CSS across all self created pages those who belief that errors don’t matter just based on the fact that they sometimes have a top serps .. the type of error matters, different errors have different impact on the parsing software sometimes your competition has even more errors or WORST errors than you, never count on competitors errors – always compare to the very best possible

  16. Wesley Atkins says:

    I agree that it is better to build a site that is W3C compliant. But in terms of SEO benefits from doing this – you will get nil. I’ve been doing SEO for 9 years and I have not seen any evidence of this. Run a validation on Google.com and mattcutts.com/blog See how many errors they have? Interesting huh?

  17. Nicole says:

    Thanks for this experiment. I am new in the field of SEO, so I don’t know much about importance of Valid Html & Css. I prefer to have vaild Html and Css. I have seen lots of our clients sites appear in the first page of google search which don’t have validated by W3C. This thing is confusing me a lot. But I think I should believe in you and your experiments.



Learn how you can get more sales from your website

Subscribe for free and let us share with you:

  • how to submit your site to Google, Yahoo & Bing
  • how to optimise your site to get more traffic from Google
  • how to target the most valuable keywords for your business
  • how to make your site rank better in free Google listings
  • how to rank high & avoid Google penalties in 2014

Trust Hobo with your SEO plan

SEO Audit