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/

Standalone version that doesn’t need JQuery here: https://github.com/thybag/PJAX-Standalone

(Great alternative to using the JQuery version if PJAX would be the only thing using JQuery.)

After building your website, you need to put the page’s markup in a file named ‘wrapper.php’. This will be the shell in which the content is loaded into. To use PJAX you need to load it into your page. In this case I used the standalone version.

<script type="text/javascript" src='http://yoursite.com/pjax/pjax-standalone.js'></script>

And then you need to declare a container for PJAX to load the content into. ‘pjaxcontent’ in the example below is the div ID used for the content. You can change this to whatever you like.

<script type="text/javascript">
pjax.connect({
 
    'container': 'pjaxcontent',
    'beforeSend': function(){console.log("before send");},
    'complete': function(){console.log("done!");}
});
</script>

Now, we need to create the code that will display the content. The markup is going to look something like this, all depending on what your content area looks like.

<div id="pjaxcontent">
    <?php echo $contents; ?>
</div>

Also, you want to change the TITLE tag of the page with the content, so replace the <title></title> of your page with:

<title><?php echo $title; ?></title>

As you can see, all I did was echo the variable $content into the content area. Which brings us to the next step, setting that variable. This was the trickiest part of PJAX because you have to tell your content pages to watch for the PJAX header. The content pages need to be coded like so:

<?php
$title = 'PAGE TITLE';
$contents = '
<p>        
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
</p>
';
if($_SERVER['HTTP_X_PJAX'] == 'true'){
        echo $contents;
        echo "<title>{$title}</title>";
}else{
        include 'wrapper.php';
}
?>

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.

Categorised in: Content, Development, Useful Stuff

This post was written by Rusty Felty