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.
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 FileBecause 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.
Figure 3.3. Place all your JavaScript files in this directory. In this example, the mouseover script is placed in the directory.
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 PageThis 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.
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 FilesUsing external JavaScript files benefits three different groups:
Therefore, using external JavaScript files makes your site more search engine friendly and user friendly. Specifying Alternative Content with the <noscript> TagThe <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 SpamUnfortunately, 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. |