Optimizing a JavaScript Site for Search Engines

In my article, “Optimizing Your Flash Site for Search Engines,” I mentioned my number one nemesis of SEO: JavaScript. While Flash can be read by some search engines, JavaScript absolutely cannot. I can understand the functionality and usability of JavaScript, but as an SEO, it makes my life miserable. Besides just optimizing it, I have to try and explain to a client why their website might not be as successful as they had hoped in the search engine results pages (SERPS).

As an SEO, I feel it is my duty and obligation to try and talk a client out of using JavaScript unless it is absolutely necessary.  Using JavaScript for rollover links, navigation or even manipulating browser objects simply is NOT necessary in my book.  But part of my job is also to use what is given to me, and make the most of it.  It seems I do a lot of whining about JavaScript, but ultimately, I bear down, and do what it takes to optimize a JavaScript website.

Originally, I joked with the editor on initially writing this article as having two tutorials: the short one and the long version.  The short version:  DON’T DO IT!!  All joking aside, it is important that you know right away that search engines cannot, and will not, read JavaScript.  The long version is what I will be discussing with you today.  In this article, I will explore options you have if you decide you must use JavaScript in your site functionality to optimize your site for search engines.

First, I want to look at why you might want use JavaScript in your website, and what its benefits are.

Functionality of JavaScript

JavaScript can provide functionality and interactivity to a web site like no other scripting language can.  It’s relatively easy to understand, and a lot of people like it, because you can add snippets of code to a web page without having to utilize the resources of the web server.  JavaScript is client-side code.  Client-side code is scripts that are executed by a visitor’s browser instead of at the server. 

The benefits of JavaScript are numerous, but the main benefits are server resource conservation.  Being able to validate user input without having to send the input back to the server for validation is one of the prime examples of this.  Server-side verification could be a time consuming process, as well as an increase on server load, network and web resources.  Another benefit of JavaScript is when used properly, it helps conserve bandwidth.  Conserving bandwidth is also important for server resources.  By operating on the client-side, web pages and forms with JavaScript can speed up not only validation, but also with page load times.

Figure-1: A simple date script written in JavaScript shown in a web page

{mospagebreak title=Drawbacks of JavaScript in Respect to SEO}

Drawbacks of JavaScript in Respect to SEO

1.  Cannot be read by search engine spiders

I mentioned one of the drawbacks of JavaScript with regards to SEO in my first paragraph of this article: search engines cannot read JavaScript.  In fact, search engines have a very difficult time understanding client-side code in general.  This means anything you put into JavaScript, including content, links, and other information, is simply not accessible to search engine spiders.

2.  Text to Code Ratio

Large amounts of code in the web page gets in the way of textual content.  When the search engine spider has to wade through lines and lines of code just to reach the true content of the page, then it’s never a good thing.

Text to Code ratios are measured by dividing the amount of actual content text that is search engine readable by the total number of words on the web page.  So if you have code like in Figure-2, then your content to code ratio will be very low indeed.

Figure-2: Top half of the source code for the webpage in Figure-1

It is not known for sure what exact percentage of text to code your ratio should measure.  However, we do know that more is always better.  The higher the ratio percentage, the better your chances of being matched with relevancy in a search engine query.  On top of that, the more text you have in your webpage, the better chance you have of being able to include your keywords without over-optimizing the page.

Figure-3: Text to Code Ratio for example web page

{mospagebreak title=Content Positioning}

3.  Content Positioning

Large sections of JavaScript can also have the same effect as tables. The search engine attempts to read this information first, which causes the normal HTML text to appear lower on the page.

Search engines read web pages from top to bottom, just like you or I do.  However, search engines place a greater weight on text at the top of the page than at the bottom.  When you have great amounts of JavaScript that pushes the content way down on the page, this can reduce your relevancy score.


Notice in the picture how far down the actually body of the page is.  Also notice the scrollbar on the side; this tells you that the body of the page only comprises the lowest 1/5th of the page.  What this means to the search engines is this:  Whatever you had to say at the top of the page is more important than what is at the bottom; since the search engine spider cannot read what is supposed to be “important,” it assumes that your relevancy to search queries is not enough to list in the SERPs, and probably will not even list you there.

Some “expert” SEOs have determined that simply placing the JavaScript near the bottom of the page has a better impact on the way that the code is scanned.  While initially the content positioning is important, it still does not minimize the work the spider has to do.  There is no way for the search engine spider to know that there isn’t more content below the JavaScript, even if it is on the bottom of the page.

{mospagebreak title=Keyword Density, Navigation, Link Strategies}

4.  Keyword Density

Keyword density is the ratio of keywords in a web page divided by all the words in the page; both text and code alike.  The more of your code, text, and content that is written in JavaScript, the less density your keywords will have.  If you have several hundred “words” of JavaScript code in a page, the keyword density is going to be much lower, just like your overall text to code ratio was. That means that some search engines will decide that your page is less relevant, and not return your page in the process of a search query due to your low keyword density.

5.  Navigation

Many webmasters with websites written in JavaScript incorporate navigation links into JavaScript as well.  Since search engines do not read JavaScript, then it will not be able to follow the internal navigation of the site.  While rollover effects are cool, it simply is not necessary to use search engine unfriendly JavaScript for this.

6.  Link Strategies

Links that are written in JavaScript might have great anchor text, but if it is unreadable by a search engine, then it makes absolutely no difference whatsoever what your anchor text is, or even how it relates to your content and keywords.

{mospagebreak title=Functionality and Optimization}

Functionality and Optimization

So how do you combine the benefits of optimization with the value and functionality of JavaScript?  There are a few things you can do to improve your overall SEO value of your site, even with JavaScript.

1.  Off-load your JavaScript

The best way to optimize a page with JavaScript is to move the code to an external file, then simply point to it in your HTML.  Let’s compare some code.  The following example is a web page with JavaScript to display the current date, as you saw in Figure-1.  The first example shows the code directly in the HTML header.

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My Website</title>
<script language=”javascript” type=”text/javascript”>
function GetDay(nDay)
 var Days = new Array(“Sunday”,”Monday”,”Tuesday”,”Wednesday”,
 return Days[nDay]

function GetMonth(nMonth)
 var Months = new Array(“January”,”February”,”March”,”April”,”May”,”June”,
 return Months[nMonth]     

function DateString()
 var Today = new Date();
 var suffix = “th”;
 switch (Today.getDate())
  case 1:
  case 21:
  case 31:
   suffix = “st”; break;
  case 2:
  case 22:
   suffix = “nd”; break;
  case 3:
  case 23:
   suffix = “rd”; break;

 var strDate = GetMonth(Today.getMonth())+ ” ” + Today.getDate()+ “, ” ;
              if (Today.getYear() < 2000)
                strDate = strDate + (Today.getYear() +1900);
               strDate=strDate + Today.getYear();
 return strDate;

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. </p>

Example 1: JavaScript Date Function directly in HTML

Placing this code in the HTML of your web page not only takes up a lot of space, it forces the search engine spider to wade through many lines of code, affecting your text to code ratio, your keyword density, and your content positioning.

{mospagebreak title=Move the Code}

Now, let’s move the JavaScript to an external file.  Open a text editor, like Notepad; cut and paste the section of code right after the <!– symbols and right before the //–> symbols into your editor.  Save your file, making sure to name it something like date.js, using the drop down box in your text editor to save as all files, not *.txt.

Figure-5: Save As *.js

Now, you need to point the browser to the off-loaded script by referring to it in your HTML file like in the next example.

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My Website</title>
<script src=”date.js” language=”javascript” type=”text/javascript”></script>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.</p>

Example-2: JavaScript Date Function off-loaded

So by using an external JavaScript file, you now have 10 lines of code instead of over 50 lines, with exactly the same end result.  By off-loading your JavaScript, you get the same date function in the corner of the webpage, like in Figure-1, as well as eliminating over 40 lines of code in your HTML that the search engine spider would just disregard anyways.  Plus, you’ve moved your important content farther up in your page where it receives more weight of relevancy by a search engine during a search query, as well as giving your keywords better density, and your page an overall better text to code ratio.

Figure-6: New Ratio with off-loaded JavaScript

{mospagebreak title=Navigation and Effects}

2.  Navigation and Effects

You can accomplish some of the same functionality of using JavaScript by using an external stylesheet.  Let’s take hover effects with text links, instead of rollovers or mouse-overs for example.  CSS in an external file could easily take care of your JavaScript navigation issues, as well as your link strategy problems; while at the same time giving you rollover effects.  Text links with keywords as anchors should be your number one choice for navigation in the world of SEO.

“Ok,” so you say, “text links are ugly, boring, and my site visitors want some wow-factor when they view my website.  What if I want or feel that I need to have a DHTML or JavaScript Menu?”  Well, short of responding that this is not really your best SEO choice, you’ll have to find another way of alerting the search engines to your navigation schema while keeping your dynamic menus.  Even SEOs know that very visually stimulated people want to either interact with the site, or be entertained.  But if you want to have the pretty horizontal slide menu and the SEO navigation benefit, too, then you will make sure you have text navigation links as well; better yet, use breadcrumb navigation.  “Breadcrumb Navigation” is named for the fairy tale “Hansel and Gretel.”  Remember, the two children laid a trail of breadcrumbs to help them remember how to get back home?  This is the same with these so-named breadcrumb navigation links which either shows the path or the location of the current document being viewed, and how to get back where the visitor came from.

Remember that search engines still cannot read JavaScript, and won’t follow navigation in your dynamically created menus.  So, in order to enable the spider to follow the links to the rest of your site, make sure there are regular HTML links throughout the body of your page, in addition to implementing footer, side, or top navigation, as well as breadcrumb navigation.  Even if your breadcrumbs are dynamically generated, they still should end up as text links or a textual representation of a site’s structure.

{mospagebreak title=Noscript Tags}

3.  The <noscript> Tags

In addition to multiple navigation menus and breadcrumb trails, you could also make use of the <noscript> tags.  We almost have to treat search engines with regard to JavaScript on our web pages as we would for those people with older browsers or for visitors with their JavaScript disabled.  Add your navigation links between the <noscript> tags like the example shown below.  These will not be visible to those with JavaScript-enabled browsers, while at the same time being accessible to search engines.

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My Website</title>
<script src=”date.js” language=”javascript” type=”text/javascript”></script>
<noscript>Your browser does not support JavaScript!</noscript>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. </p>

Example-3, The use of the <noscript> tags

If your page did not contain any breadcrumb and/or bottom navigations, without the help of the <noscript> tag, your web pages would be completely inaccessible to the search engine spiders, and any other browser and user-agent with disabled JavaScript.  The <noscript> tag, if used, is placed between the <body> and </body> tags, though some designers place it between the <head> and </head> tags.  Instead of using the <noscript> tag for the statement, “Your browser does not support JavaScript!” you should make use of this for your important navigation links and anchor text.

A layout of the main navigation links in plain HTML between the <noscript> tags can be a valuable way of assisting the search engine spider in accessing the most important pages of the site.  Another method is to link the sitemap, accomplishing nearly the same thing.  I would caution you, however, not to depend solely on the <noscript> tag to perform the same SEO tasks that any other webmaster has to follow, such as valid anchor text and clear internal navigation.  Many unscrupulous webmasters in the past have abused the <noscript> tags, and now some search engines disregard the text placed between the <noscript> tags altogether.  If you don’t have the other SEO factors in order, then the <noscript> tag will not save you or your site from dropping into search engine obscurity.

{mospagebreak title=Your Sitemap}

4.  Have a textual sitemap

It’s always a good idea to implement a sitemap, whether you use JavaScript or not.  Clear navigation is the point here, and while some search engines will disregard the <noscript> tags, optimizers sometimes put a link to a textual sitemap in between them.  I usually recommend that clients place a link to their sitemap in the bottom or footer navigation bar, just in case; and especially if the site has any JavaScript links. 


Whatever your use of JavaScript might be; whether you prefer this client-side code because of its server resource conservation properties, or you like the dynamic ability and functionality that the code has when presenting your website to your visitors, one thing remains true.  Search engines, while changing almost daily, do have some constants; and one of those constants is that they still cannot read client-side code like JavaScript.

Having good READABLE content positioned properly on the page, clear navigation, and many relevant backlinks is still the only winning SEO combination, and it will be this combination that will get you indexed in the SERPs.  I cannot stress enough that trying to slide on these basic principles is not a good idea.  And while I’m sure you can respect this opinion, you also know by now that all hope is not lost in optimizing JavaScript pages.  Use external files, text links, and a site map, and you will probably be just fine.

Google+ Comments

Google+ Comments