A basic guide for how to build a Search Engine Optimisation (SEO) friendly website

Points to remember for developers and designers

I would like to start with the very basics of SEO.  What is SEO first of all?

SEO is a process and often a guarded method of listing/improving the visibility and ranking of a website in search engines (such as Google, Bing, Yahoo and many others) and in-turn attracting more visitors. SEO can also be described as the activity of optimizing a website to make it more search engine friendly, and getting higher positions in search results.

Now that we have a better understanding of what SEO is I will continue with the first basic SEO methods and tips for when you are building a website.

Basic SEO steps to remember when you build a website:

<HEAD> section:

  • Add a <title> tag in your header section. Make sure that the title tag contains your most dense keywords from the particular page that you are working on.  Do not make the title too long. Eg: <title>Pet Zone | dogs | cats | pet food | pet shop</title> Do not use more that 3 or 4 keywords. You don’t count the main name as a keyword in this case Pet Zone. However the name can be used in the title tag. Do not use any punctuation such as apostrophes. Each page should have a unique name and title. The length of the title tag should not be more than 66 characters.
  • Add a Meta Description in the header with a brief description about that particular page. This should not be more than 160 characters
  • · Add a Meta Robots tag (<meta content="index, follow">) “index” is telling Google that it is allowed to index this page and “follow” is telling Google to follow all links on this page. This is the standard. This is automatically created in CMS systems.
  • Add a Meta Content-type tag (<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />) which informs Google of the specific character encoding you will be using on the page. UTF-8 is the generally accepted content-type for SEO. This is automatically created in CMS systems.

<BODY> section:

  • Keep the copy (content) on the page between 300 and 500 words.
  • Ensure you use the keywords you are trying to emphasis throughout the copy and in some instances make use of the bold and underline attributes for those keywords.
  • Keep your title tag (<title>), page name (URI) and your header 1 (<h1>) the same – this gives Google a clear understanding of what you are trying to promote on the page.
    Eg: If the file name is “food-for-pets.html” then your header tag as well as the title tag should be “Food for pets”. This is the general rule, slight variations are accepted.
  • Along with the previous point, you should name your images in-line with the topic of the page.
    Eg: Image name “food-for-pets.jpg” (Do not use any uppercase text in your title).
  • Include at least one image on each page that will be used on the website that you are building and always make sure that the alt tag and a title tag for the image has a short description of the image (1 – 3 words). Also include the image dimensions in the image tag.
  • Use footer navigation.  Add a link to each of your main pages in your footer.

General SEO steps to remember when you build a website

  • Add bread crumbs to each page.
    Eg. Pet food – dog food – dry dog food (create a hyperlink to each relevant page).
  • Create social media links. Eg: Links to Facebook, Twitter or any other social media accounts.
  • Make internal links. If you make reference to information that is elsewhere on your site, make a link to that information.
  • Make sure your HTML and CSS code validates! Use http://validator.w3.org/ for this.

Tips for Developers

  • When possible (and only in HTML built websites (not CMS)) make sure you include all header tag data in one PHP include file. This makes SEO maintenance and future changes simple and efficient. The same can be done with many other elements of the site such as the footer section. This keeps all the data in a central location and makes life easier for everyone.
  • Make sure your CSS code is in a CSS file and not coded into your page directly.
  • Avoid building or using frames as search engines do not pick up frames.
  • Do not be shy to use Header tags (h1 to h3) h1 being your most important heading.
  • Always make sure you added a very short description to alt tags (Images and Links)
  • Make sure your internal and external links are working.
  • If the site is for a service or company, add the company location on Google Maps.
  • Try keeping all JavaScript code and files (.js) in ONE file. This drastically improves page load speed therefore increasing the SEO health of the website.
  • Try keeping all CSS in one file for the same reason mentioned above.

Tips for Designers

  • Although Google is attempting to read flash files, avoid using flash menu’s if possible. (http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html)
  • Make sure there is always at least one Call-to-action on the page.
  • Images for the website needs to be a small and compressed as possible without the loss of quality.
  • Anchor text: Please do not use “click here” or anything similar as links on the page. This emphasizes that the words “click here” are words we would like to rank for. Make sure you use descriptive links throughout the design.
  • The logo of the website needs to be a link that points back to the home page. This is a generally understood standard.
Ceri is the Sales and Marketing Director at Talooma. Over about 15 years, Ceri has developed his passion for meeting people and selling, during which time he has mastered the art of networking and consulting. Ceri has enjoyed watching the Internet industry grow over the past 10 years in South Africa and has been very fortunate to have been a part of it.
View all posts by Ceri
Ceri's website