Search Engine Masters

Part 1: Introduction

Top search engine placement doesn't require you to lose your appealing design. While "content is king" for high search engine rankings as well as good link and site popularity, your imagination and creativity with designing an eye catching website can still be possible when you know the search engines rules.

Design around your content, not the other way around.
Smart 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 keyword 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.

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

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

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

Splash Pages that sink your site rankings!
A client of mine last year asked for a splash page that would provide a specific 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 higher rankings, search engine experts, all agree that for the best results a site needs to be content rich with carefully placed keyword phrases, especially the main page.

"Oh-No." 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 show 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 or no chance of showing 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 potholes.

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 heavens and great search engine rankings too if you keep focused on working with the content.

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 a few 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
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 (uncluttered)
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 appear at the top of the search engine listings.

Great Content
Whether you are a content developer, or your client provides the content, it needs to be written with search engines in mind and with the internet 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 keyword 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 keyword phrases for the site you're designing.

Laying out the copy with precise sentences, short paragraphs, bullets, and 2 or 3 columns are a few of the possibilities for formatting the rich content needed. 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 'beef.'

(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.)"

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

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 without getting their legs caught in somebody else's web.

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 Eratosphere .

Graphics navigation: USGiftshop.com and SupremeHits.net 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.

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

A Flash animation of bats flying around in the center of the page. Necessary? One could argue for or against that. Personally, while I think it's amusing, 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.

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

"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, JavaScript Primers, and more.]

Frames
Framed websites are often loaded 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 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:

Always provide links from your individual pages back into your site. Minimally, include at least one link to the site's main page (logo). Optimally, include the site navigation so visitors can click into various parts of your site as they wish.
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 Acrobat 5 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 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

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 many others.

Designing with search engines in mind can still allow you to be creative and shoot for the moon while also achieving better search engine rankings, too.

Click here for part 2 of 6: