The “Design” Part of Search-Friendly Design

Many search engine marketers mistakenly believe that to make a site that’s search engine-friendly, all they have to do is create a site map page and have a text-link navigation scheme. While some site designs can become more search-friendly by adding a site map and text-link navigation, other design solutions aren’t so simple.

After reviewing my previous column, Search Engine Friendly or Search Friendly?, it really hit me that many SEM firms have missed the boat on one important concept. Having a search engine-friendly site design is one concept. Having a search-friendly design is a similar concept. But what happened to the “design” part of search-engine friendly design? When did positioning become more important than the user experience?

Keyword Appearance and Placement

As most SEMs already know, for a page to rank well in the spider-based search engines (Google, Yahoo, Teoma), important keywords should appear in the following places:

  • HTML title tag
  • Heading tags


  • Hypertext links or anchor text
  • Visible copy
  • Meta tags
  • Alternative text
  • URLs

Some keyword-rich text is exponentially more important than others. For example, I’d spend a great deal of time modifying title-tag content and visible text, but I wouldn’t rename all of a site’s URLs merely to place keywords inside them.

How text looks on a page is a part of the design process. What color are your headings going to be? How large or small will the font size be? Do important links look clickable? A page may rank well in the search engines but may not convert because of color decisions.

Suppose a search engine-friendly site designer is creating an e-commerce site. The primary macro-conversion of an e-commerce site is to get visitors to complete the checkout process. To get visitors to type private information into the checkout forms (name, address, phone number, credit card number, etc.), visitors must feel a site is trustworthy.

During a usability test or focus group, I always ask testers to describe a site (or page) in seven words or less. Three words I want to hear when they’re describing an e-commerce site are: trust, dependability and security.

One color that clearly communicates those three adjectives is blue. Not a soft blue like #CCFFFF (hex code) that communicates peaceful, soothing, and clean. Rather, a stronger shade of blue such as #000066, which communicates dependability, trust, and professionalism.

Therefore, the color blue is featured throughout any e-commerce site we create.

Does font color directly affect search engine visibility? If used inappropriately, yes. Placing white text on a white background, or black text on a black background to increase the keyword density and/or prominence on a page is considered search engine spam.

Consider as well that people tend to link to sites with unique, high-quality content that’s easy to read. Therefore, creating a color scheme that communicates the right message to a target audience can help link development.

Graphic Images vs. HTML Text

Many developers and programmers mistakenly assume that if all search engines index the text and follow the links in a text-link navigation scheme, they should just scrap an image-based navigation scheme. Designers and usability professionals understand how narrow-minded this perspective is. All too often, end users prefer graphic images over HTML-formatted text.

Through usability tests and focus groups, Web site owners may determine prospects and current clients genuinely like a font, one not commonly installed on a PC or a Mac. In situations such as this one, I’d probably create an image-based navigation scheme for the main navigation. However, I would create some secondary navigation schemes (vertical and horizontal) and relevant cross-linking using text links.

Do programmers like it when I insist on using an image-based navigation scheme? Not really. Yet a company’s IT staff is not going to spend thousands or millions of dollars on its products and services. Customers will. In fact, the customers are the ones who provide the IT staff with salaries. So if end users prefer image-based navigation, they should get image-based navigation.

There are many other places on a site where SEMs can place keyword phrases. This process is part of the “design” element of search-friendly design: knowing how and where to place keyword phrases in all types of page layouts.

Categories and Site Architecture

I recently had a conversation with a programmer regarding site architecture:

Programmer: I can’t help it. I think like a programmer.

Shari: Well stop it. You’re creating categories and a site architecture that makes sense only to you. It doesn’t make sense to anyone outside of the IT department. I’m not telling you to completely stop thinking like a programmer. I’m telling you to diversify. Programming is only one part of a Web site.

I ruffled some feathers that day, but I stand behind my statements. Building a search-friendly Web site requires skills beyond programming. Building any type of Web site requires a variety of skills: design, usability, programming, search-friendliness, copywriting, sales and so forth.

Site architecture and categorization should be heavily based on keyword phrases. That’s one of the many reasons a search engine marketer should be part of the design or redesign process. Carefully data mine keyword phrases through a variety of resources. Armed with that keyword list, developers can create a site that makes sense to their target audience, using the same words visitors search for.

Web site development and search marketing go hand-in-hand.


Many skills go into creating a user-friendly, search-friendly, persuasive site that converts. Programmers and developers make a site functional. Artists and designers create color schemes and page layouts. Usability professionals ensure that pages make sense to end users. Copywriters create persuasive and search-friendly content.

For search-friendly site design, don’t forget the design element. It can make a huge impact on a site’s ROI.

Related reading

site search hp
Space Shuttle Launch