On demand content loading through AJAX (Asynchronous Javascript and XML) or Javascript based Single Page Application Frameworks (SPAs) allows for the easy creation of quick, snappy, customizable, and user friendly sites. These dynamic web pages provide great user experiences and site functionality.
They allow separate on page elements to be loaded on a page without the need for a refresh creating an easy to use page for customers. For instance, Kayak.com loads a list of prices and dates within the page based on your search dates:
Other examples include the infinite scroll we are all familiar with in Facebook or Twitter as well as ecommerce retailers such as Uniqlo which allow you to scroll through the entire Men’s inventory through the main category page:
AJAX Can Negatively Impact Site SEO
The problem with AJAX and SPA pages however is that their strengths can ultimately be a deterrent to a site’s SEO. Though Google is constantly enhancing its ability to crawl sites its bots still cannot fully parse javascript while other engines’ crawlers will simply ignore javascript.
Different states of an AJAX application are typically denoted in the URL by appending a hashtag. For an example scroll down the current Flickr.com home page ; as you can see, though the page does not refresh and the URL stays relatively the same, a page section number is appended to the URL as you scroll down:
As a rule, search engines cannot read what comes after the hashtag, so they cannot know which version of the page to index.
Available Solutions:
Luckily, with a competent developer and the right amount of time there are a variety of potential solutions that can make your pages indexable to search engines.
Utilize Fallback Pages.
These are static HTML pages that load if the requesting resource (search bots, older browsers and smart phones, etc.) cannot parse Javascript. This typically calls for the development of a site that uses “progressive enhancement”, a site that only renders as much code as a user, or bot’s, browser can handle. One way to accomplish this is by using the <noscript> tag around important content. The <noscript> tag tells a browser what to load if Javascript parsing is disabled. Alternatively, you could create all of the content on the page in static HTML format, then use a javascript layer over it that only runs when a user agent can parse it, to manipulate the existing HTML content into the desired state.Of course, both of these solutions can significantly increase development time and lead to a certain degree of code bloat.
Create indexable “hashbang” pages.
Google introduced the hasbang (#!) in 2011 which translates the previously mentioned hashtag URLs into pre-set state indexable pages. However, this option is unpopular among SEOs due to increased development time and a lack of support from other engines and web services.
Create shareable URLs that replicate the current UX state.
It is possible to program server-side logic that will force a specific state on any page; for instance, think of shared YouTube URLs that load a specific moment in a video. These customized URLs can then be made shareable to allow external links to the page to tell search engines to index them. Again, the development time here does not necessarily justify the benefits.
Utilize pushState functionality.
HTML5 allows pushState functionality for webpages, which replaces the default appended hashtag that appears in the browser by pushing a custom URL in its place. This retains the Javascript functionality by loading a URL into the browser without forcing a full page refresh.This requires modern browsers, as do many AJAX sites, as well as added development time to generate rules for creating dynamic pushState URLs. This is one of the more popular features in HTML5 and becoming the go to solution.
Conclusion
Utilizing Javascript through AJAX or SPA based pages allows for a sleek modern website experience that more and more consumers are coming to expect. While there may be some technical hiccups when it comes to SEO, there are many acceptable resolutions to these issues to provide your site with the right balance of user experience and search engine optimization.
