Part 3. Page Design Workarounds

Introduction

Bells and Whistles That Can Hurt More Than Help

JavaScript and Search Engine Visibility

Cascading Style Sheets (CSS)

Frames and Search Engine Visibility

Flash Sites and Search Engine Visibility

Dynamic Web Pages

Server-Side Includes (SSI)

Optimizing PDF Documents

Conclusion

Introduction

Most companies already have existing web sites or are in the middle of redesigning their sites. Thus, building a completely new search engine “ friendly web site can be cost prohibitive. If you have an existing web site and have problems being listed well in the search engines, this section can help you modify your site to make it more search engine friendly.

Bells and Whistles That Can Hurt More Than Help

Flash, DHTML, JavaScript rollovers, style sheets, and animation can add style and pizzazz to a web site. They can help your site visitors understand the navigation scheme better and make a site easier to read. Thus, "bells and whistles" are not necessarily bad items to add to a site ”if they enhance the user experience.

However, bells and whistles can interfere with a search engine marketing campaign. Search engines always look for text on a web page, and some web site designs present the search engines with no text to index, as is the case with many Flash designs. Some site designs contain keyword-rich text, but some design and navigation choices do not give the search engine spiders easy access to that text.

Technical choices or methods for building a web site can also interfere with how well a search engine can spider a site. In other words, the design of Flash navigation buttons is not problematic for the search engines, but the actual Flash technology used to produce the navigation buttons is .

The best design solution involves planning. If you know your company is going to use search engine marketing as part of its online marketing strategy, creating search engine “friendly design templates can save your company considerable time and expense. However, if you already have a site and do not wish to modify its design too much, this section offers some simple page design workarounds that can help your site attain greater search engine visibility.

JavaScript and Search Engine Visibility

JavaScript is a programming language that enables web site designers to add flair and interactivity to their web sites. Some of the most common uses for JavaScript include rollovers/mouseovers, pop-up windows , form validation, and drop-down navigation menus . In fact, the use of JavaScript rollovers has become so widespread that they are now considered a standard part of web site design packages.

When a web designer uses JavaScript on a site's navigation scheme, the scripts can greatly decrease the crawlability of the links. Currently, most search engines do not follow the links embedded inside JavaScript code (including rollovers and menus), or they greatly limit the types of JavaScript-embedded links they crawl.

Some JavaScript code is more search engine friendly than other code. As a general rule of thumb, the simpler the script, the more likely a search engine spider can crawl the link.

Listing 3.1 shows a simple rollover script that is more search engine friendly than other scripts I have encountered . Though this script is not 100 percent search engine friendly, it is better than most of the scripts you find on web design software.

Web designers can put JavaScript in one of two places on a web page: between the <head> and </head> tags or between the <body> and </body> tags. In Listing 3.1, I am placing the script between the <head> and </head> tags.

Listing 3.1 Mouseover/Rollover JavaScript Placed Between the <head> and </head> Tags

<html> 

<head> 

<title>Organic green, oolong, and herbal tea from TranquiliTeas Organic 
Teas</title>   
<meta name="description" content="Get gourmet herbal, green, 
and oolong teas at wholesale prices from TranquiliTeas.  Organic tea 
importer offers decaffeinated herbal teas and other herbal blends. 
Black, oolong, green, and iced teas available as loose tea or in tea 
bags."> 

<meta name="keywords" content="organic teas green oolong tea herbal 
blends decaffeinated loose tea bags"> 

<script language="JavaScript" type="text/javascript"> 

// begin mouseover script 

if (document.images) { 

  imageon1 = new Image 
  imageoff1 = new Image 

  imageon1.src="images/homeon.gif" 
  imageoff1.src="images/homeoff.gif" 

  imageon2 = new Image 
  imageoff2 = new Image 

  imageon2.src="images/sitemapon.gif" 
  imageoff2.src="images/sitemapoff.gif" 

  imageon3 = new Image 
  imageoff3 = new Image

  imageon3.src="images/contacton.gif" 
  imageoff3.src="images/contactoff.gif"
 
} 

else { 

  imageon1 = "" 
  imageoff1 = "" 
  document.image1 = "" 

  imageon2 = "" 
  imageoff2 = "" 
  document.image2 = "" 

  imageon3 = "" 
  imageoff3 = "" 
  document.image3 = "" 
 
 } 
