Technical

Infinite Scroll, pushState and SEO

by on 7th October 2014

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

When you’re working with sites that are JavaScript heavy (with AngularJS SEO being my most extreme example) it’s easy to forget that search engines are still really dependent on the non-JS version of your code.

If we can’t pull more content because JS isn’t loaded, if the content we’re hoping to display isn’t visible, if links can’t be crawled because we’re not a JavaScript-enabled browser then all of the classic SEO problems apply.

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!

Useful resources

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://html5.gingerhost.com/ – A pushState Example from my good friend Rob Ousbey

http://tumbledry.org/2011/05/12/screw_hashbangs_building – Screw Hashbangs: Building the Ultimate Infinite Scroll

Like this? Sign up to read more

Responses

  1. If a visitor lands on a website with pushstate+infinite scroll, rolls down three articles deep and the URL updates 3 times over, then clicks back button on their browser… what do I see on my Analytics?

    Thanks – I’ve been wondering about this question for a while.

  2. Great article about Infinite Scroll and SEO!

    May I point out to you Infinite AJAX Scroll (http://infiniteajaxscroll.com)? It’s a jQuery plugin which enhances server side pagination with infinite scroll. This is called progressive enhancement and ensures it’s SEO-friendly (a search engine crawler can still follow links to your all pages). It also utilizes HTML5 pushState and updates the address bar while you scroll to give your visitors the best experience.

  3. With infinite scroll pages, that means footers are dead, correct?

    I’ve seen a few sites have a footer that you can never quite reach. Pointless.

  4. I’ve had this bookmarked all week to read and only just found the time. Thank you! I’ll be sending it to the whole team now.

  5. Call me old fashioned but I find it user friendly at social media websites only.

  6. No problem Everett!

  7. The pushState and AJAX are really very useful for better user experience but the same time it creates some issues with SEO and analytics of the site. But dont worry solutions are there for these issues. Dont compromise the user experience. Use AJAX and pushState if you feel that really keeps your customers happy. Rest can be taken care of. We can help you with that.

    Thanks
    Prashant

Comments are closed.