Just Free Templates

Often when designing a website designers overlook some SEO tips and techniques that can improve the final website’s search engine results page rankings. In this blog post we’ll highlight 10 quick and easy SEO tips all designers should be using in their layouts.

1. Title and Meta tags

Let’s start with the very basics: title and meta tags – perhaps the origins of SEO. Adding a good and relevant title together with a well worded meta description and thought out meta tags is the first SEO step. It may well be the case that some of the bigger search engines don’t pay too much attention to them any more however there are still plenty of search engines around that do and traffic is traffic – no matter which search engine it’s from!

Ideally every page should have a unique title, description and tags. Titles should be relevant, contain keywords and be describe the page in question. A bad title would be something like:

<title>Tom's blog</title>

This, however, is much better:

<title>Tom's fashion blog - the latest style news, get with the trend!</title>

The generally regarded maximum length is 65 characters.

Apart from the homepage, it’s generally a good technique put the name of you your site at the end of your title and the page keywords before, for example:

<title>Fashion tips - Tom's fashion blog</title>

<title>The latest celebrity crazes and trends - Tom's fashion blog</title>

2. Avoid frames, keep flash to a minimum

Frames are ugly and awkward things – both for search engine crawlers and users. They are generally hard to navigate with both the back buttons and bookmarking features not working as a user might expect. Furthermore a solution using frames generally requires more code and hence a longer loading time.

Flash was once a complete SEO “no no” however search engine crawlers have improved over the last few years. Both Google and Bing (Microsoft’s new search engine) can crawl and index flash content although it still isn’t perfect. So you can use flash in your site but keep it to a minimum – whole sites in flash (without a HTML alternative) aren’t going to be very SEO friendly at all. Make sure that the core elements of your design – navigation, core features and content, etc. – aren’t in flash either.

3. Alt and Title attributes

“alt” attributes should be added to all images, this is not only a good SEO technique which will help your content appear in image searches, it also improves the accessibility of your site.

The title attribute can be added to almost every element but focus on adding them to links to add an extra layer of information:

See the work recently completed in <a href="#" title="my online portfolio">my portfolio</a>

4. Use clean, valid mark up.

Make your HTML clean and simple – don’t use tables or use lots of unnecessary DIVs. This will improve your load time which is great for visitors and also make it easier for search engines to crawl and find your page’s content.

Validating your mark up is also a helpful SEO technique as it allows you to make sure that crawlers can extract the relevant content of your website.

5. Make use of all header tags

You should make sure to make the best use of all the header tags – that’s all 6 of them! Use them to create a page hierarchy – this makes reading for both humans and bots much easier!

<h1>Page title</h1>
<h2>Section one</h2>
<h3>Sub section one</h3>
<h2>Section two</h2>
<h3>Sub section two</h3>
<h4>Sub sub section one</h4>

6. Avoid generic link text

For link text use descriptive text, avoid generic phrases such as “click here”, “learn more” and so fourth. The link text helps to tell search engines what the page you’re linking to is about, “click here” doesn’t help them much where as “my art gallery” is much more helpful.

7. Replace text in images

You really shouldn’t be using text in images at all – it’s not very usable – however there are a few ways you can make it work. Rather than just using the <img> tag, set the image as the background of the element then wrap the text in a <span> which can then be hidden or moved off of the page.

For example, your previous markup might have consisted of something like this:

<h2><img src="myimage.jpg" width="100" height="30" alt="My image text" /></h2>

This could be replaced with the following HTML and CSS:

<h2><span>my image text</span></h2>

h2 {
    background:#ffffff url(myimage.jpg) no-repeat scroll top left;
    width:100px;
    height:30px;
}
h2 span {
    margin-left:-9999em;
}

This will show the image but move the text outside of the page where it can still be read by screen readers and crawlers. This isn’t a perfect solution so you should generally avoid putting text in images!

8. Improve load times

Try and improve the speed of your site by keeping the size to a minimum – again, not only will this be beneficial to your visitors but also to crawlers who are passing on by.

One way to reduce to the size of your webpage is to use an image optimizer – such as the this one provided by DynamicDrive

9. Help bots crawl your site

Crawlers are pretty good at finding their way around your site – but there is nothing to stop you from helping them out and pointing them in the right direction. Two design methods of achieving this are breadcrumbs and HTML footer sitemaps.

A helpful “Footer sitemap” as displayed on Apple’s iPhone website. Such sitemaps help both users and bots find their way around a website and expose all the pages.

Breadcrumbs as used on Sitepoint’s website.

10. Name pages well

Include keywords in the pages and make them appear static – for example domain.com/index.php?category=837&product=3883 is far from pretty. domain.com/category-name/product-name on the other hand includes both the keywords and looks much nicer to the eye!

Avoid using mostly or all numbers in your page names and don’t use overly long query strings for pages you want indexed. Check out this mod_rewrite starter’s guide to help you turn ugly urls into pretty SEO urls!