0

Optimize a web site for SEO

Posted August 16th, 2010 in Web design and tagged , , , by Micke Hasselqvist

http://www.flickr.com/photos/marcp_dmoz/4906637073/

So you have coded up a web site for a client from scratch. You’ve made an impressive looking design, together with standards-complient coding that would make your teacher proud. But now what? How do you drive traffic to your site?

SEO is the keyword, which stands for “Search engine optimization”. Just about every CMS and blog system has this covered and it’s a vital part of every web designers arsenal. Who cares how pretty your site looks if nobody sees it? Which raises the classic question – If a tree falls in a forest and no one is around to hear it, does it make a sound? But let’s not get philosophical here and just get on with it…

Proper coding

This one is perhaps a bit obvious but it’s worth mentioning all the same – Google spiders will have less trouble indexing your site if it’s standards-complient. Don’t rely on Flash or Javascript for the navigation or the content but only as a layer above it. Remember to separate the content, style and behaviour (HTML, CSS and JavaScript/Flash).

You can take additional steps as well. One useful tip is to use the H1 element as the logo for the site (look at the source code for this very site for example). The logo is usually the site’s name and that makes it the top element of all the pages. Here’s the code for putting a background on the H1 and making it clickable (and workable in all browsers of course). I don’t think I have to explain this as it’s pretty self-explanatory.

<h1><a href="http://www.yoursitesname.com">Your Site's Name</a></h1>
h1 {
	background: url(../img/h1.gif);
	width: 196px;
	height: 47px;
	text-indent: -9000px;
	overflow: hidden;
}
h1 a {
	display: block;
	width: 100%;
	height: 100%;
}

And of course, try to think semantics when coding your site. Try to think if it makes more sense to use heading or strong tags, divs or spans. Use ul for menus, no tables for anything other than tabular data, etc. You get the picture. Chances are you are already doing most of this.

Unique content on every page

If there is one thing that Google hates, then it’s duplicate content. Try to use at least 300 unique words on every page and Google will view your page as valuable, informative and important. Don’t copy and paste the same text over and over. Google will immediatly notice this, and penalize your site for it.

Update your title tags

The title tags are what you see in the header of your browser, and it’s also what is clickable in the search results in Google. It shouldn’t be too long, but it should be descriptive and informative and unique to every page of your site (refering back to the duplicate content issue). Try to use the keywords that you use to describe your site, and also try to include your site’s name, no matter where in the site you are. For example, if you visit this site’s section “Contact me”, then the title will look like this:

<title>Studio51 | Contact Me</title>

It makes it clear exactly where in the site’s hierarchy you are currently in.

Descriptive meta tags

The meta description tags aren’t heavily weighted for Google, but once your site shows up in the search results they are the selling point of your site. Once again (and I know I repeat myself but I can’t stress this enough) try to use unique wording for every section of your site. Think keywords and description. It should describe the site in a few words but most importantly describe the section you’re viewing right now. For example, I have a unique description for every one of my blog posts that summarizes what the article is all about.

Google XML Sitemap

One really useful feature for larger sites are site maps. It allows the viewer to view all sites in a hiearachy, which allows them to quickly find the exact place they are looking for.

Google loves this as well! They love this so much that they have a tool for creating sitemaps in the XML format. If you have a XML sitemap in the root of your web site, then the Google spiders will immediatly understand your site’s hierarchy. Of course, the XML aren’t viewable by your visitors, but that’s not what it is for. Use a visual site map instead.

Use anĀ online free XML creator to get started right away! There is also a WordPress plugin that automatically creates it for you and updates it every time you create a new post or page. VERY useful indeed!

Conclusion

All of this should be a part of the development from the start. If you implement these right from the get-go, it’s much easier to handle as the project proceeds. I’m sure you are already doing some of this.

Also really worth mentioning is the WordPress plugin HeadSpace2 that makes it REALLY easy to handle most of this. It’s an amazing tool for SEO purposes and I can’t recommend it enough. In fact, I love it so much I might even dedicate a future blog post only about it!

SEO away!

Leave a Reply