Designing for Search Engines and Stars

In: Articles

By Shirley E. Kaiser

Published on April 9, 2001

Introduction

Great search engine placement doesn’t require you to sacrifice appealing design. While “content is king” for high search engine rankings as well as overall site popularity, your imagination and creativity with designs can still reach for the stars.

Design around your content, not the other way around.

Savvy clients often provide a long list of what they want on the main page, or what they have in mind. If high search engine rankings are on that list, as they usually are, you’ll need to create your design around key-phrase rich content (about 250 words¹), especially for your main page.

This tutorial provides a broad overview of ideal approaches, what can still work, and what you ought to avoid if search engine rankings are important. There are times when we forego the ideal for various reasons, so I’ll try to steer you around the roadblocks on the way regarding graphics, Flash, frames, splash pages, and other potential perils. At the end of the tutorial are some resources for further exploration, too.

. . . . . . . . . . . . . . . .

“Web designers must design for search engines, not just for browsers. But the absolute best way to be listed is to have really good content.”

— Danny Sullivan, editor,
Search Engine Watch.²

. . . . . . . . . . . . . . . .

Splash Pages Go Kerplunk!

A client of mine last year asked for a splash page that would provide a specific ambiance and mood before going into the main contents of the site. Animated introductions using Macromedia Flash are also very popular right now. But how does a splash page or a Flash intro impact search engines indexing your site?

If your client wants high rankings, search engine savvy experts, such as Danny Sullivan, Jill Whalen, Detlev Johnson, Bruce Clay, and search engine content optimization expert Heather Lloyd-Martin all state that for best results a site needs to be content rich with carefully placed keyword phrases, especially the main page.

“Uh-oh.” That doesn’t describe the typical splash page, does it? Since splash pages and Flash intros may have very little (or no) HTML text, they are not helpful for search engines and could potentially inhibit indexing. If your main page has little or no text, there’s very little content that the crawler will index… which means your site won’t pop up when people do searches.

There are also search engines that only index your main page, so if it happens to be a splash page with very little text, your site has little-to-no chance of popping up in any search results. META tags can help for search engines that recognize them, but without rich content, your odds of getting listed at all, much less achieving top rankings, are tremendously reduced.

[See also: Flash section below for providing text alternatives for Flash 5 META Tags section for the myth about their sole purpose.]

What does all this mean for site design? For starters, ideally your main page will be content rich with plenty of keyword phrases. The next section will head into the ideal and what’s needed to steer around the roadblocks.

Designing for Text

What about graphics? What about that beautiful Flash intro? What about the collage another client wants on a splash page? Well, you won’t have to steer off the cliff. There are plenty of possibilities for reaching the stars and great search engine rankings if you keep a focus on working with the content, too.

You already know that the main page is typically the most important page of your entire site, and not just for search engine optimization. A recent study shows that visitors often decide within four seconds whether or not they’ll stay, and search engines also rely on your main page to index your site, in addition to many of them only allowing the main page to be submitted.

Let’s keep it simple here. Search engines will read text. How can you work with that? It’s similar to working with accessibility guidelines. Here are some recommendations:

• Provide text-only alternatives for your content that can’t be read by search engines (such as JavaScript, image maps, Flash and other multimedia)
• Include text for your image ALT tags
• Consider how you use HTML tags, such as header tags and their order and use
• Include at least 250 words of rich search engine friendly content on your main page (search engines generally give more weight to content higher up on the page, too)
• Site navigation and architecture should be easy to follow
• Effective TITLE tags and META tags

The above is probably nothing new to you in terms of elements for site design. These are also important parts of having your site or your client’s site pop to the top of the search engine listings.

Great Content

Whether you, a content developer, or your client provide the content, it needs to be written with search engines in mind and with the Web in mind. Since the top 250 words of your main page are critical to help your search engine results, the job as designer is to create a design to allow for this to work well. You may need to advise your client to turn over the job of writing key-phrase rich content to a specialist for the best results with both search engines and for interesting reading. There are also very helpful tools, such as Wordtracker to help you research the most popular key phrases for the site you’re designing.

Laying out the copy with concise sentences, short paragraphs, bullets, and 2 or 3 columns are a few of the possibilities for formatting the rich content needed. Heather Lloyd-Martin, President of SuccessWorks, states in her article, How to Write a Keyword-Rich Home Page the Search Engines Will Love,

. . . . . . . . . . . . . . . .

“Not only is it easier to write keyword-dense text when you keep your page length to at least 250 words, search engines tend to adore copy with some ‘meat.’

(Hint: Are you afraid that your 250+ word copy will look like an endless scrolling text block? Tricks like writing short paragraphs [this works great for multiple-column layouts], including subheadlines and integrating keyword-rich bullet points, will help enhance usability while satisfying the search engines.)”

