Infinite scrolling has been growing in popularity with various forms being utilized on a variety of sites.
While there are pros and cons from both a technical and usability perspective, and it hasn’t worked for everyone, in the right situation it can be a good fit.
Social sites use infinite scrolling as a way to offer a never-ending stream of new content, and it has appeal for sites that want to offer a seamless browsing experience for large groups of items. Publishers are starting to use it more often too on their home and channel pages.
Don’t Forget SEO
In reviewing infinite scroll implementations on a number of sites, one thing I’ve noticed is that not all of them offer a crawler-accessible path to the deeper content. This creates an obstacle for SEO.
A simple test is to view a page with infinite scrolling in a browser with JavaScript disabled. At the bottom of the page there should be an accessible link to a static URL with the next group of results, and on the subsequent pages both next and previous links. Even better is to provide a series of links that expose more pages, for example “Previous 1 2 3 4 5 6 7 8 9 10 Next”.
Essentially you want to build the infinite scroll functionality on top of simple, paginated archive pages. This type of progressive enhancement is good for usability as well as SEO. It allows the content to be accessible within the main framework of the site and better integrated into the internal link graph.
If desired (and as appropriate) pages 2+ can be given a “noindex,follow” robots meta tag to prevent the paginated results pages from being indexed, while still allowing the links on them to be crawled and pass value. Or rel=”next” and rel=”prev” tags can be experimented with.
Mashable is a Good Example
The latest Mashable design, which makes heavy use of infinite scrolling, offers a good example of how to ensure that all site content is still easily accessible to crawlers.
Viewing the home page or any channel page with JavaScript disabled reveals a module with links to static archive pages organized by year and month (like this April 2013 page):
This creates a simple, easy jumping off point to all the content pages on the site.
The concept is essentially the same thing as a comprehensive HTML sitemap, the difference being the links are accessible through a module on the home and channel pages instead of just a footer link.
This approach, and organizing the archives by date, is a good fit for a news site. In other cases providing paginated, static pages directly within each site section, or organizing the site-wide archive by topic instead of date, may be a better fit.
The bottom line: choose whatever approach makes the most sense for your site, but make sure you are providing easy crawler access and sufficient internal link support to all of your content pages.
Jon says
Nice point well made. I find the easiest way to see what Google is caching is by going to the Google toolbar in IE, clicking on cached version and then going to text only. This gives you what content they have.
Chris Mayhew says
This is an interesting article. I’ve never really considered infinitely scrolling for any site other than social media but I can see how it could work. It’s great that you’ve outlined the SEO steps to take for anyone wanting to do it.
Menachem Rosenbaum says
Good post!
what about using rel next and rel prev tags to tell the SE that it is part of the same page?
after how many pages do you stop giving the SE the rel next tag?
David Deering says
A lot of newer sites are using infinite scrolling now, and I can see how that can cause some SEO issues. So nice tips on using pagination and noindex or rel= tags to help the search engines understand your site layout better and prevent any SEO-related problems.
Adam Sherk says
Thanks for the input Jon, Chris, Menachem and David.
Menachem – just how well rel=next/prev works is not that well established yet, but it is something that could be experimented with in this situation. You’d want to interconnect the entire series. I think rel=next/prev is probably best suited to situations like paginated articles. But in industries like ecommerce it is being tested on things like paginated category and browse pages, which is similar to what we’re talking about here.
Nick Stamoulis says
“Even better is to provide a series of links that expose more pages, for example ‘Previous 1 2 3 4 5 6 7 8 9 10 Next’.”
I personally prefer this on other websites. In comparison with infinite scrolling, having archived pages makes it feel like there is an end in sight. It is much easier to click through to a page and scan articles than it is to continuously scroll down while waiting for each new section to load.
Hamid Roshaan says
I prefer using 1 2 3 4 5 6 7 8 ….. Last
this gives a better user experience
Adam Sherk says
Nick and Hamid – I prefer numerical pagination links too, and I agree Hamid that a “last” link is helpful for users.
Andy Kuiper says
…another vote for “Previous 1 2 3 4 5 6 7 8 9 10 Next” 🙂
Nicholas Mick says
….me to i will go with 1 2 3 4 5 6 7…till it ends.
Maegan Anderson says
Good thing about infinite scrolling is that it doesn’t confuse visitors by forcing them to jump around between different pages and it’s much faster to load one infinitely long page than multiple pages. But the best way to find out if infinite scroll will work for your website is to dip your toes into the water.
Adam Sherk says
Thanks for adding your opinion, Andy and Nicholas.
Maegan – I agree, infinite scrolling can be a good fit for users in the right situation. For me the important thing is just making sure that SEO considerations are factored into the implementation when it’s used.
Jim Robinson says
Good post as always, Adam. Mashable is a good example, but would putting all those links into a noscript tag give you pause? IMO, it’s the most semantically correct approach, but are you seeing that the same weight is being applied to such content by the engines?
Adam Sherk says
Thanks Jim. Personally I prefer to use the noscript tag in more limited cases. For something like providing crawler accessibility and internal link support to all site content, good ol’ on-page links is the strongest, safest approach.
Jim Robinson says
Oh, no doubt. On-page links are the strongest, safest approach, but generally not the way infinite scroll is implemented. In the example you use for Mashable, they’re putting all those archive links in a noscript tag.
Adam Sherk says
Sorry Jim, I misunderstood your original comment. I agree – I’d rather see those links outside of a noscript tag.
Aqib Shahzad says
I prefer using 1 2 3 4 5 6 7 8 ….. Last
this gives a better user experience and according to readers point of view it is helpful.
Jomer Gregorio says
Excellent information! I prefer using 1234 til last.. By doing this I learn what is working and what’s not and it also give me some great insight.. This blog has helped me a ton.
Simon Nguyen says
This is a choice that does not come easy! One must weigh the pros and cons, as with every other important business decision. SEO is a difficult world in and of itself, let alone weighing the benefits and pitfalls of it against and/or beside that of endless scrolling. So very much to think about.
Happy choosing.
Simon
sarah says
Does anyone have a good example, from a live working website, that does NOT use a noscript tag?
From what I’ve heard, this isn’t the best type of workaround to present pagination (or any other type of content)…. http://www.seroundtable.com/archives/022411.html Thanks!