The Web Design Team's WDTzine Presents...

A Web Designer's
Guide to Search Engines

by WDT member - Jeremy Leigh
Search Engine Optimization Specialist at
AskUs Computer Services, Inc.

Note: The following article is based on my experience promoting web sites, various search engine disscussions and articles, and good, common sense design practices. There are no guarantees.

Getting a high ranking on search engines, it's what our clients and we want. However, submitting alone is not enough. For optimal results we must design for search engines, we must optimize our web pages, and persist to get our web sites to the top. These series of articles will focus on those very features, beginning with...

Part 1 - Designing for Search Engines

Fact: Ugly pages usually get better rankings.

By ugly I don't mean bad design, but maybe ugly from a designer's point of view. Some techniques used to make pretty, eye pleasing web sites are also the same things that can end up hurting your chances of getting ranked high in search engines.

Design techniques that can hurt your rankings:

  1. Graphics:
    • Too many sites begin with one large graphic and "Enter Here" Unless "Enter Here" is your subject matter, your site is going to suffer.
    • Many search engines will index the ALT text in the IMG tags. Using images with poorly constructed or without ALT text can lead to bad rankings, as well..
  2. Tables:
    • Most sites, now, use table to layout pages. Search engines tend to only look at the first few hundred characters of your web page. Complex table structures can put your main text thousands of characters into your page. Thus, your main text may never be indexed and this can damage your ability to rank well.

Solution:

Let's discuss 6 ways you can design with search engines in mind.
I'll use one of our client's sites http://www.herbalfit.com/ as an example.

When we were asked to design this site we knew that we were going to be fighting for position. Weight loss products dominate the web. A search for "weight loss" yielded over 7 million results. We had to design a site that would have a fighting chance.

1. The <H1></H1> Header

Search engines do pay attention to Heading tags. H1-H6 are not just to make words big and bold. They are to declare order of importance. There should be only 1 H1 and 1 H2 tags per page. There can be multiple H3-H6 but not before a H1 or H2. With this in mind we created a keyword sensitive H1 heading that was appropriate to the page.

search_1

This provides search engines with a very relevant sentence and establishes the topic of the whole page.

2. Make Good Use of ALT text in Images

Next we tackle the logo. Here's a sample of the IMG code:
<IMG SRC="herballogosm.gif" WIDTH="300" HEIGHT="90" BORDER="0" ALT="">
We needed to supply a value for ALT. ALT is alternate text for the graphic. A big mistake in web design is to leave these out. Look at Alan Flavell's article Use of ALT text in IMGs. for more information on using ALT text.

The key to search engine friendly ALT text is to develop something that isn't spam but is keyword sensitive and relevant to the page. So we used:
<IMG SRC="herballogosm.gif" WIDTH="300" HEIGHT="90" BORDER="0" ALT="Weight Loss with Herbalife at Herbalfit.com">
which resulted in the following when the cursor is held over the graphic.


Note: Using ALT text is also important in complying with the American With Disabilities Act.

3. Contact Information

To distinguish this business from some of the fly-by-night weight loss supplement web sites, we needed to establish this company as a legitimate business. This meant including the address and contact information in a prominent location. This is an important area in getting listed with some Directories, where people look at the site and make the decisions. So we included the name, address, and phone as well as a keyword sensitive heading.


Note: Notice this web site used a PO Box address. Actually, this is a big strike against an Internet business. Try to convince your clients to use a physical address to improve customer confidence.

4. Opening Statement

Before we get into the layout of the page, we want something else for the search engines and reader to view. Thus, enter the H2 heading. A relevant keyword sensitive sentence that complements the H1 heading and the rest of the page.

5. Stick With Appropriate Headings

Now we are into the body and have taken all the precautions we can. We have our H1 at the top as the very first words on the page, good ALT text for the logo graphic, and a H2 heading to lead into the rest of the page. Now we use a H3 heading to begin our subject.

6. Keep Your Information Simple and Relevant to the Subject

Lastly for each H3 heading we have a small keyword sensitive paragraph. This page actually has too many paragraphs. Trimming them down would be something to consider in a future update to this site. For the most part, a small amount of information on many pages will do better than a large amount of information on one page.

search_6

A good design is only part of your web site's success.
Next we'll discuss "Optimizing Your Site for Search Engines."

Additional Resources:

http://www.searchenginewatch.com/
http://searchenginediscussion.com/
http://www.netmechanic.com/news/vol3/searchengine_no4.htm

Join the WDT

For more information and help, join the Web Design Team. There are experts in most areas of web design that share in the mission of the WDT. Go to the WDT Member Page to find out how you can benefit, contribute, and join the WDT.

This article is Copyright © 2000
AskUs Computer Services, Inc.
211 Fox Run Trail
Danville, KY 40422
(859) 236-4040
Brought to you by The Web Design Team
Courtesy of the WDTzine
Last Updated: 11:32 5/30/00