. . . . . . . . . . . . . . . .

Here are two examples of implementing a search engine friendly design with keyword rich content.

Exceptional Smiles
Rich content and design. TContent by Heather Lloyd-Martin, specialist in search engine optimized content, I designed and built the site, and Jill Whalen, search engine optimization specialist, optimized the site for high rankings. It has been consistently achieving #1 rankings for its keywords since we developed the site around April, 2000.

WebsiteTips.com
This main page has content across the top of the page, with a 2-column layout below that, all of which has keyword rich content. I designed this site to be search engine friendly, utilizing the tips supplied in this tutorial.

Both of these sites have graphics navigation (image ALT tags all contain text descriptions), text navigation at the bottom of each page, and take advantage of other optimization tips.

Site navigation is another important ingredient in helping your search engine rankings, so let’s take a look at that next.

Site Navigation

Search crawlers will follow links. So if you have good internal links within your site, there’s a far greater chance that crawlers will follow the links. This is one way of encouraging “deep crawling.”

The creation of good internal linking is also part of an effective, user-friendly site. When developing your site design, consider the user-friendliness of the navigation, which if high will also make it easy for spiders to crawl through your site.

While text navigation is the most search engine friendly, graphic images for navigation and JavaScript mouseovers can still be search engine friendly. Here are a couple of possibilities.

If you use graphic navigation links, remember to use the ALT tags for the images so that the search engines that read ALT tags will pick up those keywords, too. As mentioned above, there are many correlations between using accessible code and optimizing your design for search engines, with the ALT tag being no exception.

<img src=”images/ourlogo.gif” width=”300″ height=”60″ alt=”Your company name and keyword rich slogan” border=”0″ />

If you use JavaScript mouseovers for your navigation, be sure to provide HTML links within the code along with including text for the ALT tag, too. Here’s an example:

(In your external JavaScript file)

 if (document.images) {      imageon2 = new Image   imageoff2 = new Image    imageon2.src = "images/whoweareon.gif"   imageoff2.src = "images/whoweareoff.gif" }  else {       imageon2 = ""    imageoff2 = ""    document.image2 = "" } 

(In your HTML document:)

<a onMouseover=”document.image2.src=imageon2.src” onMouseout=”document.image2.src=imageoff2.src” href=”who/index.html”><img name=”image2″ src=”images/whoweareoff.gif” width=”80″ height=”18″ alt=”Who We Are” border=”0″ title=”Find out about the people behind the company” /></a>

Here are some samples on the Web.

JavaScript navigation: To view a sample of this type of JavaScript navigation implemented live on the Web, check out the main page of SKDesigns.

Graphics navigation: Exceptional Smiles and WebsiteTips.com above are both samples of using graphics for navigation.

Text navigation: LinkwareGraphics.com Super BladePro Presets has a similar design to WebsiteTips.com except using text navigation.

Flash

By now, you may be realizing why Flash intros or splash pages typically don’t help search engine rankings. This doesn’t mean not to use Flash within websites, though. It’s not the tool itself — it’s how it’s used that makes the difference.

If you look at the main page Hillman Curtis, a respected Flash designer, you’ll see a combination of text and Flash, with the Flash used to provide information about what their company does. It’s not there solely as fun bells and whistles. (His work is also quite inspiring, so if you can, relax and put your feet up to check out his site.)

. . . . . . . . . . . . . . . .

It’s not the tool itself — it’s how it’s used that makes the difference.

. . . . . . . . . . . . . . . .

Lemode has plenty of content on its main page, and uses a Flash animation of butterflies flying around in the center of the page. Necessary? One could argue for or against that. Personally, while I think it’s cute, I found the movement in the center of the page distracting from reading about their products.

What about search engines reading Flash files? Well, there’s progress being made, although there needs to be more. Using the Macromedia Flash Accessibility Kit with Flash 5, you can now provide a text version of the Flash information enclosed in an ALT tag within the <noscript> tags. This approach could potentially be read by search engines that read ALT tags. The Kit also provides a script to detect the presence or absence of the Flash player.

. . . . . . . . . . . . . . . .

Danny Sullivan states,

“Since search engines are generally like old, non-JavaScript browsers, the text you put in a NOSCRIPT tag is actually text you are explicitly trying to make them see.”³

. . . . . . . . . . . . . . . .

Does it really matter if search engines can read Flash files? The answer to this depends on the site and the content of the Flash file(s). If you have a Flash file on the main page that’s potentially full of key phrases and information that you’d love to pull in visitors for, then it could help. Many ingredients go into providing good search engine results, though, with text alternatives for Flash potentially being one of the many ingredients.

