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?
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 – https://html5.gingerhost.com/
- 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.
titleis the second parameter which can be a string (Page Title)
- 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!