Modern web development techniques are evolving at an astounding rate. You only have to look at what’s on the cutting edge to realise that quite frankly, digital marketers who lack interest in the front end web development and design community will eventually be at a disadvantage.
For marketers there is no such thing as “too technical”. The bottom line is this: you work on the web, you need to understand the web. Learn how it’s built, and you’ll find yourself able to make great things happen on your own, simply by learning and experimenting. How cool.
Many of you have been SEO practitioners for a long time, and I’ll wager that if you’re like me, interesting new stuff is what keeps you excited about SEO, particularly in the field of what’s possible in technical SEO and content development.
Take a look at this (and pay attention to the address bar):
Quartz uses pushState to change the visible URL as new content is loaded on the web page.
PushState is part of the HTML 5 History API — a set of tools for managing state on the browser. So, the address bar is updated to match the specified URL without re-loading the page.
Using pushState for user experience with infinite scroll
As the user scrolls down the page, the visible URL changes and new content is loaded using Ajax. It’s *because* new content is loaded (infinite scroll) that the ideal way to handle the address bar is to update the visible URL. That way, a reader can share the right thing or return to the right place. This is provided, of course, that share URLs are updated in the HTML source by manipulating the DOM. Something easily possible with jQuery.
The problem with the SEO part of this
Of course, your solution is to be mindful of the non-JS experience you’re serving. Taken to its conclusion, applying the principles of graceful degradation in the early stages of layout, design and code go a long way dealing with that.
Take a look at this Porsche category page from our friends at Pond5. Note how the JS-enabled view uses infinite scroll to continually add new content to the page.
If you scroll down to the bottom of the page, you’ll receive all the content. That won’t happen if you’re a crawler, so that’s why you need to think about your non JS experience, too:
Pond5 have inserted paginated links in their non JS view.
The analytics / tracking problem with this
Loading content via Ajax poses a problem with your page tracking though; even though you’re updating the URL in the browser address bar, your Google Analytics won’t see this as a separate page view. However, this can be easily be solved by firing
_trackPageView at the same time the URL is updated. If you’re not using GA, obviously the call will be slightly different for you, but all the main analytics providers offer similar functionality for manually sending the call to track the page.
Hopefully that helps resolve any areas of uncertainty you’ve found in your day-to-day technical consulting involving pushState and infinite scroll! Let me know if you have any questions in the comments below!
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history – Manipulating the browser history
https://blog.twitter.com/2012/implementing-pushstate-for-twittercom – Implementing pushState for twitter.com
http://vip.wordpress.com/2014/08/28/building-qz-com-full-transcript/ – Building Quartz
http://tumbledry.org/2011/05/12/screw_hashbangs_building – Screw Hashbangs: Building the Ultimate Infinite Scroll