As of the date of this tutorial, there doesn’t seem to be documentation available about whether or not this NOSCRIPT tag alternative in Flash is being read by major search engine spiders. However, the Atomz Flash FAQ explains how Flash files are read by its popular hosted website search engine. The technology is available, and hopefully we can stay tuned for these being read in the not too distant future (if they aren’t already beginning to read the Flash 5 text alternative described above).

JavaScript

If you’re using JavaScript within your page between the HEAD tags, for example, consider moving your JavaScript code to an external .js file. Otherwise some spiders will read your JavaScript code first, giving this greater importance than your content.

[Need some tips on writing an external JavaScript file? WebsiteTips.com JavaScript section provides annotated links to some of the best tips and tutorials at WebReference, WebReview, Joe Burns’ JavaScript Primers, and more.]

Frames

Framed websites are often fraught with problems, with one of the negative aspects being complications with search engines. Either the search engine indexes an orphan window outside of the frameset, leaving the visitor stranded and unable to link into your site, or the search engines won’t even enter a site with frames at all. Neither of these scenarios are very pretty, are they?! With a few snippets of code and a little planning, that can be changed, however, so that search engines can still index your site AND also not link to dead end orphan windows.

There are two main points to allow for:

1. Always provide links from your individual pages back into your site. Minimally, include at least one link to the site’s main page. Optimally, include the site navigation so visitors can click into various parts of your site as they wish.
2. Additionally, you can add some JavaScript to force pages into a frameset. This prevents visitors from inadvertently accessing an orphaned page. So, if a search engine links to one of the content frames, for example, the JavaScript will call all pages in the frameset, eliminating a stranded orphan site. (This doesn’t exclude the need for navigation links, though. They’re still important.)

 If (top.location.href == self.location)  { top.location.href = "URL"; } 

where “URL” is the URL of the frame file.⁴

When you build the frameset for your site, include the <noframes> </noframes> tags to allow for non-frames capable search engines to spider your site (which is the same as for non-frames capable browsers). Here’s a sample below:

 <html> <head> <title>Descriptive title </title> </head> <frameset> <frame src="nav.html" name="nav"> <frame src="main.html" name="main"> <noframes> <body> 

<p>Include text here that the search engines can read as well as for non-frames capable browsers. Sometimes people place their entire body copy here in lieu of building a separate no-frames version of a site.</p>

 </body> </noframes> </frameset> </html> 

PDF

Google is the first major search engine to index PDF files, a long overdue feature. Google actually provides text-only versions of over 10 million PDF files, or you can view them with Acrobat Reader.

The other good news is that the new Acrobat 5 (due out in April) will allow you to add meta tags to PDF documents.

“Create custom search criteria–Create and embed metadata in an Adobe PDF file, thus expanding the ways the file can be searched. eBook publishers can add a metadata field, for example, that enables digital books to be searched by ISBN numbers. Metadata is written in XML, which means the metadata in Adobe PDF files can be indexed by Internet search engines.”⁵

I think we can anticipate other search engines to follow Google’s lead. Right now, though, keep in mind that only Google is indexing this format, so don’t put too much weight into them for search engine rankings until more search engines and directories list them.

For website search engines, companies like Atomz will already index PDF files. So if you use Atomz or other website search programs with this feature, your visitors will find the PDF files indexed in their searches, too. If you wish to see Atomz’s PDF search feature, run a search at WebsiteTips.com (try using “border background”).

Creative Style Sheets

With some careful thought, it is also possible to use style sheets to your advantage when coding pages, too. You may already know that search engines pay attention to header tags and other tags as ranking in importance to each other (in addition to giving more weight to text closer to the top of a page). Style sheets provide more flexibility to determine font sizes, weight, line heights, and more.

For example, you could have your main header tag, <h1> </h1>, as your page header, but change the font size and default padding above and below this tag within your style sheet code if you wish. You could also try wrapping some of your important keyword phrases inside header tags so search engines rank their relevancy higher. I also suggest a conservative approach, however, so that search engines don’t think you’re trying to trick them.

Additionally, if you use an external style sheet, you’ll eliminate a fair amount of code for search engines to read through. Here’s an example of the difference.

Using font tags:

<h1><font face="Verdana, Geneva, Arial, Helvetica, sans-serif" color="#000080" size="6">Document Title</font></h1>

Using external style sheet:

<h1>Document Title</h1>

Dynamically-Served Content

One of the fairly common problems with dynamic page creation and search engines indexing them is the ? (question mark) symbol within its URL. Search engines may stop at the ? symbol within a URL, thus not indexing the proper URL. For example, this URL:

http://www.websitetips.com/cgi-bin/getpage.cgi?name=fonts

may actually be read by a spider as:

http://www.websitetips.com/cgi-bin/getpage.cgi