// end mouseover script 
// end hiding script from old browsers > 

</script> 

</head>

This script defines the "on" and "off" buttons in a JavaScript rollover. In Listing 3.1, if you place your cursor over the navigation button named homeoff.gif, the script changes that button to display the "on" button named homeon.gif. In Figure 3.1, on the ARCH Venture Partners site, the cursor is placed over the Our Portfolio Companies button; therefore, the "on" button is highlighted.

Figure 3.1. With a rollover or a mouseover, a graphic image is highlighted whenever the cursor is placed over it.

graphics/03fig01.gif

Many search engine marketing experts recommend placing the JavaScript within the body tags, specifically at the bottom of a web page right before the </body> tag. On the surface, this might seem to be a great solution because within the HTML code, the search engines have faster access to the text at the top of the page. Why? The spiders do not have to sort through all the JavaScript code before finding the code ”the body text and links ”that is most important to them. However, placing the JavaScript code at the bottom of a web page still can increase a page's download time, especially if the JavaScript code is longer than the actual HTML code and the page uses multiple scripts. So, what would be a better solution?

The External JavaScript File

Because search engine spiders are interested only in the visible body text on your web pages and the links that they can follow, they have no interest in a site's JavaScript code (unless you are using it to spam the search engines). Therefore, to decrease a page's download time for both the search engines and your site's visitors , do not place your JavaScripts on a web page. Instead, place all your JavaScript files in an external file whenever possible.

To do this, take all the content between the <script> and </script> tags and copy it into a text editor. In the aforementioned TranquiliTeas web page, resulting HTML code on the web page now looks like Listing 3.2.

Listing 3.2 The HTML Code from TranquiliTeas

<html> 

<head> 

<title>Organic green, oolong, and herbal tea from TranquiliTeas Organic 
Teas</title> 

<meta name="description" content="Get gourmet herbal, green, 
and oolong teas at wholesale prices from TranquiliTeas.  Organic tea 
importer offers decaffeinated herbal teas and other herbal blends. 
Black, oolong, green, and iced teas available as loose tea or in tea 
bags."> 
<meta name="keywords" content="organic teas green oolong tea herbal 
blends TranquiliTeas decaffeinated loose tea bags"> 

<script language="JavaScript" src="scripts/mouseover.js" 
type="text/javascript"> 

</script> 

</head>

In the text editor, the mouseover/rollover script looks like the following:

// begin mouseover script 

if (document.images) { 

  imageon1 = new Image 
  imageoff1 = new Image 

  imageon1.src="images/homeon.gif" 
  imageoff1.src="images/homeoff.gif" 

  imageon2 = new Image 
  imageoff2 = new Image 

  imageon2.src="images/sitemapon.gif" 
  imageoff2.src="images/sitemapoff.gif" 

  imageon3 = new Image 
  imageoff3 = new Image 

  imageon3.src="images/contacton.gif" 
  imageoff3.src="images/contactoff.gif" 
} 

else { 

  imageon1 = "" 
  imageoff1 = "" 
  document.image1 = "" 

  imageon2 = "" 
  imageoff2 = "" 
  document.image2 = "" 

  imageon3 = "" 
  imageoff3 = "" 
  document.image3 = ""  
 } 
// end mouseover script 
       // end hiding script from old browsers -->

Save this file with a name that is easy for you to remember, such as mouseover.js or rollover.js. Place this file and all other scripts in a subdirectory called scripts on your web server, as shown in Figures 3.2 and 3.3.

Figure 3.2. Create a subdirectory called scripts on your web server.

graphics/03fig02.gif

Figure 3.3. Place all your JavaScript files in this directory. In this example, the mouseover script is placed in the directory.

graphics/03fig03.gif

The next step is to instruct the search engine spiders not to crawl the contents of your JavaScript files, which you do using the Robots Exclusion Protocol. To do this, type the following into a text editor:


User-agent: *

Disallow: /scripts/

Name the file robots.txt, and place this file in the root directory, as was shown in Figure 3.2.

Using Multiple Scripts on a Single Web Page

This search engine strategy works for all the scripts on a web page. For example, using the TranquiliTeas site, let's say the web site owner wants to have a mouseover effect and pop-up windows on the home page. The resulting HTML would look like Listing 3.3.

Listing 3.3 Mouseover Effect and Pop-Up Windows for TranquiliTeas

<html> 

<head> 

