Get a SEO Quote
How to SEO in2016
  • On page optimization
  • + User behaviour optimization
  • = Top search engine rankings

How poor coding affects your SEO

Why do search engines hate poor code?

There are a whole host of reasons!

  • It may not display correctly in all the different browsers and devices that are out there.
  • It creates noise so search engines struggle to understand what the content is about.
  • Too much code and too little visible content can create suspicion.
  • It can slow down your page loading time.

Now you may be sitting in front of your screen and thinking "My site looks great!" and to you it might be but does it look great to everyone?

Well here's the thing:

  • PC and laptop browsers - there are at least 20 of these such as Internet Explorer, Firefox, Chrome, Opera and Safari. They don't all render websites the same way.
  • Screen sizes - there are hundreds of these if you include that some people resize their windows when multi-tasking. If your website has traffic you can get some idea by looking in Google Analytics under Audience -> Technology -> Browser & OS and then selecting Screen Resolution from the choices below the graph.
  • Mobile devices - browsers for tablets and smart phones tend to be less comprehensive than those for PCs and laptops so what looks pretty on the desk may fail completely in the hand.
  • Load time - it may load quickly for you but take an age for others sending them reaching for the back button.

Search engines know what browser, screen size and device a person is using when they access the internet so when that person carries out a search one of the considerations a search engine will take into account is:

Will your page display correctly for this user?

It's this process which means you can rank at the top for a search using a laptop but be invisible for the same search, carried out on the same search engine, using a smart phone. You can rank well when searching with Firefox but struggle to be found when using Safari.

To make sure this doesn't happen to you we need to make sure your code is as squeeky clean as it can be and then test your pages to make sure they really look good and load in the blink of an eye.

How to clean up your code

Your website should essentially be made of two core elements - the HTML code and a CSS style sheet. If that's gone over your head see this beginners guide to CSS to make sure you are set up correctly.

Checking your HTML

To check your HTML using the W3C HTML validator.

The W3C Standard is what most browsers are designed to work with so a clean bill of health here means you can be confident your page will display the way you think it should.

You'll want to correct all the errors and warnings under your control. If you see issues which are thrown up by external coding (such as a Facebook 'Like' button) there is little you can do - don't fret, just correct what you can.

Checking your CSS

To check your CSS styling with the W3C CSS validator.

The W3C CSS standard is another set of rules most browsers are built to follow so if your site is alright here, it will be alright in the vast majority of todays most popular browsers.

Again remember not to over stress. Errors thrown by third party code such as Facebook or Twitter or Google can be lived with - search engines are well used to them. However errors thrown by third party code that is rarely used might need to be reconsidered - do you really need 'it'?

Removing excess code

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.

Its not uncommon when I go through a clients website to find loads of stuff there that isn't necessary. Plugins that were added and never used, styling that belonged to an older site design, etc, etc. So make sure all the code that is on the page and all the styling that is in the CSS file actually needs to be there.

As with styling (which should all be in your CSS file) other code such as JavaScript and JQuery should also be held in external files.

Check for duplications

This is a common issue in WYSIWYG (What You See Is What You Get) browsers such as the text editor in WordPress. They can get confused and add code multiple times. Here's a basic example:

<span style="font-weight: bold;">W</span><span style="font-weight: bold;">ord</span>

Users will see Word just fine but it is all unnecessary duplication that weighs down the page with code. In WordPress and similar packages there is usually an option for you to view your content as code so go through it and ensure the WYSIWYG editor has not scrambled up your code.

How to test your site really looks great

Common screen sizes

To try out your site and see how it would look on various desktop and laptop screens use Test Size which will allow you to see your pages in screens larger than the one you have.

Common desktop browsers

Firefox, Chrome, Safari, Opera and Internet Explorer are all free to download. Get them and have a good rummage around your site in all five to see if your site presentation remains consistant. If you're looking good in these browsers which have the lions share of the market then you're 99% likely to be well presented in any other desktop browser.

Common mobile browsers

Not all the fancy bells and whistles you have added to your page and coding will show on mobile browsers. They don't, for example, like large picture sizes as these are slow to download.

To test your pages use Google Chrome. With your website open press Ctrl+Shift+I to open Developer Tools. At the top of the Developer tools you'll see an icon that looks like a smart phone standing infront of a tablet. Click this to start the device mode.

A bar will open at the top of the browser window. Click on the drop down menu marked 'Responsive' to see your site in some of the most popular mobile devices. Note after resizing the screen you may need to refresh.

Here is Google's tutorial with pictures if you are having trouble finding the right places to click.

How to spot user groups who aren't happy

  • For Browsers and Screen Sizes - Using Google Analytics go to Audience -> Technology -> Browser & OS to spot users of different browsers and screen sizes for whom your website is just not working. They'll be the ones with unusually high bounce rates, low Pages/Session and low Average Session Duration.
  • For Devices - Using Google Analytics go to Audience -> Mobile to spot users of different devices that are unhappy with your pages. Again they'll be the ones with unusually high bounce rates, low Pages/Session and low Average Session Duration.

I'm Tim Hill, a Search Engine Optimisation and Online Marketing specialist. I created this site to help others understand that SEO is not a mysterious black art!.

If your a newbie try the Getting Started in SEO page, otherwise feel free to dig around and learn more.

Find me on Google+ or get a quote if you need help.

Need Help? Seo Assistance
this man can affect your rankings