As a result, the search engine attempts to retrieve an invalid URL and fails to index any of the content served by that script. It’s not a hopeless situation, though! There are workaround solutions and software solutions designed to make the URLs more search engine friendly for environments based on Apache, ASP, and Cold Fusion.

For Apache:
Apache Docs: mod_rewrite URL Rewriting Engine

For ASP:
PortalPageFilter, by AlphaSierraPapa.

For Cold Fusion:
Spiders and Dynamic Pages Thread via Allaire Forums

An alternative is to use software designed to mirror your dynamic pages into static pages, such as:

Convert dynamic content to static pages:
UniT Text Generator, by Thorsten van Ellen

How to transform CGI-generated URLs into meaningful user interfaces:
URLs! URLs! URLs!, by Bill Humphries

META Tags

There are still plenty of people who think that meta tags are the one and only answer to achieving high search engine rankings. The reality is that 1) not all the major search engines read meta tags⁶, and 2) they’re important but they’re not the sole means of search engines and directories listing or indexing your site.

 <head> <title>your descriptive key-phrase rich title goes here</title> <meta name="description" content="meta tag description goes here" /> <meta name="keywords" content="keywords go here" /> </head> 

A Word to the Wise

There are plenty of techniques that will hide keyword-rich “content” from users while making it accessible to search engines. Two commonly used ones are:

• Creating hidden layers
• Using <font> or a style to set text to the same color as the background color of the page

However, this approach of hiding machine-readable (but not human-readable) keywords can be put under the heading of “spamming,” which an increasing number of search sites are starting to ban (or at least avoid). The chances are that you will be best-off avoiding these approaches altogether.

Don’t Put All Your Eggs in One Basket

It can’t be emphasized enough that all the above tips in combination tend to be most effective. In other words, don’t count on META tags as your sole means of gaining high rankings, especially if you don’t use other critical points in helping your rankings. Utilize as many of the optimization points as possible.

It’s also a frequent practice to remind clients that while search engine rankings can play an important role in bringing visitors to their sites, there are other sources to be included for bringing in visitors to a Web site, such as traditional advertising, word of mouth, networking, and more.

Designing with search engines in mind can still allow you to be creative and shoot for the stars while also achieving better search engine rankings, too. Below are more resources for exploration.

---

Footnotes

¹ How to Write a Keyword-Rich Home Page the Search Engines Will Love, by Heather Lloyd-Martin.
Back to content

² Content Matters Most In Search-Engine Placement By Larry Kahaner, Informationweek, June 12, 2000.
Back to content

³ Hiding JavaScript by Danny Sullivan, Search Engine Watch. (Subscriber area of site)
Back to content

⁴ Creating Web Pages with Dynamic HTML. Course Technology, Publishers, 2001. Pg. DHTML 5.45.
Back to content

⁵ Adobe Acrobat version 5.0 New Version Highlights, Pg. 7.
Back to content

⁶ Search Engine Display Chart, by Danny Sullivan, Search Engine Watch. (Subscriber area of site)
Back to content

---

References, Resources

Dynamic Content

Search Engines and Dynamic Pages, by Danny Sullivan, Search Engine Watch.

Flash

Atomz Flash FAQ

Macromedia Flash Accessibility

Macromedia Flash Accessibility Kit (for Flash 5) [Editors Note: This kit is no longer avilable as a downloadable file. The kit is integrated with newer versions of Flash (i.e. Flash 6.x+]

Frames

Getting Your Framed Site Listed With Search Engines, Jill Whalen, Rank Write Roundtable.

JavaScript

Hiding JavaScript, by Danny Sullivan, Search Engine Watch.

Specifying a File of JavaScript Code Chapter 1, Getting Started. DevEdge Online – Online JavaScript Reference Manual

Specifying Alternate Content With the NOSCRIPT Tag, Chapter 1, Getting Started. DevEdge Online – Online JavaScript Reference Manual

PDF

Find PDF Files, Google’s Special Features, Google.com.

Google Does PDF & Other Changes, by Danny Sullivan, Search Engine Watch.

Google Ventures into the Invisible Web, The Web’s First Large-Scale PDF Search, by Chris Sherman, About.com.

Search Engine Optimization Tips

Preparing Your Pages For the Search Engines, by Robert Woodhead, SelfPromotion.com.

WordTracker Database tool to help you find the most used key phrases to implement for your site.

Search Engine Optimization Specialists

Bruce Clay
Bruce Clay, LLC, Internet Business Consultants

Rank Write Roundtable
Jill Whalen and Heather Lloyd-Martin

Search Engine Watch
Danny Sullivan

Other Resources

4 Seconds to Grab Visitor’s Attention?
Shirley Kaiser, SKDesigns

Performance Primer: Gone in 4 Seconds
By Cade Metz, PC Magazine

Related Topics: Search, Search Engine Optimization (SEO)