Clean Up Your HTML Code to Improve SEO and User Experience

With the average screen resolution growing as well as the speed of most web surfer's internet connections, people have been putting more and more stuff on their web pages.

Sometimes these add-ons are useless widgets that just take up space and bandwidth, in addition to distracting or annoying your site visitor. In other cases though, these extra elements are important to the site and help to promote featured content as well as displaying ads which help keep the site running.

With all the extra HTML on the pages these days, the main content sometimes gets buried deep into the HTML. With some people using WYSIWYG HTML editors, they don't even realize it.

This can sometimes affect how search engines view your pages, and most importantly, how users see your pages. So today I want to go over some important tips to improve SEO and user experience. They involve some general rules that you might already know (added here for completeness) and some examples, including how to layout multi column (2 column, 3 column etc) web pages to increase usability and make them more search engine friendly.

You're going to need to know at least a little HTML and CSS to do this. Even if you're using a graphical HTML editor, you can usually modify the HTML directly.

Put Your Main Content First

You want the main content of your page to show up as early as possible in your HTML code. If you noticed on this page, the Header showed up first, then the blog post, then the sidebars. If you weren't paying attention, you can clear your browser cache and reload the page.

This way, a visitor can start reading what they came for right away. It's best not to make your visitors wait. Some people try and do the opposite, so visitors can view ads while they wait for the content to load. While this may increase click through rate on some sites, in the long run, it's a bad idea. It diminishes the quality of your site and the quality of inbound links you might receive.

I accomplish this by having the blog posts appear before the sidebars in the HTML code. The header comes first but there is no easy way to change that without using JavaScript, which I try and keep to a minimum due to inconsistencies between browsers.

Below I'll give some common examples to get you started. I've included the styles in the HTML tags and gave each section a different background to make it easier to see. I also use a div tag to clear the space after the floats. There are other ways to do this, but this works in all cases and is the easiest to show here.

Optimized 2 Column Layout

Many people just float one element and it's usually the side element, not the main content. The element you float has to come first, so that puts your content further down the page. You can either make sure you float your content, then put your side column but I find it better to float both like this:


   1:<div class="wrapper" style="width: 600px;">
   2:        <div class="mainContent" style="float:left; width: 400px;">
   3:                Main Content Area
   4:        </div>
   5:        <div class="sidebar" style="float:right; width: 200px;">
   6:                Sidebar Area
   7:          </div>
   8:        <div style="clear:all"></div>
   9:</div>

To have your main content display on the right, simply switch the float:left and float:right attributes in each style.

Optimized 3 Column Layout

The 2 column layout is pretty simple. Where I've seen the most problems is with 3 column layouts. There are two common ways I've seen people implement a three column layout.

Float both sidebars left and right and then have the main content area display with a specified width. This is the worst as the HTML code for both sidebars needs to be displayed before the main content. The main content also renders after the sidebars and if you have a lot of junk in the sidebars, it can make your site appear slow.

Float sidebar, content, sidebar in that order. This is a little better, but you still have the HTML of one sidebar showing up before your content which can cause problems.

The best way I found to get your main content to load first, is to break down the layout into groups of two columns. It doesn't matter how many columns you have, using this simple method you can put your main content almost anywhere in the HTML you like. Which should be the top.


   1:<div class="wrapper" style="width: 600px;">
   2:        <div class="leftWrapper" style="float:left; width: 450px;">
   3:                <div class="mainContent" 
   4:                   style="float:right; width: 350px;">
   5:                        Main Content Area
   6:                </div>
   7:                <div class="leftSidebar" style="float:left; width: 100px;">
   8:                        Left Sidebar
   9:                </div>
  10:                <div style="clear:both"></div>
  11:        </div>
  12:        <div class="rightSidebar" style="float:right; width: 150px;">
  13:                Right Sidebar Area
  14:          </div>
  15:        <div style="clear:both"></div>
  16:</div>

This should help get you started making sure you design your sites for both visitors and search engines properly.

Below you'll find some more tips.

Don't use table layouts

I'm still surprised I see sites that are laid out using tables. Tables were never meant for structuring the layout, but for displaying tabular data. Because there were no other methods to exactly position elements, tables became the norm. But the problem with tables is that the browser needs to read in the whole page to start displaying content in most cases. If you have something on your page that is loading slowly, your visitors could be staring at a blank screen for a long time. They may even get so frustrated, they click the back button before they even see your site.

Use Cascading Style Sheets

Use of Cascading Style Sheets doesn't have the same problem as tables. Your page can start drawing itself incrementally. Some parts of the site can display while other parts are still being downloaded. CSS isn't a silver bullet though, you still need to layout your site wisely, especially if you're using any external resources such as widgets or ads from other sites. More details will be broken up individually below.

It's best to put your styles in an external stylesheet (.css) file. There are three main benefits for doing this.

Browsers cache css files, so after your visitor downloads it once, they don't have to spend time downloading it again if they visit another page.
If you want to make a change to your styles, you only have to edit one file.
Search engines are more interested in the content than things like how much padding you have around a block of text, so they don't bother with styles. You want to minimize the HTML tags they are not interested in on the page by putting style information in another file.

Use multiple css files

Sometimes you'll have sections of your site that require different styles. If you notice that your site visitors don't always visit different sections of your site, you should split up your styles into different css files. That way, they only have to download the styles they need, and not waste time and bandwidth on styles they don't. If your css file is fairly short, you can skip this.

The way I normally do this is to create a main css file that all or most pages will use, then set up different css files for different sections. Then put a tag for two or more css files on every page.

If a visitor goes to more then one section, they'll need to download another css file, but most visitors seem to only visit one section, and in many cases only one page.

Always set Alt, Width and Height for Images

To display an image properly, the browser needs to know it's width and height. It can download it and check the file, or you can specify it in the HTML. You should always specify the size in the HTML. This way, the browser can layout the image, then display it after it has downloaded.

Search engines don't know what an image is about, but you can tell them by using the ALT tag on images. This is an attribute in the IMAGE tag that is displayed if users have images turned off, or if they are using a screen reader. Simply put a short description of the image there.

Your image tags should look something like: <img src="/images/someimage.jpg" width="250px" height="300px" alt="picture of something" />

JavaScript optimizations

JavaScript should be external or at the bottom

If you're using JavaScript on your webpages, it should be in an external page if multiple pages on your site use the same JavaScript or at the bottom of your page if it is specific to each page. This way, search engine crawlers get to your content faster and slow loading scripts get run after your content has already displayed.

Place external JavaScript references in iFrames

Sometimes you'll need to have your JavaScript embedded within your content. This is true for external JavaScript widgets and advertising. I've seen cases where the external server responds slowly and it can cause large portions of the page to hang.

The way to get around this is to put the JavaScript in an external file and then embed it in your page using an iFrame like this:


   1:<iframe width="200px" height="300px" 
   2:        src="filewithjavascript.html" 
   3:        frameborder="0" scrolling="no"/>

This way, the browser knows to create a space for the element and it won't slow down processing of the rest of the page in the event that the script loads slowly.

You can't do this in all cases, especially scripts that need other information on the page, such as contextual advertising programs like AdSense. But for most external widgets and affiliate ads, this works great. It even gives you the benefit of caching as well as being able to modify one page to make changes throughout your site.