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.



Search Engine Visibility
Search Engine Visibility (2nd Edition)
ISBN: 0321503244
EAN: 2147483647
Year: 2003
Pages: 111
Authors: Shari Thurow

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net