<title>Organic green, oolong, and herbal tea from TranquiliTeas Organic 
Teas</title> 

<meta name="description" content="Get gourmet herbal, green, 
and oolong teas at wholesale prices from TranquiliTeas.  Organic tea 
importer offers decaffeinated herbal teas and other herbal blends. 
Black, oolong, green, and iced teas available as loose tea or in tea 
bags."> 

<meta name="keywords" content="organic teas green oolong tea herbal 
blends decaffeinated loose tea bags"> 

<script language="JavaScript" src="scripts/mouseover.js" 
type="text/javascript"> 

</script> 

<script language="JavaScript" src="scripts/popups.js" 
type="text/javascript"> 

</script> 

</head>

Then place the pop-up JavaScript in a text file and name it something easy to remember, such as popup.js. Place this file in the scripts subdirectory on your web server, as shown in Figure 3.4.

Figure 3.4. The mouseover and pop-up scripts are placed in the scripts subdirectory on your web server.

graphics/03fig04.gif

Because you have already placed instructions in the robots.txt file to exclude all files in the scripts subdirectory, there is no need to modify the robots.txt file every time you add a new script to your web pages.

Benefits of External .js Files

Using external JavaScript files benefits three different groups:

The external files decrease the download time for your site visitors because the scripts are downloaded only once and cached in your browser. After your visitors have the scripts cached, they do not have to download them again whenever they visit other pages on your site that use the same scripts.
The download time for your web pages decreases when a search engine spider requests web pages from your server. After the Robots Exclusion Protocol is placed on all the external JavaScript files, the search engines access only the text and links on your web pages. They ignore the JavaScript in the external files.

Many search engine marketers do not take into account download time when designing and marketing web sites. Search engine spiders do not wait for huge pages to download on web servers. A long download time often indicates spam or the database feeding the spider an infinite number of URLs, thus crashing the spider. Thus, the faster your pages download, the more spider friendly they are.
The external files benefit your design team because if they need to modify a script, they need only modify the script in a single document as opposed to every page on your site, saving them time and money.

Therefore, using external JavaScript files makes your site more search engine friendly and user friendly.

Specifying Alternative Content with the <noscript> Tag

The <noscript> tag provides alternative content for browsers that do not support JavaScript and for visitors who have disabled JavaScript while surfing the web. The <noscript> tag, if used, is placed between the <head> and </head> tags. The HTML code in Listing 3.4 shows the proper coding for the <noscript> tag in the fictional TranquiliTeas web site.

Listing 3.4 Coding for the <noscript> Tag

<noscript> 

<h1>Organic green, oolong, and herbal tea</h1> 

TranquiliTeas Organic Teas offers a wide range of gourmet organic teas 
at wholesale prices. 

To view our selection of choice organic teas, please select one of the 
links below: 

<ul> 

<li><a href="herbalteas.html>Herbal teas</a></li> 
<li><a href="greenteas.html>Green teas</a></li>   
<li><a href="oolongteas.html>Oolong teas</a></li> 
<li><a href="blackteas.html>Black teas</a></li> 
<li><a href="teasets.html>Tea sets and accessories</a></li> 
<li><a href="teas.html>teas</a></li> 

</ul> 

If you would like more information about our organic teas or would like 
to order one of our catalogs, please fill out our <a 
href="contact.html">contact</a> form or call us at 1-800-XXX-XXXX. 

</noscript>

The <noscript> Tag and Spam

Unfortunately, many unethical search engine marketers discovered that they could hide text on a web page by using the <noscript> tag, even though the actual web page does not contain any JavaScript. Some search engine marketers abuse the <noscript> tag in an attempt to boost rankings. Never use this tag to hide any unrelated content or links that you would not otherwise show to your end users.

Because of the widespread abuse of this tag, most of the search engines either ignore or decrease the relevancy of the text inside the <noscript> tag. Additionally, most end users never see the content inside the <noscript> tag. Except for the title tag (which is not really hidden), the search engines ignore all hidden tags ”or at least do not use them to determine relevancy.

Adding all this extra HTML code inside the <noscript> tags can significantly increase the download time of your web pages. Therefore, before adding any type of JavaScript and <noscript> tags to your site, determine whether the extra code is necessary. If JavaScript is written well, the <noscript> tag is unnecessary. Many sites get plenty of qualified traffic from the search engines without any JavaScript in the site design.