SEO-Friendly Dynamic Content Loading with PJAXPublished: August 7, 2012
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?
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.