Search Engine Optimization Part 2: JavaScript Progressive Enhancement
As Ajax and DOM Scripting have become en vogue, blind zeal and un-enlightened use of powerful code libraries have caused many to build web sites that may impress visitors with elaborate effects, but adopt a 1998 approach to development, ignoring accessibility and search engine optimization. I've fallen into that trap myself at times. It's awfully tempting to focus on seductive interface design effects that will create an interesting user experience for some, and alienate others. If your site/web application uses JavaScript to navigate, or to dynamically load in/create content critical to the user experience, then it should take measures to gracefully degrade for search engine spiders and visitors using alternative devices to access the content. If you are not building your pages to gracefully degrade, your content is invisible to search engines.
Jeremy Keith, Bruce Lawson, Rob Cherney, and many other JavaScript developers have been advocating best practices that address this issue for some time. It seems 2006 was the year we sobered ourselves after binging on inaccessible scripting techniques. Many great articles were published bringing us back to our senses, preventing us from repeating our terrible development practices of the pre-standards 90's. The resolution to the problem is to progressively enhance a web site that functions properly without JavaScript support.
Rob Cherney demonstrates how to progressively enhance an HTML form that will function with JavaScript turned off, and will be enhanced if JavaScript is available. I'll demonstrate how to progressively enhance a text link that makes an Ajax call to the server. If JavaScript is enabled, the href attribute is disabled and Ajax will load content from another source into a div for display. If JavaScript is disabled, the hyperlink works as usual, and directs the browser to another page where the same content is viewable. A fancy interactive, animated interface created with DOM scripting could use this approach, and gracefully degrade to a typical multi-page site that search engine spiders would have no trouble crawling.
A hyperlink can be easily disabled with a "return false" event as is seen below.
-
<a xhref="page.php" onclick="ajaxTest(); return false;">Have Your Cake and Eat It Too</a>
The onclick event will call a function then return false, preventing the hyperlink from firing. This is a very simple demonstration of progressive enhancement in action, but we can do better still. A search engine spider would navigate to page.php where it could find more content to index, but in a real world implementation of this technique, it would be advisable to attach an event to the hyperlink unobtrusively from an external script rather than from an event handler that mixes behavior and structure. By assigning a class to the link and using JavaScript to find elements with this class name you can separate behavior and structure resulting in more maintainable code, and external code that can be cached or even skipped by search engine spiders resulting in faster parsing (spiders appreciate this). I'll take the functionality a step further to display Ajax retrieved content in a div tag when the link is clicked.
-
<script type="text/javascript">
-
-
function attatchLinkBehavior(){
-
if (document.getElementsByTagName) {
-
var links = document.getElementsByTagName("a"); // Find all links in page
-
for (var i=0; i <links.length; i++) {
-
if (links[i].className.match("progressive")) { // find all links with class "progressive"
-
links[i].onclick = function() { // Attach event to link
-
var targetArea = this.getAttribute("rel"); // Area to display Ajax retrieved content
-
loadContent(targetArea); // Call Ajax function
-
return false; // Disable hyperlink
-
};
-
}
-
}
-
}
-
}
-
-
function loadContent(targetArea){
-
// Do your Ajax call here
-
}
-
-
attatchLinkBehavior();
-
-
</script>
The id of the div is placed in the link tag using the rel attribute indicating the area to place the content returned by the loadContent() function. When attaching the click event to all hyperlinks with the class "progressive", the function also finds the id of the div where the Ajax content will display and passes it on the loadContent() function.