2

Search Engine Friendly AJAX Navigation

For many years, developing rich web applications or an interactive website and navigation has involved the use of Flash. While it provided developers with the freedom necessary for animating objects and to send/receive data between the user & website, it hindered the ability of search engine spiders to navigate and index page content effectively.

In recent times, the rising use of XHTML and CSS combined with Javascript and its many frameworks have allowed web developers to implement stunning interactivity on websites and to retain full content indexing ability, allowing a website to benefit from organic search results traffic far more effectively than previous Flash implementations while allowing more control over page layout when being shown on a variety of devices or platforms.

Ironically, these same technologies have become so flexible that a major issue is presented to web developers. Search engines can only read and index content that is given to it in the original page request and page load as they do not execute most javascript functions. As a result, many websites that display page content dynamically via AJAX, especially those that implement extensive page navigation via AJAX, are not indexed entirely or correctly in search engines. This has a large negative impact on SEO efforts and SERP performance, as large or extensive areas of a site cannot be indexed at all, or perhaps are indexed but with incorrect/broken links when followed.

In addition to the indexing issue with AJAX, when using AJAX for website navigation also, you loose the ability to ‘deep-link’ to a website page URL and also the ability to move back/forward via a browser’s history. To solve these issues, there are a number of steps that can and should be taken to ensure a familiar navigational experience.

Landing Pages / Deep Links

  1. Detection of ‘static’ URLs
  2. Present static website content equivalent
  3. Rewrite to website or application’s base URL
  4. Initialise the correct state using the appropriate ‘dynamic’ hashed URL.

Back/Forward History

All website navigation is represented using browser hashes (# character). These are client-side only URL fragments and are not sent to a website as part of page requests, and as such will not cause any page reloads to occur when changed. They are however stored in a browser’s history to represent distinct content/locations and so can be used to trigger states in the website or application, allowing a visitor to continue the back / forward behavior of traditional websites.

Bookmarking

To enable logical use of bookmarking, this is a follow-on of the landing page mechanism above and the use of a hashed URL for navigation. As you navigate, the fragment changes and is included when you bookmark, allowing you to revisit that URL and return to the same page and state.

Visitor Stats and Tracking with Google Analytics

As part of the code used for navigation and url handling, page views can be correctly recorded and tracked with the relevant ‘static’ URLs. This allows you to analyze website traffic using Google Analytics or other similar services comprehensively irrespective of the use of hashed URL fragments etc.

The End Result

The end result of taking these measures is both a logical and complete user navigation experience for a website and an optimized URL structure and related page content for search engine indexing which should underpin and improve on any SEO strategy implemented for a site.

Perigee Global utilizes these very techniques in its own website www.perigeeglobal.com to produce a smooth and seamless AJAX-based navigation using the jQuery framework and custom javascript functions and page transitions.

Filed in: Articles

Recent Posts

2 Responses to "Search Engine Friendly AJAX Navigation"

  1. Super article! Your writing is so refreshing compared to most other bloggers. Thank you for writing when you do, I’ll be sure to keep visiting!

  2. Sandy Abrecht says:

    I think this article was secretly a good beginning to a potential series of articles about this topic. So many people pretend to comprehend what they are talking about when it comes to this topic and most of the time, very few people actually get it. You seem to know about it however, so I think you need to take it and run. Thanks a lot!

Leave a Reply

Submit Comment
What is 15 + 9 ?
Please leave these two fields as-is:
© 2011 HostClub7