Mar 2, 2010 | 7 minute read

Build SEO-Friendly JavaScript Menus

written by Armando

JavaScript can transform an otherwise static navigation menu into a feature-rich and interactive user interface that is both pleasing to use and helpful. But, if poorly executed JavaScript can also hide content from search engines, making a site harder to find, which in turn can be devastating for site traffic.

The difference between an effective JavaScript menu—that helps visitors easily navigate the site and helps search engine spiders index it—and one that hides content can be as simple as how the JavaScript is written and implemented. So why is this the case?

JavaScript Is A Client-Side Language

As you probably know, JavaScript is an object-based scripting language that primarily runs in the client, which is typically a web browser. Because the heavy lifting is done on the client-side, JavaScript can add a level of interactively that is often hard to match with other scripting languages or programming choices—even updating a page’s content right in the client. It is for this very reason that asynchronous JavaScript and XML (AJAX) has become so popular in the past couple of years.

But being a client-side language also means that it is possible to write JavaScript in such a way that search engine spiders, which are typically very-basic clients, cannot interpret the script or find the content and links it includes.

When JavaScript Goes Bad

For example, here is a short bit of code that will produce a super simple HTML page, which is completely invisible to most search engine spiders.

<!DOCTYPE html>

<head>

<title>Some Title</title>

document.write("This Is Not SEO-friendly JavaScript");

</script>

</head>

<body>

</body>

</html>

Notice that there is absolutely nothing between the opening and closing body tags. All of the content is trapped inside of the JavaScript in the document head.

The resulting web page would display the phrase “This Is Not SEO-friendly JavaScript” to visitors with JavaScript enabled, but visitors that did not have it enabled and search engine spiders would almost certainly see nothing at all. Blank white space.

Inline JavaScript Can Be Even Worse

As if the example above was not bad enough, there are worse ways to implement JavaScript, where search engine optimization (SEO) is concerned. Perhaps, the best examples of how not to code JavaScript come from Jeremy Keith’s 2006 XTech presentation, Hijax: Progressive Enhancement with AJAX. Keith is actually encouraging the separation of site content, presentation, and behavior in a way that focuses first on developing good content and then presenting that content to users. In the process of explaining what to do, he shows us what not to do, too. These examples are Keith’s. The explanations mine.

Example One: Inline JavaScript Pseudo-Protocol

<a href=”javascript:window.open(‘help.html’)”>contextual help</a>

In a browser with JavaScript enabled, example one would produce a link that opened a new page, help.html, in a new window. Unfortunately, for a search engine spider, the link would almost certainly lead to nowhere. Sorry, Google won’t be indexing help.html today.

Example Two: Inline JavaScript that Creates A Pointless Link

<a href=”#” onclick=”window.open(‘help.html’); return false;”>contextual help</a>

Again, a JavaScript-enabled browser would get a link which opens help.html, but again search engine spiders and users whose browser does not support JavaScript cannot get to help.html at all.

Example Three: Inline JavaScript that Uses the Document Object Model (DOM)

<a href="help.html" onclick="window.open(this.getAttribute('href')); return false;">contextual help</a>

Example three is the first code snippet to at least offer something to search engine spiders. This link will work for SEO, but it is still not ideal. Rather we would like to see something like this:

Example Four: No Inline JavaScript

<a href="help.html">contextual help</a>

This example includes no JavaScript at all. Search engine spiders, which love HTML, can index it easily, and we can still get the exact same effect by writing an external JavaScript that references this element.

function doPopups() {

if (document.getElementsByTagName) {

var links = document.getElementsByTagName("a");

for (var i=0; i < links.length; i++) {

if (links[i].className.match("help")) {

links[i].onclick = function() {

window.open(this.getAttribute("href"));

return false;

};

}

Start With the HTML and Modify It With an External JavaScript

From an SEO and best practices perspective the proper way to integrate JavaScript into a website is by using external or isolated scripts that constitute a behavior layer.

To really bring this point home, I’ll show you how to create an SEO-friendly JavaScript menu using HTML, CSS, and the jQuery library. I’ll start with the content and add the functionality as we go, focusing on why this method is best for SEO.

The left-hand navigation on this site takes advantage of the jQuery accordion widget. From a user standpoint, it neatly categorizes the site content, and allows a shopper to get more information about a particular category when she wants it.

To get this site up and running, I start by coding the HTML.

<!DOCTYPE html>

<head>

<title>SEO-Friendly JavaScript Menu Example -- Get Elastic</title>

</head>

<body>

<div>

<h1>Example Website</h1>

</div>

<div>

<h3><a href="section1.html">Section 1</a></h3>

<div>

<ul>