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>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Some Title</title>
<script type=”text/javascript”>
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.
Figure One: The Site We Will Be Building
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>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>SEO-Friendly JavaScript Menu Example — Get Elastic</title>
</head>
<body>
<div>
<div>
<h1>Example Website</h1>
</div><!–end header–>
<!– Accordion –>
<div>
<div>
<h3><a href=”sectioэ.html”>Section 1</a></h3>
<div>
<ul>
<li><a href=”someurl.com”>List item one</a></li>
<li><a href=”someurl.com”>List item two</a></li>
<li><a href=”someurl.com”>List item three</a></li>
</ul>
</div>
<h3><a href=”section2.html”>Section 2</a></h3>
<div>
<ul>
<li><a href=”someurl.com”>List item one</a></li>
<li><a href=”someurl.com”>List item two</a></li>
<li><a href=”someurl.com”>List item three</a></li>
</ul>
</div>
<h3><a href=”section3.html”>Section 3</a></h3>
<div>
<ul>
<li><a href=”someurl.com”>List item one</a></li>
<li><a href=”someurl.com”>List item two</a></li>
<li><a href=”someurl.com”>List item three</a></li>
</ul>
</div>
<h3><a href=”section4.html”>Section 4</a></h3>
<div>
<ul>
<li><a href=”someurl.com”>List item one</a></li>
<li><a href=”someurl.com”>List item two</a></li>
<li><a href=”someurl.com”>List item three</a></li>
</ul>
</div>
<Г><a href=”section5.html”>Section 5</a></Г>
<div>
<ul>
<li><a href=”someurl.com”>List item one</a></li>
<li><a href=”someurl.com”>List item two</a></li>
<li><a href=”someurl.com”>List item three</a></li>
</ul>
</div>
</div>
</div>
<div>
<img src=”images/hero.jpg” alt=”50% off on all pumps” />
</div><!–end main–>
<div>
&copy Armando Roggio 2010, all rights reserved, etc.
</div><!–end footer–>
</div><!–end Wrapper–>
</body>
</html>
The code should look very simple and very straightforward. It is just HTML, the sort of stuff that search engine spiders love. We’ve also taken care to provide a title, for SEO purposes, and make use of h1 and h3 tags, which can help search engines understand what’s important on a page. You will notice that I even added some alternate text to my image.
Furthermore, all of the links, all of the content is readily available to a search engine spider. This site is ready to be indexed.
Next Add Style
With the site content in place, it is time to style it. I’ll use two separate CSS files for this presentation layer. The first file, jquery-ui-1.7.2.custom.css, is the jQuery UI file I downloaded from the jQuery site. It styles the dynamic classes that our JavaScript will add to the site in the client. The second file, style.css, is my home grown CSS that styles the other page elements.
Both CSS files are in a CSS folder and can be called into our document by adding two familiar lines of code to our page. The CSS is SEO neutral, so provided that I don’t do anything sneaky, like trying to cloak content from user, this should have no effect on how easy or difficult the page is to index.
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.7.2.custom.css” type=”text/css”/>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen” />
Add Interactivity With JavaScript
Our content and presentation layers are in place and neatly separated. Search engine spiders have clear and clean access to the HTML, and our site is a good candidate for indexing, so it’s time to add some JavaScript for functionality.
We are going to need three separate JavaScripts, including the jQuery library, the jQuery UI, and some JavaScript to call our widget into action.
I downloaded the jQuery library and the UI file from the jQuery site. I added these files to the site hierarchy, and called them into or HTML with some familiar code.
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”/></script>
<script src=”js/jquery-ui-1.7.2.custom.min.js” type=”text/javascript”/></script>
External JavaScripts can, of course, be added in the head, but to follow the most recent trends in site development, I am going to place the JavaScript just above the closing body tag, ensuring that all of the site content is loaded before my scripts come into play.
The final bit of JavaScript I need looks like this:
$(function(){
// Accordion
$(“#accordion”).accordion({ header: “h3″, event: “mouseover” });
});
I write this code in a file called accordion.js, and call this file into the HTML page just like the jQuery files.
<script src=”js/accordion.js”/></script>
Summing Up
It is possible to use JavaScript to add interactivity to your sites and creating a good user experience without compromising your site’s SEO. The key is to write your JavaScript in such a way that your HTML holds all of the links and content on one layer, while your JavaScript manages the interactivity on a separate (usually external) behavior layer.
If you’re interested, you can download the source files for this post
This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.
Original post by Armando Roggio
Earlier this week, Google offered a free download of its own SEO Report Card, an open and honest document that grades around 100 of Google’s own “products” (think Youtube, Maps, Adwords, Reader, Blogger etc). While it may satisfy your curiosity on how well the Big G does at SEO itself (seasoned search pros may snicker that only 10% are using the title tag properly), it can also help you audit your own website. Topics covered include search result presentation, URLs and redirects and on-page optimization.
In spite of what you may have heard, it is possible to have both engaging Flash content and happy search engine spiders.
O’Reilly recently published 
This post was originally published in August 2008 and is part of our Get Elastic rerun series.
Wanna do some extremely cheap (free) and fast market research? As lovely as 
Search engines don’t just spend their energies trying to outsmart webmasters (or rather, SEO practitioners) — they also give back to the webmaster community. Webmaster tools offered by Google, Yahoo and MSN, help site managers identify various problems with their sites, along with other features.
I returned this weekend from a week’s holiday and for the first time in 2 years, I didn’t take my laptop with me on vacation. (The magic of Wordpress’ scheduled posts kept Get Elastic alive while I was gone). With 250+ blog posts chilling in my RSS reader, I couldn’t wait to catch up on what I missed in the world of retail, marketing and tech geekery.
Welcome to PPC Myth week! Today is the first installment of a 3 part series challenging common misconceptions about search marketing and analytics.
Subscribe to our feed