Infinite scroll is a feature that’s gained popularity in recent years because of the slick, modern user experience it can provide. Implementing infinite scrolling does come with a number of challenges, and keeping it SEO-friendly is among the biggest.
This is a fairly technical post, so for the non-technical marketers who follow along, this is a great page to bookmark and share with your developers to get confirmation that your infinite scroll implementation is adhering to best practices for SEO.
What Exactly is Infinite Scroll?
Infinite scroll, as the name implies, allows a reader to scroll down a web page and continually view new content without ever reaching the end. It’s also sometimes referred to as “endless scrolling,” “continuous scrolling,” “lazy loading,” “autopager,” or “unpagination.” Well-executed, it’s an engaging web browsing experience because you never have to click on a link and wait for a new page to load to see the next set of headlines, images, or other content.
The challenge for web developers implementing infinite scroll is that you can’t deliver an endlessly long page of content and still maintain reasonable page load speed. To keep page loads snappy, you’ve got to serve it up in bite-sized pieces.
For an example of infinite scroll, check out Mashable.
Chances are you’ve been on Facebook, so you’re probably familiar with infinite scroll from a user experience standpoint, even if you didn’t know what it was called. Most social networking sites use infinite scroll these days, along with Google Images, Mashable, and a variety of popular blogs and news sites. Anil Dash even suggested a couple years ago that it’s time for the Internet to stop publishing webpages and start publishing streams. Infinite scroll is a perfect solution for stream experiences.
Why Infinite Scroll is Bad for SEO
How to Have Your Cake and Eat It Too
Google’s recent guidance on infinite scroll tells us to ensure our content management systems produce a paginated series of pages (component pages) to be presented in tandem with the infinite scroll experience. The image below from Google shows how this looks, with the infinite scroll experience on the left, and the corresponding paginated series of component pages on the right.
This is exactly what I’ve been advising my clients to do for a while now. You can read the full post on the Official Google Webmaster Central Blog to get detailed guidance, but here’s a quick recap:
SEO-Friendly Recommendations for Infinite Scroll
- Follow best practices for SEO-friendly URLs and make sure each component page in the series can be accessed individually in a browser.
- Set up classic pagination that allows users and search engine crawlers to navigate directly to each component page in the series. Be sure to follow best practices for pagination using rel=next and rel=prev.
There are a number of resources out there for learning how to implement infinite scroll and leverage the HTML5 History API. This article, Manipulating History for Fun and Proft, is a great starting point. The Twitter Engineering Blog also published an insightful article on how they approach this technique, which they describe as “Hijax + server side rendering.” The idea is that they use AJAX to “hijack” the URL target from an onClick event and, instead of allowing the click to generate a call back to the server, they use it for the AJAX call. The end result just looks like a fast page load to the user.
What’s Missing from Google’s Infinite Scroll Guidance
If you decide to implement infinite scroll following Google’s guidance, you might wonder how, exactly, to provide the infinite scroll experience for users with modern browsers in tandem with classic pagination for users who don’t. As is often the case, there’s more than one way to skin a cat.
What this boils down to are the concepts of “progressive enhancement” or “graceful degradation.” Progressive enhancement basically means you start with an experience that’s accessible to all browsers, and then progressively enhance that basic experience by adding new layers of functionality for modern browsers. Graceful degradation is very similar, but the nuanced difference is that you start with a full-featured experience, and then make sure stuff either doesn’t break or breaks gracefully in older browsers.
SEO-Friendly Infinite Scroll with Graceful Degradation
SEO-Friendly Infinite Scroll with Progressive Enhancement
I would love to wrap this up with a great SEO-friendly infinite scroll example from a major publisher, but I honestly couldn’t find one that really nails it. There’s Google Images, of course, but that’s a somewhat different use case. If you have a good example of SEO-friendly infinite scroll on a major news/media publisher site, by all means share it in the comments below. I’m going to have a great one to share in a couple months, so stay tuned.