Making AJAX SEO Friendly

On many blogs, SEO professionals say AJAX is evil in SEO, just in the same way Flash is*. But ask a Web2.0 designer/developer, AJAX is so cool that people will love it and stay on your site seeing the quick interactive visual feedback without any page reloading. Let’s look deeper into the possibility of making SEO and AJAX BFF.

[*Author’s note: This was originally written and posted online on December 12, 2007. A lot has changed from then and now how most people do AJAX (It mostly jQuery), and how Flash used to use to run. But still the rest of the blog post has good information still applicable today.]

Search Engine Friendly AJAX - SEFAJAX

What is AJAX?

AJAX is a term coined publicly by Jesse James Garrett of AdaptivePath meaning: Asynchronous JavaScript and XML. As posted on Wikipedia:

AJAX (Asynchronous JavaScript and XML), or Ajax, is a web development technique used for creating interactive web applications. The main intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page’s interactivity, speed, functionality, and usability.

AJAX is asynchronous in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made. Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers. There is, however, no requirement that the asynchronous content be formatted in XML.

AJAX is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it is based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.

Keeping the technical language to a minimum, the main observable benefit you have in running AJAX is having dynamic content load on your page without having the whole page to reload on a new URL. This gives you the benefit to only reload certain parts of a page making the resources load to a minimum aside from having it visually appealing to the user.

Problem 1: SEO Issues with Dynamic Content of AJAX

Search engines crawl websites using bots that are also called crawlers or spiders. These are nothing but programs that visit webpages on the Internet looking at all links and further visiting every valid link found crawlable. And content on the page is read and associated to the URL crawled.

Having that behavior, search engines will only be able to read the initially loaded content when the URL of the page is loaded. Any other content that loads by AJAX requiring a user click or some other event may not be read by the search engines.

Probably a good example of an AJAX site would be the Instant Domain Search. For every letter you type, new content is loaded. It loads fast and is appealing to people as they do not need to wait for a full page reload. Although all generated new content cannot be read by search engines.

Problem 2: Search Engine Crawling Problems of AJAX

Since search engines crawl websites looking at every link found on a page, search engines may not be able to check links going to other pages of an AJAX webpage. First of all, AJAX content does not need to reside on a different URL, it will have the same URL as how it loaded.
Normally a link going to a normal webpage may look like this:

  • <a href=”path/page.html”>text to click on</a>

And AJAX powered sites may have links in various forms like:

  • <a href=”javascript: functioname(content-parer);”>text to click on</a>
  • <a href=”#content-parer”>text to click on</a>
  • <a href=”javascript: void();” onclick=”functioname(content-parer);”>text to click on</a>
  • <a href=”#” onclick=”functioname(content-parer);”>text to click on</a>

Having your href value not a valid webpage will just be disregarded by search engines, even if you do have a way to let search engines see the dynamically loaded content, this will still be on the same URL where it has to really be separated.

For my example of this, let me show you the AJAX Powered Agile Photo Gallery  ScriptTiny AJAX SlideShow**. Their demo page shows one URL and that URL will never change when you view the other photos or check the other pages. Their link format uses a JavaScript function right in the href value of the link.

[**Author’s Note: The original example no longer exist, and the domain now shows a parking page. Although ScriptTiny’s previous and next buttons are JavaScript functions, the thumbnail links are real HTML files that search engines can crawl.]

Problem 3: Placing All Content On One Page Dilutes Keyword Focus

Instead of dynamically loading all content from a server-side scripting language or XML file, some people just place all content upfront and use JavaScript tricks to hide and display text. This may solve the problem of problem 1 issue mentioned above since there is no other content to crawl. And, in a way, solves the issue of problem 2 since there are no other links needed to be crawled. But, even if it solves these issues, the new problem of keyword focus arises.

Check the site of the popular Moofx All their main pages are all on one page and if you click on the bars, the content gracefully slides and, in reality, all content is already there and is not loading for every click on the page links. The content is just hidden using CSS and/or JavaScript techniques. In the case of Moofx it is not much of a big issue, but on other corporate sites with pages of various topics that should stand alone on their own page, this technique may not be ideal as the various keywords get all mixed up and loses keyword focus on a page.

