If you have used (and of course you have) Pinterest, Facebook or Twitter or have searched Google images, you have already seen infinite scrolling in action. Just keep scrolling down and the never-ending list keeps popping up more and more information. Apart from Pinterest, Twitter, and Google images, infinite scrolling is being used by many small business blogs as well as leading news websites. Inc. Magazine, Mashable and The Chicago Tribune etc. are great examples of news sources using infinite scrolling. The next time you visit these websites, just notice how you can scroll down to enjoy the continuous flow of information.
Infinite scrolling is one of the trending ways to display content, which marketers are largely using to improve their website’s user experience. But from the design perspective, is it the right thing for your website?
To Scroll or Not to Scroll
Infinite scrolling is basically long lists, which are nothing new. What has changed now is the way we are scrolling these long lists, especially after the introduction of mobile interfaces and the popularity of mobile app development. Since the mobile screens are typically narrow, it is essential to arrange list items vertically. As a result, we need to scroll them frequently to view the content. The basic functionality of infinite scrolling is simple. As users scroll through the content and images, it automatically loads more content.
But before zeroing on infinite scrolling, designers and developers need to consider the type of website they are working on.
Use infinite scrolling if you have image-heavy content. Also, if you think your visitors aren’t looking for something specific. You need to understand the user intent to be successful with your infinite page. Etsy, for example, experienced horrible results with infinite scrolling and ended-up with a low CTR. Why? Simply because it distracted the users and as a result, they are likely to click less items that than they would normally do. It’s just not Esty, any other eCommerce sites would have faced a similar situation.
Another situation where a designer might like to consider using infinite scrolling is on websites that have a lot of user-generated, low-engagement content. People usually scroll down the list on these websites without actively interacting with it all the time. Facebook and Twitter are the best examples. While we are at it, it is important to consider that websites with interactive and high-engagement content, which is meant to hold the readers’ interest for a long period of time aren’t good candidate for infinite scrolling.
Designers and developers also tend to use infinity scrolling for websites that cannot control the variables in their content type. These websites has both high and low user engagement content. Tumblr is perhaps the best example, which uses infinite scrolling to reduce users’ options of interacting with individual post. As a result, the high engagement users can better focus on individual posts, while low engagement users can continue browsing more content. What Tumblr does differently is that it allows users to enable or disable infinite scrolling, giving them total control over how they want to interact with the content.
Today’s web designers are largely using a hybrid approach to their scrolling solutions, by which they prompt users to load additional content after they reach the end of a webpage. This is a smart approach where users again have the control over how much content they want to consume and this works best on mobile.
The secret is to tread carefully with infinite scrolling. Despite that, things can go wrong. We are not just talking about how things went wrong with Etsy, which made an erroneous decision of switching to infinite scroll a few years back. We now know that this technique works best with social media, entertainment and news sources and is a total disaster for ecommerce websites. But there’re are other problems too and some of them are related to SEO – one thing designers and developers often overlook.
SEO Issues with Infinite Scrolling and How You Can Fix Them
Infinite scrolling incorporates JavaScript, which is the source of all SEO issues associated with this technique. Google and other major search engines do not crawl most JavaScript successfully. Google too a few suggestions for webmasters and designers when using fancy features like JavaScript. The best practice is to put your content in basic HTML so that search engines can easily crawl and index the pages. However, content loaded via JavaScript is less likely to be indexed as crawlers don’t keep scrolling like humans to consume content.
That being said, there are some ways to create searchable infinite scroll pages.
According to Google, you need to create a series of other pages (paginated series or component pages) to go along with your infinite scroll page. This allows you to chunk your infinite scroll page into component pages.
Here are a few tips to do it:
1. Divide Your Content to Avoid Overlapping
Determine the amount of content you want to include on each page and break it up into chunks in such a way that your users can easily find the information they are looking for. These compound pages should not have duplicate content and also ensure they have optimal load times.
2. Your URL Structure Must Accommodate Infinite Scrolling
You will need a URL structure for your infinite scroll pages, maintaining the sequential nature. Each section of your infinite scroll content is a unique page and needs a unique URL. Google recommends using full URLs to reduce configuration errors.
The following URL patterns are acceptable as per Google:
- example.com/category?name=fun-items&page=1
- example.com/fun-items?lastid=567
- example.com/fun-items#1 (although this one is less optimal)
Google also advice to avoid two things:
- No relative-time-based URL parameters as it adversely affect SEO
- No code-based language to ensure an enhanced user experience
3. Don’t Forget Your Pagination Codes
Each component page must include rel=next and rel=prev values within the <head> tag. This is to ensure that Googlebot crawls, indexes and returns these component pages sequentially. Besides, Google simply ignores such pagination codes in the <body> for indexing purposes.
4. Implement PushState
An HTML5 method, PushState dictates the load process, telling the browser what to load and/or display. Twitter uses PushState to implements its infinite scroll. Implement this in conjunction with ReplaceState to allow users to serially backup their most recently paginated content. It also helps you to respond to your users’ scrolling behavior.
Conclusion
If you think infinite scrolling will add to your benefits, definitely go for it. But make sure your codes are SEO-friendly and also implement SEO best practices on each page to make your infinite scroll pages searchable. Remember infinite scrolling is after all just a design option. The ultimate goal is not about trying something new, it’s about providing the best possible experience to your visitors.
Author Bio:-
Jaykishan Panchal is a content marketer at MoveoApps, an iphone app development company. He enjoys writing about Technology, marketing & industry trends. He is tech enthusiast and love to explore new stuff. You can follow him on Twitter @jaypanchal8.
