Posts Tagged ‘SEO’

Web Page Structure for Great SEO

Thursday, August 20th, 2009

I have recently been putting together some websites and have been using the Sitepoint book “Designing without tables” as a guide to some of the CSS techniques. What I noticed was that the author was structuring pages as follows for a 2 column layout: -

  • Header with navigation
  • Sidebar (floated to the side)
  • Main content (positioned using margins)
  • Footer

The trouble with this layout is that if you read the HTML from top to bottom, as a search engine or screen reader would, the sidebar content is higher up the page and is therefore given a higher priority than the main content. What this can mean is that Google misinterprets the information on your page, and in some cases what your site is about, which is obviously a big problem.

A simple solution is to use the same techniques to float the main content and the sidebar so that the main content can come first (have a look at the webxopt home page to see how this is done, and you can get the css from http://www.webxopt.com/styles.css).

This is all easy stuff, but on a 3 column layout you have the problem that you need to float something to the right, something to the left and have something in the middle too. That makes things difficult, but using the old trusty nested tables technique, you can do it as follows: -

  • Header with navigation
  • Div to contain main content and left hand sidebar. This is floated left. Inside this div there are two more divs, the first contains the content which is floated right, the second the sidebar which is floated left. The end result is a left hand side bar, and central content area.
  • Div to contain the right hand sidebar, this is floated right
  • Footer

The end result of this layout is a 3 column view with your most important information (your main content) at the top of the HTML document. An example of the code is shown here: -

<div id=”header”>
<p>Strap Line<br /> for the site</p>
</div><!– header –>
<div id=”wrapper”>
<div id=”navbar”>
</div><!– navbar –>
<div id=”content”>
<div id=”main”>
<div id=”copy”>
<h1>Main Heading</h1>
</div><!– copy –>
<div id=”image-bar”>
</div><!– image-bar –>
</div><!– main –>
<div id=”sidebar”>
<div id=”sidebar-content”>
<h4>News</h4>
<p>Here is some news</p>
<a href=”#”>Link</a>
</div><!– sidebar-content –>
</div><!– sidebar –>
</div><!– content –>
<div id=”footer”>
</div><!– footer –>

and the CSS is: -

#header {
margin: 10px auto;
position: relative;
height: 80px;
}

#header p {
width: 920px;
margin: 0px auto;
padding: 10px 18px 0 0;
position: relative;
color:#f8992b;
font: 16px Arial, Helvetica, sans-serif;
text-align:right;
}

#wrapper {
width: 920px;
margin: 10px auto;
position: relative;
background-color:#FFF;
border:#000 1px solid;
min-height: 450px;
}

#navbar {
width: 100%;
height: 22px;
margin: 0;
}

#content {
margin-top: 0;
}

#main {
margin: 20px 0 0 20px;
width: 645px;
padding: 0;
min-height: 300px;
float: left;
}

#copy {
margin: 0 0 0 20px;
width: 455px;
padding: 0;
min-height: 300px;
float: right;
}

#sidebar {
width: 220px;
float: right;
margin: 0 15px 0 0;
min-height: 300px;
}

#sidebar-content {
width: 220px;
float: right;
margin: 0;
padding: 20px 10px 0 10px;
min-height: 200px;
}

#image-bar {
margin: 0;
width: 170px;
padding: 0;
min-height: 386px;
float:left;
}

#footer {
clear:both;
width: 100%;
height: 22px;
}

The drawback to using this approach is that to reposition the different divs in the document is slightly more difficult, however for most simply respositioning such as print and mobile style sheets, this shouldn’t really be too much of a problem.

In my view the SEO advantages far out-weigh the downsides.

Tags: , , ,
Posted in SEO | No Comments »

SEO and SEM – What Are The Differences

Wednesday, July 15th, 2009

This post is follow up to some discussion on merketinggeek.tv and relates to whether SEO/SEM is useful for small business. I have edited it a bit to make it suitable as a standalone post, but essentially this is just a long winded comment I wrote!

Firstly I should mention the definitions that are being used. The industry seems to be using the following (which I actually don’t agree with but hey that’s what they are using): -

SEO (Search Engine Optimisation) – Optimisation of a website for organic search results. This could involve changing code, rewriting content, inbound links, article writing etc etc.

SEM (Search Engine Marketing) – This is pretty much defined as Adwords or similar paid advertising, and to be honest is why I said I actually don’t agree with these definitions as marketing isn’t just advertising). If you look at wikipedia for example they define it quite tightly as ad related  (http://en.wikipedia.org/wiki/Search_engine_marketing).

These can essentially be used differently. Personally I believe that every commercial site should have SEO and usability work done on them. This can be done by the site creator or an external company. The reason I say this is that it will help you be found over time, but importantly it will help users find what they are looking for. As an example You may have a page about orange widgets. If you were to optimise this page for Google you would make sure that the title h1 tags included ‘orange widgets’ preferably at the front of the title.

The reason that Google likes this is that it is how readers read too. The title of the page should be what the page is about and by front loading the keywords the title becomes easier to scan and see what it is about. Therefore what is good for Google is good for site visitors too (after all that is what Google is about), and what is good for your users is also good for your business bottom line.

SEM on the other hand will depend on the business. If you need to drive new customers and are not high up in Googles natural (organic) listings. SEM is a good way to get a presence. This may be the case particularly when you are starting up a business. There is also an argument that even if you are no1 in Google for your keyword, advertising may still help to solidify a searchers perception that you are the company to deal with. I haven’t seen any stats on that but it sounds a reasonable argument.

Tags: , , ,
Posted in Marketing, SEM, SEO | 1 Comment »