Building SEO friendly AJAX Websites

pushState-example

Why this post? Simply because one of our client at BriefKase crafted a beautiful looking website which was not SEO friendly. The website uses AJAX to load content and provides a rich user experience , but did not have different page URLs for different content pieces.

Problem: Websites built in AJAX are difficult to crawl by Google, thus putting them at a certain disadvantage.

Solution: How do we build crawlable, link-friendly AJAX websites? 

We can do this by using a JavaScript function called pushState().

The window.history.pushState() function changes the path of the URL that appears in the user’s address bar. How will this make life simpler for developers who are using AJAX?

  • You can have the speed benefits of using AJAX to load page content (faster content loading & lesser code)
  • Since the page URL can accurately reflect the ‘real’ location of the page, people can copy/paste the URL from the address bar and link to / share it

Want to take a look at an example? Here’s one developed by Rob Ousbey – http://html5.gingerhost.com/

Quartz-pushState-usage

Quartz uses pushState to change the visible URL as new content is loaded on the web page.

 

Implementing pushState()

Here’s a quick guide to the pushState() function:
Syntax:  history.pushState([data], [title], [url]);
  1. The first parameter is the data we’ll need if the state of the web page changes, for instance whenever someone presses the back or forwards button in their browser.
  2. title is the second parameter which can be a string (Page Title)
  3. This final parameter is the URL we want to appear in the address bar.

Here’s one more demo : https://css-tricks.com/examples/State/ to get you all excited about pushState()!

 

Wishing you a happy SEO friendly AJAX Website development!

Leave a Reply

Your email address will not be published. Required fields are marked *