Creating The Perfect SEO Optimized Website
Posted on | 4 commentsOn one of the forums I visited recently someone asked what was the perfect website design for SEO. It got me thinking because although I have a good idea what makes a perfect (or at least a best guess perfect because who really knows how the search engines work) design, I’ve never sat down and created one.
What’s more, I don’t have any evidence to suggest that a search engine optimized layout will do any better in the search engines than a normal HTML layout. Using an SEO layout could be wishful thinking for all I know.
With that said, here are the ingredients that in theory make up the perfect SEO website layout.
- The code has to be as clean as possible. This means using tableless CSS to define the layout rather than tables because it makes the website much ‘lighter’ and the content becomes the dominant factor rather than the table dividers, rows, font attributes etc.
- The should be as little text and or code from where the body starts to where the content starts. Again, this is the case for using tableless CSS as you can virtually have the content be the first thing the spider reads as it crawls your site while still maintaining an attractive design
- Your H1 and H2 tags should be as close to the beginning of the code as possible. This is to make sure the spider reads it first as the H1 tag is often given a lot of prominance in the search engine rankings. It’s like a big neon sign that says “this page is about ABC”
- Make your content appear before the menu in your code. This makes sure the spider doesn’t get distracted by all the other keywords in your menu and indexes all your content before it moves on to another page
- Use the title attribute in your h1, h2, a and img tags. The title attribute enables you to add a few more relevant keywords about the page and increase the keyword density of the page
- What ever method you use to code the website (HTML/XHTML) make sure it is valid code. It is often said that Google will rank a valid code website above a non-valid one, however, I don’t have any evidence to support this. But hey, it can’t hurt, right?
Using the pointers above, i sat down and attempted to create my first XHTML/tableless CSS valid website that was extremely optimized for the search engines. Here’s what I came up with…
Creating The Graphics
The first thing I did was fire up photoshop and create a background and foreground. The background was a solid light grey and I created the foreground using the rectangular shape tool and setting the width to 770px (which is about the size of a standard website).
I added a few blending options to the rectangular shape to give it a glow and a solid border. I also did a slight inner glow to really define the shape. If you look at the image below, you will see it looks nothing like a website right now!
I then added a small blue bar which was going to act as the divider between the header and content. The blue bar was made just using the rectangular shape again with a gradient over the top with the opacity set very low. To make the bar stand out I added a light drop shadow to it. The result was this:
Still doesn’t look much like a website, right? For one thing it’s way to short 
Slicing The Graphic
The method of creating a website nowadays is to create the graphics in photoshop, do a process called slicing and start working with the graphics in a HTML editor like Frontpage or Dreamweaver.
When you are slicing a graphic to become a website you need to start thinking of it as a jigsaw and working out how all the bits will fit together.
This is a very simple website so I just need to create four graphics from this image:
- Top bar
- Header with the blue bar
- Main background
- Bottom bar
The image below shows how I have sliced the website. There are four blue boxes and each one will create a separate image.
Since the background attribute can be repeated in what ever direction I want, I can get away with creating a background image that is just 1px high and then repeat it vertically. This is why I didn’t need to create a large website layout in photoshop because I knew that I only needed to take 1 pixel from it for the background. Clever, huh?!
Writing The Code
When I began this project, I had basic CSS skills, things like defining text attributes. But to create the design I wanted, I needed to learn how to do layouts with CSS. To do this I used these resources to learn CSS layouts:
What I found helpful was to imagine that you are substituting tables, dividers and rows for div tags. The content within a div tag can then be placed left or right by using the float attribute.
float: left
The code above would align the content to the left.
The construction of the website consists of 4 parts:
- The Main Wrapper – This defines the alignment and width of the website
- The Header – This defines the top image and the title of the website
- The Content Wrapper – This defines where the content goes
- The Footer – This defines the bottom image and any text to go in the footer
The whole website is enclosed in a wrapper (think of it as wrapping paper around a Christmas present, it encloses everything). The wrapper defines the alignment and the width of the website.
#wrap {
position: relative;
width: 800px;
background: #FFF url('images/bg.gif') repeat-y center top;
margin: 0 auto;
text-align: left
}
The next part of the code needs to define the top image, the header and the title of the website. This has to use an absolute postion because we want the top image to appear on top of the background image.
#top-bg {
position: absolute;
width: 800px;
height: 30px;
background: #F8F8F8 url('images/top.gif') repeat-y center top;
top: 0; left: 0;
z-index: 2
}#header {
width: 800px;
position: relative;
height: 95px;
padding-top: 10px;
background: #CCC url('images/header.gif') no-repeat center top;
padding: 0;
color: #FFF
}#header h1 {
position: absolute;
margin: 0; padding: 0;
font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -1px;
color: #AEAAAA;
text-transform: none;
text-decoration: none;/* change the values of top and left to adjust the position of the logo*/
top: 25px; left: 30px;
}
#header h1#logo-text span {
color: #838181;
}
Although it looks like quite a lot of code above, all it’s doing is placing the top image, the header image (with the blue bar) and defining how the h1 title tag should display.
The next task is to define how the content will look. Since I want to make this a two column layout with the text on the left and the menu on the right I will need to use three sets of div tags. In the code example below I have taken out all the content and just left the div tags so you can see how the structure looks.
To my mind it is very similar to using tables. The top “content-wrap” div looks like the table tag to me and the “main” and “sidebar” divs act like the td and tr tags. (I replaced the < and > with [ and ] so that it displays correctly below)
[div id="content-wrap"][div id="main"]
[/div]
[div id="sidebar"]
[/div]
[/div]
Once the code is in there you can define the layout in CSS. I mentioned before about the “float: left/right” attribute. In this case we will just float the “main” div to the left and the “sidebar” div to the right. Very easy huh? This creates our two column layout without using tables.
The code below shows how the CSS defines each of the divs. Notice the float left/right for the main and sidebar div id’s.
#content-wrap {
position: relative;
clear: both;
float: left;
width: 770px;
padding-left: 15px;
display: inline;
}#main {
float: left;
width: 68%;
padding: 0 0 0 0;
margin: 10px 0 0 20px;
display: inline;
}#sidebar {
float: right;
width: 27%;
padding: 0 0 0 0;
margin: 10px 0 0 0;
}
The final piece of the jigsaw is to insert the footer image and make sure it’s perfectly aligned. To achieve this I needed two div tags, one to define the position and location of the image and the other to define the text. This ended up looking like this:
#footer-wrap {
clear: both;
width: 800px;
font-size: 95%;
background: url('images/footer.gif') no-repeat center bottom;
}#footer-bottom {
clear: both;
color: #666;
height: 25px;
margin: 0 auto;
width: 800px;
padding: 10px 0;
text-align: center;
}
And Viola!
I added in a few extra bits such as a cool rollover menu on the left and the list in the main content column. But the code I have used above should help you create your very own 2 column tableless css design with a header and footer image.
View the final design here: SEO Optimized Template
You can download the files here:
You are free to download and use the templates, but please don’t sell them or claim them as your own. I don’t require any link backs (although I should!) but if you mention this page on your blog or website or reference it in a forum post that would be cool.
Your feedback and suggestions are always appreciated. Do you want to see any more templates of this nature?
Let me know, use the comments form below!
Related posts:
- The Quest For A Perfect Haircut
- A New Website
- HYIP101 Website
- A New Website, A New Address
- Website Relaunch – Coupon Codes Too!
Hey there!
I tried your template (with some of my modifications), and ran it through HyperVRE (which you probably know about).
One of the things I like about HVRE is the popup adds built from the links. But the interaction with the UARX javascript to make that happen is kinda strange. The popups are actually appearing behind the main bg image.
Any thoughts?
Hi Matt, without seeing your site I can’t be entirely certain of the problem. I have taken a screen shot of another CSS menu where the links appear behind the javascript advert. You can see the example here:
http://www.peterclaridge.com/image/menu-behind-banner.jpg
Have you tried it in different browsers? For example, the problem in my screenshot is in Opera, but if I use Firefox then it’s ok.
Peter
Sory, just had a look at your site (silly me, didn’t click the link). This is what happens in Opera:
http://www.peterclaridge.com/images/matts-site.jpg
As you can see, in Opera the ads are displaying OK. This is the trouble with CSS. Different browsers render the pages differently. It’s a nightmare!
Hi Peter,
Thank you for some great looking html templates, I appreciate it!