SEO-Friendly Dynamic Content Loading with PJAX

PJAX is a simple, yet powerful plugin for the JQuery library that will load content into a webpage and change the URL without doing a full page refresh. PJAX utilizes a javascript function that is part of the HTML5 History API called pushState. Using window.history.pushState() keeps full browser history functionality, such as the back button and bookmarking.

Basically, pushState can manipulate the URL in the browser window without doing a page refresh, which was pretty impossible until now. For an example of this look to your address bar and Click This!. Cool, huh? With pushState coupled with AJAX, the way the content gets loaded into the page, we can make our dynamic content completely SEO-friendly.

What are the benefits of loading content without a full refresh?

There are several. The obvious reason is page load times. By only loading in the content area of a page, you skip out on making server requests for the various outside resources associated with that page. These include the CSS files, JavaScript files, Image files, and any other outside resources used to make your page function properly and look nice. Only loading the text in the content into a page makes the download smaller, resulting in a faster load time.

A site I’ve been working on lately has presented a need for the use of PJAX. The project requires media to continue to play in a top bar while browsing the site, all while keeping the site SEO-friendly.

PJAX was a perfect solution. By not having to reload the whole page when clicking links, it allowed me to use a simple media player and just feed the content into the content area all while allowing the media to play uninterrupted. Here is a great example of this: http://html5.gingerhost.com

So how can I use PJAX?

The best part about PJAX is that it’s fairly easy to use. It does require a bit of knowledge about HTML/CSS and a server-side language, such as PHP, .NET or Rails. My language of choice is PHP and is the language I chose to use when using PJAX. So it’s the language I’ll be using in this example.

You can download PJAX here: https://github.com/defunkt/jquery-pjax/

The if($_SERVER[‘HTTP_X_PJAX’] == ‘true’) looks for a header that loads with PJAX, and then loads your content fields into the page. Simple as that. –> PJAX is a very cool utility that can be implemented in a number of ways. Using it a different way than how I described above? Let us know what you did! Original Version of Featured Photo by Kevin Dooley. Under the Creative Commons Attribution License.