Problem 4: Search Engines Spiders Do Not Read JavaScript Code

Depending on how your AJAX developer makes your web pages, they can make content being written by JavaScript or not. And, while it would be ideal to keep JavaScript to dynamically changing visual components of a page, it is not ideal to have JavaScript write the content itself using a document.write function. As much as possible, content and links of a webpage should be plain HTML text as much as possible. Search engines simply disregard the content written within the JavaScript code***.

[***Author’s Note: Since this was blog post was originally written in 2007, much has changed since then. In 2009 Google engineers: Kathrin Probst and Bruce Johnson announced the proposed headless browser at SMX East 2009. Since this was not yet implemented on the main crawler, those that wanted to participate in the testing of this, was recommended to add an exclamation point after the pound symbol in the URLs. Like in this format:!ajax-parers and this would signal to fire up the headless browser. And you can see several big websites applied this in their URLs  such as Twitter and Facebook during that year.]


The SEO Solution to the AJAX Problems


Solution 1: Serve Alternative Content

On a single page, if a navigational element is written by AJAX on every page load and is wrapped up in JavaScript, a solution can be having some alternative navigation on the page. Using footer links on a page for instance will work.

And for these alternative links, these should lead to actual pages on their own URLs that would load the same content as what would load in the AJAX links.

This way you please users with the visual appeal of AJAX and you still give alternative navigation and content that search engines can read and index. Where, if people get to visit these URLs, they will still be drawn to the AJAX pages.

Solution 2: Using Hijax – Graceful Degredation of AJAX

A concept first mentioned by Jeremy Keith of Clear:Left has an excellent presentation on this. His technique goes into the specific details of how AJAX should be written so that it degrades well with less AJAX capable browsers. In the same way Search Engines behave, just like a less capable browser. Here are some examples of his unobtrusive JavaScript example from his presentation:

  • JavaScript pseudo-protocol – Awful!
    <a href=”‘help.html’)”>contextual help</a>
  • Pointless link – Bad!
    <a href=”#” onclick=”‘help.html’); return false;”>contextual help</a>
  • Using the DOM – Better.
    <a href=”help.html” onclick=”‘href’)); return false;”>contextual help</a>
  • No inline JavaScript – Best!
    <a href=”help.html” class=”help”>contextual help</a>

He also talks about externalizing JavaScript and CSS code. Another major advantage of having a gracefully degrading AJAX website is not having the need to create alternative content. It is simply having only one content source that degrades well when JavaScript is disabled which is mainly how search engine spider behaves, like browsers with JavaScript disabled. One of the perfect examples I have seen implementing SEO friendly AJAX using Hijax techniques is on AjaxOptimize****.

[****Author’s Note: I was being discrete then with my association of this site in the past for whatever reason. Anyway, I will be open about it this time. I made the site AjaxOptimize and called my technique SEFAJAX.]

Image Credits: Image above was from Johan Bluezen/ from his blog post on the headless browser and configuring Jetty.

Some Side Story…

This blog post is an exact copy of a blog post I have written for another agency in the past. This former agency appears that they have moved in a different direction and has been concentrating on a different side of the online marketing business that they decided to remove not only my blog post, but the whole blog in general. Since this is still a good source of information, I am reviving the blog post being the author of the post since it has been offline for a year already.

The blog post has been a great resource for many other people, and I would say it was also the gateway to my first major speaking engagement when former Google Engineer Vanessa Fox who is best known for her work with Google’s Webmaster Tools, linked to my post as a resource when Jane and Robot used to exist. (Jane and Robot was an old website of Vanessa Fox together with Microsoft Program Manager Nathan Buggia). When I met Vanessa at PubCon in 2009 she asked me if I am willing to speak at a session at O’Reilly Found, a conference that didn’t push through, but lead me to SMX the same year and was on a session panel on CSS, AJAX and Web 2.0 technologies and how to do SEO. It was my first speaking engagement at a major SEO conference and almost didn’t make it, since I literally came in late and was super dizzy since exactly a day before SMX, I just flew in from the Philippines after speaking at SEMCon in Metro Manila. Walking in late in the conference, I had 7 minutes left to get my part done. I did my best to make the most out of it but still feels bad up to today coming late to that session.

– Benj Arriola

Comments are closed.