Professional and Affordable Web Design

0800 080 5401

Introduction to Search Engine Optimisation

This guide was originally intended for our clients who have not opted for a search engine optimisation (SEO) campaign. However, as a more or less complete overview of SEO, some of the information provided will not make sense to people who are not familiar with either HTML or server-side scripting. I ask readers to keep reading if they come across something they don't understand. It is the parts that deal with programming that might scare you off. Some SEO's try to make out that SEO is extremely difficult and requires quasi-profound methods of mythical proportions. Getting results from SEO can be difficult and take a long time, but the methods are actually quite simple...

The guide is broken up into four sections:

Section 1 - Optimising Your Web Site

Section 2 - Knowing the Search Engines

Section 3 - Getting Your Site Known

Section 4 - Squeezing Search

Section 1 - Optimising Your Web Site

First of all, you will need to know what search engines are looking for when they visit your site. Most web geeks have absolutely no idea how to structure a web page for optimal performance in the search engines. So, if you have a site already, it is likely that your site is not geared for search engine optimisation at all.

Choosing a Domain

Choosing a domain is an important part of any search engine campaign. Although it is likely that by the time you have decided you need search engine optimisation, you already have a domain and fully functional website. The domain/company name is important because people will probably be linking to your site with your domain / company name as the link text. The reasoning behind this will be discussed at a later point in this document. If possible, buy a domain with at least one of your keywords in it. Don't go nuts though. If your domain is too long people won't remember it, e.g.

Domain Age

The three biggest factors for ranking on Google (at the time of writing this article) are page content, incoming links and domain age. The age of your domain is calculated from the date it was first registered. You can check the age of your domain by conducting a WHOIS. Google implemented this ranking factor in the belief that the longer a domain has been registered, the more likely it is to be a quality site. As with everything Google has done, this ranking factor has been abused. Some people will buy old domains from specialist sites or from eBay, while others will trawl the net for abandoned websites and buy them up. The advantages of this are obvious. I have heard of people snapping up sites with thousands of links for a few hundred dollars.

If you have a brand new domain and want to rank for competitive keywords, you will probably have to wait for your domain to gain trust from the search engines.

The Head

Every HTML document should have what is known as a head. The head is a HTML element which is used to give definition to your document and include external media and scripting.

The Title

The most important element in the head is known as the title (HTML title element). This is the most important part of your website and it is the test that will appear in big blue letters in the search engine result pages (SERPs). There are two goals to achieve with the title tag:

  • Use keywords related to your web page
  • Use it to entice people into your site from the SERPs

A lot of websites will attempt to rank for multiple keywords using a title stuffed with keywords, e.g. 'Web design agency, web design, web designers, website design, web development, seo, search engine optimisation' This is not good practice, the more keywords you put in your title the less weight the search engines will give them. Also the search engines give most weight to keywords at the beginning of your title. When people are browsing the SERPs, spammy titles like the one above will not entice them into your site. They are more likely to click on something like 'Mutiny Design - Web Design'. It is worth noting that search engines will cut off your title after a certain number of characters. From memory it is 64 on Google and a little more on Yahoo.

Just to give you an idea of how many web pages have a useless title, type in 'intitle:untitled page' into Google. This shows you all the web pages that have 'untitled page' in their title - a default title setting in WYSIWYG HTML editors. Other useless titles include 'Home Page', 'My Site' and my favourite - websites with title tags.

If your title is something totally useless like 'Home Page' or 'Untitled Page' and you don't know how to change it you will need to get your web designer to change it for you. The chances are that if you don't have a worthwhile title tag your site will never get any traffic. In the unlikelihood your site actually comes up for a search, who is going to click on 'untitled page' in the SERPS?

In the case that your web page does not have a title, Google will make one up. Sometimes it will be totally irrelevant. One site I worked on did not have a title and Google had traced the IP of the site and used the title of another site sharing that IP.

Your Title in the SERPs Untitled Pages in the Google SERPs

The above image shows two of the millions of pages indexed by Google that have useless titles. The text in large blue is taken from the HTML title element of your web page. The text below it is the META description, also taken from your page.

The META Tags

