Get a SEO Quote
How to SEO - How to SEO your website

Get your website to the top of the search engines

Breadcrumbs: SEO Home > How to SEO your website > Poor code (last modified: March 28th 2012)
Search Engine Penalising
Search Engine Promotion

How poor code affects your SEO

Summary
In general
  • Search engines penalise websites with poor code
  • If you have unique content then, even though your code may be badly written, you might still rank highly in search engine results
Avoid
  • Inline styles - use a separate CSS file instead
  • Code that has been deprecated
  • Too much code compared to how much text is actually displayed
Do
  • Use the W3C validator to check your HTML
  • Use the W3C validator to check your CSS
  • Check what your website looks like in Internet Explorer, Firefox, Opera, Chrome and Safari

Why do search engines penalise poor code?

Because poor code means your website may not display correctly for some users. Now you may be sitting in front of your screen and thinking "Well my code is a bit shakey but the site looks fine" so where's the problem?

The issue lies in the fact that you are probably using one browser and one screen size while today users are viewing the internet through a much wider variety of means.

There are about 20 main browsers on the market with the most popular being Internet Explorer, Firefox, Chrome, Opera and Safari. Within Internet Explorer there are versions 5, 6, 7, 8 and 9 (beta). Then there are also browsers for mobile phones such as Opera Mini.

Once you've got your browsers sorted then there are screen sizes (resolutions such as 1250 pixels wide x 750 pixels high) of which there are about 250 and growing. It is incredible how many people believe their website is finished on the PC only to have a friend open it on a laptop and reveal mayhem!

So all things being equal the search engines will show a well coded website before a poorly coded one in their search results.

Luckily there are tools out there to help you:

  • W3C HTML validator - this will tell you where the mistakes are in your HTML
  • W3C CSS validator - this will tell you where the mistakes are in your CSS
  • Google Webmaster Tools - in the tab 'Visitors' you can see the browsers and screen sizes (resultions) your users have
  • View Like Us - a useful tool to see your site in some of the most popular screen sizes

Poor code can be mistaken for scamming

One of the most frequent mistakes for website builders is not validating the CSS and mistakes here can be translated by some search engines as scamming even though they are not.

An example might be where you set the page background to white, then make a div that has a dark background image and put white text on it. Well the search engines don't know your image is dark, they only know you now have white text on a page with a white background which means you might be trying to stuff hidden keywords in....

Good code not only helps users see your website at it's best but it also ensures you are ranked better and not accidently penalised for scamming.

Too much code and too little text

Websites are supposed to be about delivering content to users so when a search engine finds a website where more than 80% of the content is code it's going to be suspicious. It's also going to know that the page will be slow to load compared to the information it holds.

The best way to radically reduce the amount of code versus visible text is to make sure you are not using inline css. In other words do not do this:

<span style="font-family: Arial; font-size: 26px; font-weight: bold; color: #ad123e; text-align: left; margin-top: 0px; background-color: transparent;">colourful text</span>

Instead do this:

<span class="colourfultext">colourful text</span>

and put all the styling in a separate css file.

Avoid deprecated html

Deprecated html is code that will be dropped ... one day! But when that day comes your site is not going to display properly and you could be thrown out of a top position on the search engine results.

An exammple might be the <u></u>tags used to underline text. These should now be replaced by defining a CSS class as .underline { text-decoration: underline } and then using <span class="underline">Some text</span>


Valid XHTML 1.0 Strict
Valid CSS!
Contact | Pages by link2light.com