Typically, SEO gurus consider JavaScript as one of the top ten things to avoid when optimizing your site. Why?
- It adds load time, especially if not loaded properly (synchronously, or over many HTTP connections)
- The text within is not seen by the search engine
- When it lies in inline within your HTML, it saturates your code-to-copy ratio
- It can be used for evil, hiding content that was created just for SEO purposes
There are probably more reasons, I'm not an SEO expert. But, let's think about how JavaScript can be a positive SEO asset, if used carefully.
When I first used Google's Webmaster tools to check the SEO "health" on one of my sites, I was disappointed to find that Google had indexed many terms which were completely irrelevant to the content on my site. The problem was that they appeared to be prominent terms. The content in question was this:
<ul class="tabs">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
When styled with CSS and brought to life with JavaScript, the code above actually produced a nice looking tabbed interface, with three tabs. When I created this content, I was well aware that it would not degrade gracefully if the user's browser didn't have JavaScript enabled. I should have stopped right there and gone a different direction. But, I went on my merry way, saying to myself, "there's so much on this site that requires JavaScript, why bother making this one tabbed interface degrade gracefully?".
What I didn't consider was the SEO factor. Those terms, Option 1, Option 2, Option 3 were completely unconnected to the content and were being indexed as important keywords. This is when I realized that JavaScript could actually be of value as an SEO tool. Although it can't be used to provide any positive SEO value, it clearly can be used to prevent some negative.
By using JavaScript alone to create the tabbed elements, the content is never introduced in the site, and hence not seen by the search engines:
var html = '<ul class="tabs"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>';
document.getElementById('tab-wrapper').innerHTML = html;