Most people have heard of META tags and are under the impression there is some sort of mystical use of them which can result in page one rankings. The truth is META tags are next to useless in present-day search engine optimisation. In the early days of primitive search engines META tags were a big thing. You could rank on page one just by filling them with a load of spam. Today the META keywords tag is pretty much useless. I would advise not to use it at all; Google doesn't pay any attention to it. The only purpose it stands for is to tell your competitors what you are trying to rank for. The only META tag that is worth using is the META description tag. This is displayed beneath your title in the search engine results pages (SERPs). Like the title tag this should not be a spammy list. It should be a short sharp sales pitch for your web site, e.g. 'Bob's Farm grow the finest organic fruit and vegetables in East Somerset.' Avoid using a description like 'fresh fruit, fresh vegetables, ripe tomatoes, succulent potatoes, Somerset'. A description like this will not help you in the SERPs. It really doesn't matter about putting important keywords in the META description, but the chances are you will anyway.

If your site is listed in DMOZ, Google will replace your META description with your description in DMOZ. To force Google to use your META description insert the following tag into the head of your web page: <meta name="robots" content="noodp" />

Other than the description tag there is no point in using any of the other META tags for search engine optimisation.

META Tags Page head

The above image shows how META tags should look on your page.

The Body

The body of your document is what people will actually see when they visit your web page - text and images. If you are not able to edit your web pages yourself and not prepared to pay to have them changed or have them re-created by expert HTML & CSS geeks you may as well skip this section.

There are few goals to achieve in the body of your web pages:

  • Use keyword-rich semantic HTML
  • Use good copy (text) on your web pages
  • Sell them in milliseconds

Keyword-rich Semantic HTML

The majority of sites on the internet are created using what I term 'HTML slop'. For those of your who cannot code HTML, you could compare HTML to primitive computers and semantic HTML to a modern PDA or micro PC. The earliest computers were so big that they had to be stored in a warehouse and took 12 hours to print out a single sheet of A4, whereas today, you can carry around a powerful computer in your pocket. HTML slop is the primitive computer. Its slow, its bulky and you risk breaking it every time you add a new component. Semantic HTML is the PDA. It is slimline, efficient and easy to modify. HTML slop is churned out by programs like Dreamweaver and other WYSIWYG editors where HTML is created by the program. The chances are the person slopping the site together has no idea how to use HTML elements for search engines. Keyword-rich semantic HTML has to be completely hand-coded. It allows the coder to use the right HTML elements in the right situations with the right keywords. Proper use of semantic HTML will hit two birds with one stone. The purpose of it is to strike a balance between telling search engines what your page is about and telling humans what your page is about. You can make your page read like a shopping list to achieve higher rankings, but drive away people. Or you can gear your site to much for humans and lose your search engine targeting.

Semantics is all about giving text definition.

An Example of HTML Slop Vs. Semantic HTML

Anyone who has ever developed a markup parser will tell you that the first example (HTML slop) would be a nightmare to parse. Search engines need to be able to interpret your website. If your HTML is confusing and erroneous, search engines will not properly understand your pages. Additionally sloppy HTML is a nightmare to update. Updating it will cause degradation to your site, which in turn could lose you sales.

The most important HTML elements to use in the body are the header elements (h1, h2, h3, h4, h5, h6). Header elements should be used frequently throughout your site, particularly h1, h2 and h3. The use of the header elements has two purposes. The first of these is to do what the header elements were originally intended for - to provide a focal point for sections on web pages. The header tags are traditionally displayed in text larger than the surrounding text, so they grab your visitor's attention. If visitors get quick confirmation that your web page contains what they are looking for by some big text saying 'This is what you are looking for' they are more likely to stay on your page than if the text is small and squashed together. The second purpose of the header tags is purely for search engine targeting. Of all the tags you can use in a web page's body, the h1 tag carries the most weight with search engines. So naturally you want to get some keywords in there. As with all aspects of search engine optimisation (SEO), you want to make sure what you put in your header tags is not spammy. Rather than using &lt;h1&gt;Web Design, Web Development, Web Designers, Website Design&lt;/h1&gt; you should use something like &lt;h1&gt;Mutiny Design - Web Design & Development&lt;/h1&gt;. The first example may be better for search engines, but when people go to your site and it is brimming with spam filled tags they are going to instantly hit the back button. A good method of using headers to insert keyword rich text is to use h1 as a main header and then use an h2 tag as a secondary header.

Good Use of Headers

It's simple, but using two headers when one will suffice allows you to get a little extra out of your page.

