How to Make Ajax Applications Google-CrawlableBy Craig Buckler
Ajax changed the Web. Microsoft pioneered the technologies back in 1999, but an explosion of Web 2.0 applications appeared after Jesse James Garrett devised the acronym in 2005.
It’s enough to make an SEO expert faint.
Google to the rescue?
Google has devised a new technique to make Ajax applications crawlable. It’s a little complex, but here’s a summary of the implementation.
1. Tell the crawler about your Ajax links
Assume your application retrieves data via an Ajax call to this address:
You’d need to modify that URL and add an exclamation mark following the hash:
2. Serving Ajax content
The Google crawler will translate your Ajax URL and request the following page:
Note that arguments are escaped; for example, ‘&’ will be passed as ‘%26’. You will therefore need to unescape and parse the string. PHP’s
urldecode() function will do nicely.
Your server must now return a snapshot of the whole page, that is, what the HTML code would look like after the Ajax call had executed. In other words, it’s a duplication of what you would see in Firebug’s HTML window following a dynamic update.
That’s the essence of the technique, but I’d recommend reading Google’s documentation — there are several other issues and edge cases.
Is this progress(ive)?
For example, assume you want to page through the SitePoint library ten books at a time. A standard HTML-only request/response page would be created with navigation links; for example:
<html> <head> <title>SitePoint library</title> </head> <body> <table id="library"> <?php // show books at appropriate page ?> </table> <ul> <li><a href="library.php?page=-1">BACK</a></li> <li><a href="library.php?page=1">NEXT</a></li> </ul> </body> </html>
- check for the existence of a table with the ID of “library”
- add event handlers to the navigation links and, once clicked
- cancel the standard navigation event and start an Ajax call. This would retrieve new data and update the table without a full page refresh.
While I welcome Google’s solution, it seems like a complex sledgehammer to crack a tiny nut. If you’re confused by techniques such as progressive enhancement and Hijax, you’ll certainly have trouble implementing Google’s crawling system. However, it might help those with monolithic Ajax applications who failed to consider SEO until it was too late.
- 1 How to Improve Site Performance (and Conversions) with Dareboost
- 2 A Guide to Testing and Debugging Node Applications
- 3 Fetching Data from a Third-Party API with Vue.js and Axios
- 4 A Walkthrough of CSS Length Units You Can Use for Font Size
- 5 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt