make ajax based websites crawlable for search engines with user friendly urls by using the pushstate

AliExpress.com Product - Portable Mobile Laptop Standing Desk For Bed Sofa Laptop Folding Table Notebook Desk With Mouse Pad & Cooling Fan For Office

Advertisements Section

AliExpress.com Product - Portable Foldable Adjustable Laptop Desk Computer Table Stand Tray For Sofa Bed Black

Introduction:

The purpose of writing this article can be better understood by the title of this post. but to explain it further I would start with the question that why it is important go with the AJAX based websites?
The answer is simply that we still need AJAX based websites mainly because the websites that use AJAX to load content into the pages can be much faster in terms of the page load time and provide a better user experience. But the unfortunate part is that these websites can be very difficult (or implicitly impossible) for Google to crawl, and using AJAX can damage the site's SEO.
Now after knowing the facts about why we need this and what is the disadvantage of going with the approach. I would like go with the more solution oriented approach how to remove the disadvantages from the above approach ?

Previous Solution(old technology):

The problem obviously exist for many years now, the previously used solution is #! (HashBang).The HashBang approach is famously used by twitter and some other social networks but the approach has many disadvantages like unfriendly urls and can't implement any fallback approach in case of javascript  not available as the Hashbang approach is only for client side. and I believe your content shouldn’t only be virtually created by your Ajax calls. Your application should have some purposeful strategy.

Suggested Solution(latest technology):

So now what is the new technology that's going to make our lives(for making AJAX based applications) easier? I am going to suggest a simple javascript function 'window.history.pushState()', which is part of 'HTML5 History API'. And the History API provided this elegant solution by using window.history.pushState(). And the best part is, it’s just an extension of a native feature that’s been around forever. Previously history was limited in use to developers and was mostly reserved for the browser’s native buttons. But new functions were added to the API that allows us the actually do things like add or remove entries to or from the browser history, or even visibly change the browser’s url bar(which was previously impossible on client side). Now you can have pretty/friendly URLs for dynamically loaded content. Now you can easily take advantage of using AJAX to load page content (with speedy page load and for many websites, only a fraction of the code delivered is actually content, most is just design & templating). and last but not the least you can now easily have a fallback implementation(In case of no javascript available) and obviously with no damage to your site's SEO(Search Engine Optimization), all the content is crawlable to the search engine.

Implementation:

The pushState() method is used to create a new history entry. This method has three parameters:
stateObj – The state object is used to store data that is associated the new history entry. This could include the page title, a URL to load via AJAX or it may have the page content itself.
title – The title parameter should contain the description for the history entry.
URL – This is the URL that will be associated with the history entry. The browser won’t load this URL when pushState() is called, but will display it in the address bar, that simply means it worth noting until the user decides to refresh the page or restarts the browser.

//Following line will create a new history entry.
  history.pushState(stateObj, title, URL);

Demo:

By clicking on the following demo links you can see the magic where the things to look at are as follows.

• Page content will be changed.
• Page Title will be changed.
• Page URL will be changed.
• Without any postback  you can verify this by playing the video and click on the links.

 

This is actual page Content

Home About Us Contact US

Note: According to the google latest update Read the official Google statement, google now support js as well. so you need not to worry about seo of your site while using ajax to bring content of your site. but you should still use the implementation of pushstate and popstate as part of the strategy of ajax based applications as it will enhance the user experience of your site while bringing the content without postback on each click.