The unordered list element (ul coupled with li)- bullet points in layman's terms - are another good element to throw in the mix. They are a good way of quickly getting across to people what you provide or the benefits of one for your products/services. Many people are lazy and may not necessarily want to read a few paragraphs of sales blurb. Bullet points are a good way of providing an easy option and you can still include paragraph text for a bit of extra weight. They are also given a little more weight by search engines. So remember to stick in a few keywords and in case you have forgotten - don't be spammy.

A lot of text on the internet is just floating about in div, span and td elements. The search engines are not too sure what to make of this - it doesn't mean anything to them. That's why we have the paragraph element (p) which is specifically designed to encapsulate paragraph text. All text on your site that could be considered a paragraph and even some sentences should be wrapped in paragraph tags. To give some of the text in those paragraphs a little extra weight you can wrap them in bold (b or strong) and italics (i) tags. Search engines take a little more interests in the text wrapped in these tags. They even give more weight to the b tag than they do to the strong tag.

The HTML elements listed above are the ones that you really need to know and use to their full potential. There are whole host of other tags that you should use for their specific purpose. Just a few of them are listed below:

  • abbr - used to display abbreviations in conjunction with the title attribute
  • acronym - used to display acronyms in conjunction with the title attribute
  • address - used to display addresses
  • q - used to display quotations

For a full reference visit the w3c's site.

Using Good Copy on Your Site

Most people put absolutely no effort into creating content for their site. On the rare occasion that they actually do, I always have a respect for their effort and determination to make the internet work for them. If there are any web geeks reading this, I am sure they will be familiar with the old 'Write text for my site? I thought you were going to write all the text for my site about my company you know little about and an industry you are totally alien to.' OK, I'm exaggerating a little there. Most often they like to play the providing site content six months after the site has been finished trick. Another tick is to copy your competitor's site word for word including their company name and address. This one goes down well in court.

Like all aspects of search engine optimisation, good copy is just one aspect. Just because your copy is a little rough around the edges doesn't mean you will loose all your sales leads. But it is another way you can get a little extra business. A little witticism that puts a smile on someone's face or a confidence-instilling paragraph may be the difference between a phone call and a click of the back button. With that in mind and the fact that most website copy wouldn't make it into a tabloid's literary column, it is an easy way for you to outdo your competitors.

No one knows your company and your industry better than you and other people in your company. For that reason, it is best if you come up with the copy. If you aren't to sure on your grammar and writing style you could always get a professional copywriter to tidy it up for you. When seeking a copywriter proceed with caution, some of them will get liquored up and crash into the back of your car before they produce the goods.

Also, keep in mind that visitors to your site may not know much if anything about your industry. A lot of web design companies have promotional blurb going on about web standards, PHP and JavaScript. This won't make any sense to most of your potential clients and you will loose sales. Put it in simple English for them and you will see results.

Below is a bit of advice for writing copy for your site:

  • Make a few notes and get a rough structure together before you begin writing.
  • Make a list of keywords that people might be searching for to find your site.
  • Try and put yourself in the position of a potential client. What do they want to hear? What is the best way to grab them and get them to pick up the phone or buy online
  • What is the nature of your business? And how does this influence the tone and style your site copy should follow
  • See what your competitors are doing. If there is something you like copy it
  • In general it is best to be short and sharp. Don't waffle on and repeat yourself.
  • Read through what you have written. If you can cut a word out here and a para-phrase out there - cut them out.

Once you have copy for your site, you will want to display it in a way that will entice people to read it. There is not too much you can do in regards to this. The best way to get people to read you site's text is to come up with a creative idea that makes them want to read the text, like a cliff-hanger. There are not many instances you could actually use this, which leaves you with text formatting. To get people to read text on your site you need to make it look like easy reading. This is achieved with a large font size, a large amount of line height, a high contrast between the font colour and the background colour and the background should be a solid colour.

Making Your Text Readable

This is some example text with a small font size and small line height. If you use text like this people aren't going to fall over themselves to read it.

This is some text with a sizeable font size and a spacious line height. It is easier for people to read, particularly if they have poor eye sight.

Sell Them in Milliseconds

The vast majority of web design companies make absolutely no effort to construct web sites that are sales oriented. They won't take into account any of the goals the site needs to achieve to be successful. This is simply because it has never crossed their mind. They are web designers not internet marketing specialists; the two rarely come together in the same company. You could have a beautiful site that is the top of the pile at CSS Remix, but if your phone number is at the bottom of the terms and conditions page and the add to cart button doesn't work in Internet Explorer (I know it sucks) your site isn't going to be an affective sales tool. I know this sounds simple, but the fact is that a lot of sites are hard to use, poor at selling and unobvious. Generally speaking, if you want your site to work it needs to be simple.

So what do I mean by 'Sell Them in Milliseconds'? I mean if your site doesn't hit their spot in milliseconds you are going to be saying goodbye to those precious greenbacks. The first hurdle to get past is selling your design to your visitors. A recent study by Carleton University in Ottawa revealed that it takes as little as 50 milliseconds for a browser to decide whether they like the visual appearance of a site. How many of those who don't like your site will instantly click the back button? I can tell you as a designer (when I'm in that mode) that as soon as I come across a site that is badly designed and developed I will have a brief look around at how shoddy it is and then click the back button. Web geeks I work with and others I know tell me they do the same. So, if you have a badly designed site you've instantly lost the Web 2.0 market.

A nice design is not enough to carry your site. The design maybe too fancy, obscuring the functionality of your site. A site that is designed for the purposes of selling should be no more than a few nice shapes and gradients on top of which an intuitive user interface can be formed. If you are having a site designed, the best possible thing you could do is to tell your designer what you want your site to achieve. Give them ideas as to what you think will be effective on your site or draw a round outline of what you want. Once they have completed the design pick out its strong points and its weak points and get them to build another based on your feedback. They (the Romans) didn't build Rome in a day!

After your visitors have assessed whether they like your design, your site needs to tell them what it is you do. There are two ways to achieve this and its best to use both if possible: display an icon or photo that tells or at least gives them an idea of what your company does and use the header elements to display some large text telling your visitors what you do. For example if you are a web designer and your site has a jungle theme with no obvious signs as to what you do, how many people do you think will actually stay?

Once you have convinced the visitor you have a nice design and you can provide them with what you are looking for, you need a way of selling to them. The sales avenue you choose will depend on what you are selling. If you are selling paved driveways you will probably want a phone call whereas if you are selling a large catalogue of clothes you will probably want an intuitive shopping cart and checkout. So you job is to make it as obvious, appealing and simple as possible for visitors to follow your chosen sales route. Remember that not all people are web savvy. Do everything you can to make your sales avenue 'idiot-proof'.

Choosing Keywords

Choosing keywords to 'optimise' your site for is always a tentative affair if you have no information on what people are searching for in your industry. A little common sense goes a long way when you are choosing your keywords, e.g. if you a a legal firm in Chipping Sodbury you will probably want to use the keywords 'legal', 'law', 'lawyer' and 'Chipping Sodbury'. There are a number of tools available to help you select keywords. My favourites are:

Try to avoid words that have more than one meaning, e.g. 'card'. These terms may carry a lot of traffic, but are more competitive and less effective than more specific terms. It is also a good idea to avoid broad terms unless you cater for a good chunk of that market. For example, if you have an online store selling gothic jewellery it may not be a good idea to optimise your site for the keyword 'gothic'.

If you are new to SEO and/or don't have much time to spend promoting your site online, your best options is to start small. For example, if you are a web design company in Chester, Cheshire, your best option is to optimise your site for 'web design Cheshire' and 'web design Chester'. Once you have got page one rankings for those keywords, you can try and get on page one for 'web design'.

To begin with, only select a few keywords. If you have a brand new site and you are trying to optimise for twenty keywords it will either take you a long time or it will never happen. Select a hand-full and use the keywords regularly, but naturally throughout your web page(s).

Use different keywords for each page. If you are using the same title and h1 text on all of your pages you are not going to be optimising your site for best performance. Each page should be geared for search engines for what it is specifically about. Avoid putting any marginal or irrelevant content on your pages like weather feeds, news feeds, photos of your goldfish etc.

Structuring Your Website for Search Engines

There are particular ways in which you can structure the links and directory structure on your web site to make it easier for search engines to index. This wont result in a huge amount of extra traffic particularly if you are not engaging in off-site search engine optimisation. There are big benefits to giving your site a search engines friendly structure, particularly as its something your competitors won't be doing.

Give Each Document a Specific Path

This is a very common mistake and could cost you a page one ranking. It is possible to have two different URLs that point to the same webpage, e.g. and The two URLs are treated as totally different documents by search engines, but point to the same web page. This means the two URLs will have two different incoming link profiles. So if you have 1,000 links coming into and another 250 coming into, you have 250 links in the wrong place, which may very well cost you a page one ranking.

Using URL Re-writing

If you don't know what URL re-writing is, you have probably seen it before. It is an extension to your http server that makes URLs look pretty and easier to remember. Rather than your URLs looking like this:

You can use URL re-writing to create a more memorable and search engine friendly URL, such as:

URL re-writing has three main benefits:

  • Makes URLs easier to remember
  • Google doesn't like URLs with query strings and may not even index them
  • The URL is taken into account in search engine rankings. Using a URL re-writing engines you can add keywords to your URL more effectively

When using a URL re-writing engine, you should ensure that you create rules that end in a forward slash and don't end in a backward slash. Redirect your secondary choice to your primary choice.

Using Keyword Rich Links On-site

If you are not already familiar with the importance of linking in SEO, this section might not make sense until you have read the entire document. I will cover linking in detail later in this document. For now, keep in mind that links and link text are important in SEO.

It is often hard to get keywords into your main menu. The best you could do is probably put your company name (if it contains relevant keywords) in the home link, e.g. Mutiny Design Home. Many sites also have navigation at the bottom, which is identical to the navigation at the top. You can harness these footer links by putting in a few keyword rich links to your important pages. Let's assume you are a company that sells discount furniture and your top sellers are chairs, tables and work surfaces. You could place links at the bottom of your site with the keyword text, 'discount tables' and 'discount work surfaces'; or you could use another keyword based on your knowledge of what people are searching for. Another way of harnessing internal links is when you are linking to pages within your site in paragraph text. For example you may have a paragraph of text about your discount chairs, which finishes 'To view a full range of our discount tables click here'. To human's reading the text it is obvious what page they will go to when they click the 'click here' link, but the search engines doesn't have any way of knowing. A much better solution would be 'Please feel free to view our wide selection of discount chairs'.

One of the best methods of using keyword rich links in your site while at the same time increasing usability is to use what are know as breadcrumbs. If you have used online stores, you probably will have seen these before. They usually appear at the top of the page when you are browsing through a store's products, displaying the category and subcategories you are in as keyword rich hyper links. A similar method can be used on your product pages by inserting keyword rich links to the previous and next product in your range.

Keep It Clean

Keeping the HTML code of your site as clean as possible is always a good idea. This is another reason why you should not use Dreamweaver or other WYSIWYG editors. If you said to any web programmer 'Make me a program to parse every HTML document on the internet and run them through various algorithms.', they would know they had a task at hand. Search engines do not have an easy job when you consider the magnitude of what they do.

The vast majority of HTML on the internet is erroneous, which can confuse search engines bots. If you are creating a web site or having one created for you, do your best to find a good web standards developer who knows about semantics, scalability and accessibility. It is much better to have a good design company in another country than a local company that are making sites like it was 1996. It is good practice to use external CSS and JavaScript rather than inline. Inline CSS and JS increases the chances that a search engines bot may have problems indexing your site.

Hiding Text

One of the old 'SEO tricks' which doesn't really work anymore is to hide text on your website or to put huge reams of comma separated keywords at the bottom of your page. This was one of the 'hot techniques' a lot of 'SEO gurus' were pushing several years back. You're unlikely to get penalised for hiding text on your site unless you have a large web presence, but it is a good practice to avoid it. However, there are instances in which you can hide text which could be considered legitimate. These are limited to hiding text under background images that contain text. Google (Matt Cutts) has confirmed that they do not penalise web sites that hide text under background images for accessibility purposes. You should probably use this in moderation though and only use it when you use the exact same text that is on the image. It is also a good idea to add a HTML comment to say why you are hiding the text.

More Vs. Less

How you spread your content out on your site should be dictated by what your targeted markets are, how competitive they are and what you think your visitors will find easiest to navigate. If you are constructing a website that only needs to rank for uncompetitive terms, such as 'My Service in My Town', you are best off creating an individual page for each topic your site covers. The reasoning behind this is due to the lack of competition it will be easy to get each page to rank well for its topic. However, if you are trying to push your site into multiple competitive areas, I find it is better to put copy for all of those areas on one page (preferably your homepage).

A good way of forcing your site to rank for multiple niche terms is to place a large amount of quality copy at the bottom of the page - below your sales pitch. So if your visitors want to read in depth about your products/services they can while at the same time providing a wealth of keywords. Using this method, rather than ranking for a few big terms you can also rank for tens or hundreds of niche terms. It may just be one of those niche terms that brings you your biggest client.

Comments1 Comments

Noor Alvi

Really nice article, I learned a lot from it and will try to implement on my own website.

01 July 2009

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »