Search Engine Optimization with Java Script

Drawbacks of JavaScript in Respect to Search Engine Optimization

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

These will not be visible to those with JavaScript-enabled browsers, while at the same time being accessible to search engines.

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.

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. 

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