Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Web Marketing Alchemy: Search Engine Optimization

Develop cleaner CSS and (X)HTML code to help sites achieve higher ranking in search results.

Simply put, proper search engine placement can reap in untold amounts of potential customers. Considering the cost of online advertising with banners, pay-per-clicks and other programs, proper Search Engine Optimization (SEO) is dollar-for-dollar the most cost effective means of driving traffic to a site. Since most optimization can be done through simply cleaning code without any heavy redesign, it’s often a simple matter of going through the pages to reformat positioning and content.

While the machinations of Google and her ilk are labyrinthine at best, there are a few tools designers can utilize to push a website closer to the top. Developers using CSS-based layout and other W3C best practices are already 90% there, since one of the first steps to better SEO is reducing code clutter.

Make the Content Work for You

Through CSS, web designers are able to separate content from design. Removing line after line of unwieldy code (most often in the form of tables and javascript) results in slimmer, more easily read mark-up that search engines can better devour. Several paragraphs of real HTML text content on a homepage will rocket a site way past a competitor using a Flash introduction.


  1. Try to have at least 200 words of solid HTML copy on a site’s homepage.
  2. The copy should re-iterate several META tags keywords. The copy should not be just a list of keywords.
  3. In the mark-up, the content should be as close to the top as possible so search engine spiders find it right away. This is better accomplished in a “no-table” design, since a <div> can be rearranged more easily.

For the Love of <H>

There are certain tags search engines look for, the most important being <H1>. This symbolizes the viewable title of the page, the header that readers see to tell them what’s going on. While the traditional HTML <H1> is unquestionably ugly and cumbersome in all its beastly Times New Roman glory, proper CSS styling will tame and mold the header to fit perfectly with any site’s design. <H1>’s power is magnified by using a few keywords from the META tags.

Similarly, the other members of the <H> family (H2 – H6) should be used accordingly as subheads. Search engines read these and value their content over blocks of copy. Again, using the power of CSS, these tags can be formatted any way the designer needs.

Many sites have graphic headers in place of text for a page’s title. <H1> (or any HTML tag) can still be utilized through different image placement techniques, but the SEO benefits of the tag will be greatly watered down. For example:

  1. An image swap in CSS, which is described very well by Douglas Bowman on his site Stopdesign. Unfortunately, this technique uses the {display:none} attribute, which Google strictly warns against. This tag also hides the content from the JAWS reader.
  2. <h1><img src="picture.png" alt="Keyword-loaded Title Text" /></h1> will work, but spiders will ignore the <h1> and only read the “alt” copy, which does not sit high in the order of importance.
  3. More practices can be found on Mezzoblue, but the technique is not yet perfected.


  1. Use <H1> on every page possible. Put it at the top of the page and use several keywords and key phrases from the META tags.
  2. Use <H2> through <H6> as subheads.
  3. Use any <h> replacement techniques with discretion. Most likely, they will be inferior to a pure HTML text tag.


The tendency to overuse images in a jumbled mess of nested tables was the norm for early web design. Some designers went so far as to render blocks of copy as an image, essentially negating any search engine positioning benefit the content would have provided!

Today, designers tend to be more judicial in the use of images, but there are still some tips for search engine optimization.

As a rule of thumb, always give images “alt” tags. This will bring good karma in several ways. First, for text-only browsers and disabled users, the tag will offer a description in place of the image. Second, search engines like reading the alt tags. Instead of just typing <img="images/logo.png" alt="logo">, use the following: <img="images/logo.png" alt="Logo for Ed's Discount Hubcap Repair">. Repeating a few keywords from the META tags will only help.

It is also important to understand that spiders value content over images, so if possible, replace any images with CSS-formatted HTML. This is especially relevant in navigation menus, where designers commonly employ rollover effects. Example of bulky javascript:

<td width="40" height="15"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/home_over.gif',1)"><img name="Home" border="0" src="images/home_up.gif" width="40" height="15"></a></td>

Clean HTML with a CSS tag:

<a href="index.htm" class="nav" title="Ed's Discount Hubcap Home">Index</a>

Again, with CSS styling, the look and feel of the menu can be set to mimic graphic buttons. By using a fraction of the bandwidth, the reduced code reinforces keywords both in the actual HTML word as well as the title tag.


  1. “Alt” tags should be used on every image. For insignificant images, use an empty tag, such as <alt=””>.
  2. “Alt” tags should, if possible, repeat a keyword or two from the META tags.
  3. Use CSS and HTML instead of images wherever possible. This reduces code clutter, and search engines react better to HTML copy than images. When employing this technique for navigation menus, include descriptive title tags.

But What Really Matters …

Is content and linkage. Without content, search engine spiders have nothing tangible to crawl. Google and Inktomi strictly rank pages on who is linking to who, and how often.

So use CSS and other W3C practices to achieve SEO nirvana, but make sure visitors have something tangible to devour. Without good content, readership will never really go anywhere, no one will link to the site, and you’re super-duper optimized CSS-layout with awesome keywords and pretty pictures will be a lonely island in the web’s ocean, forever lagging behind the first page results.

General Tips:

  • Keywords work best as phrases. The keyword list should not exceed 1,000 characters (including spaces), and should not list any one word more than twice.
  • Title tag should be between 40-70 characters long (including spaces).
  • Title should include a few keywords.

Things to Avoid

There are many elements in a webpage that can contribute to better positioning. By the same token, there are just as many things that can be detrimental. While these aren’t directly related to CSS and XHTML mark-up, they underscore the value of using those technologies over the ones listed below. Some of SEO’s worst offenders:

  • Frames. Spiders can not see inside them.
  • Dynamic URLs. This means any long address with question marks, ampersands and other non-typical characters.
  • Flash-based splash pages.
  • Image maps.
  • Javascript/DHTML navigation. (See sample above.)

What Search Engines Consider Spam and Grounds for Banishment:

  • Keyword stuffing. (Listing keywords in an HTML document and using same color type as background.)
  • Multiple title tags.
  • Same page with different names.
  • Frequent submission (more than once a day).

commentary + criticism

victor goyea

wrote the following on Wednesday January 4, 2006

found your article helpful . 1 question pls…

Do SEs really value the Title tag?


wrote the following on Thursday January 5, 2006

The title tag really matters when you link to another site, as it provides Google a way for its index to describe the link. For instance, if you linked to graphicPUSH, it would be far more benefial for me to have your title tag say something like “graphicPUSH is a design site that discusses print design, web development, in-house creative and the business of freelance design” rather than “graphicPUSH is about design.”

Hope this makes sense. The more contextual and specific you make your links, the more accurately SEs can index the web.