A – Asynchronous
A – And
X – XML
But, enough about the name AJAX; what I really want to talk about is how AJAX and History Manipulation can improve website usability and SEO.
Normally with a website, each time the site changes, an actual request is sent from the browser to the server for new information, which in turn is then used to repaint the entire screen and is treated as a brand new pageload. With AJAX, a request is made when the page is already at a finished state. Information is fetched via scripts from the server, and then painted on an already loaded page, which is less of a loading penalty versus loading an entire page again, which speeds up user interaction and streamlines usability.
Let’s say you have a page on your site with several modals or slide-out panels, each modal or panel with unique information. Normally, these modals or panels, and the content in them, will be on the initial page when it loads. There’s a practice called hashing, meaning at the end of a relevant URL, you include a hash mark (#) with a short string of characters. While, technically, you could hash each modal or panel’s active state as a unique URL (site.com/about#employee), there’s the downside that each hashed URL will still have everyone else’s content in it, albeit hidden from view, but still visible to the search engines.
As you know, duplicate content can be one of the many things a search engine can ding your site on. But, with AJAX and some history state manipulation, we can easily create a system where we can have unique, true URL’s, the speed and ease of use of modals and slide-out panels, and none of the fuss of hash links.
Using these tools properly, you can optimize your site where you have a page(site.com/about), where the individual modal information is not on the site’s initial load state. But, when you click to open the modal, the written scripts fire; pulling the modal content into the already loaded site, while at the same time changing the URL on your address bar to a true, crawlable URL(site.com/about/employee). And, when visiting this new URL, you will get the page with the pertinent modal already open.
With these unique URLs, which we owe to AJAX, we can have individual page states be crawled as unique pages, with no duplicate background content visible to search engines.
This means less duplicate content, more indexed pages, and hyper-focused pages, which all equate to better search scores. Additionally, in a scenario where the slide-out panel or modal is for an individual employee’s bio, they now have a unique URL to provide people that directs them to their unique information. So, you can add making the website a more efficient sales toolto the list of benefits.
This method was created after investigating History.js and how it manipulates the address bar, but was modified to better work with content management systems like WordPress, and remove the ‘hashlink’ states that the original history.js used.
AJAX is just one example of how we at Steadfast always push for innovation in every phase of creative production process. From initial conception to the final delivery of the creative product, we are always looking for new, better ways to provide clients with top-tier products that not only look great, but function better than any of their competitors. We truly view innovation as a key to unlocking competitive advantages.
To check out AJAX at work on a Steadfast site, take a look our client work at TangoAnalytics.com.