How to Create an SEO Friendly Infinite Scrolling Page

endless scroll

It’s trendy. It’s cool. It’s hip. It’s the infinite scrolling page!

Like with every new design trend, SEOs need to figure out how this web design option fits into the grand scheme of SEO. Personally, I’d rather have a great-looking site with killer SEO than a trendy site with so-so SEO.

If you think that an infinite scrolling page is the best design option for your site, but you also want to retain great SEO, then read on. I’m going to show you exactly how you can achieve both of these objectives:

What is an infinite scrolling page?

Just in case you’re unfamiliar with an “infinite scrolling page,” let me explain it to you. Once I share some examples (below), you’ll immediately realize, “Oh, yeah, I’ve seen that before.”

The infinite scroll is exactly what the term describes — a function that allows a user to keep scrolling a page without reaching its end. When you scroll downward, toward the “bottom” of the page, it simply loads more content, providing an ever-growing and seemingly never-ending amount of material.

Typically, it is implemented with JavaScript, which asynchronously loads fresh content, triggered by the user scrolling beyond a page point. In order to maintain ideal load times, the new content begins background loading before the user reaches the “load more” scroll point.

Now that you know what it is, let’s look at some examples.

What are some examples of infinite scrolling pages?

Let’s take a look at some of the most popular infinite scrolling pages on the web today.

If you visit my Twitter profile — or any Twitter profile for that matter — you’ll get an immediate sense of infinite scroll. Keep scrolling, and the page keeps expanding.

twitter

You’ve probably experienced it on Facebook. This is precisely why you never stop looking at Facebook.

facebook

And, while we’re on the subject of the time vortex qualities of social sites, let’s not forget about infinite scroll on Pinterest.

pinterest

Google, despite its resistance to infinite scroll search results on its main search page, uses infinite scroll for image search.

penguins

But what about non-social pages? Does infinite scroll have a place among the non-Twitters or non-Facebooks of the web world? Absolutely yes. After all, that’s where the real SEO merits of infinite scroll will be tested and/or proven.

Mashable, a news site, has infinite scroll.

mashable

The French design agency, Département Créatif, uses a mashup of hero graphics, infinite scroll, parallax elements, and other very impressive design techniques.

design agency

Axara, a fashion brand site, uses infinite scroll with some success:

axara

Infinite scroll has some noticeable advantages in terms of user experience and engagement. But there are problems, too. The problem I’m most interested in has to do with SEO.

What’s the SEO problem with infinite scrolling pages?

In one word, the SEO problem with infinite scroll is JavaScript, which is the most popular way to implement it. Search engines, most notably Google, do not appear to crawl most of JavaScript successfully:

Google can execute some JavaScript to find content but Google has limitations on what it can do, and what it can understand. The best practice remains the same: put the content you want Google to crawl and index in basic HTML. For example, use jQuery tabs to put the content on one file instead of AJAX tabs that spreads out the content across several files. In short, make it easy for Google to access your content.

Google, through its webmaster recommendations, makes this point as well:

If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

You can be sure that the HTML content in your source code will be indexed by Google, but any subsequent content that is loaded asynchronously via JavaScript will not be indexed. Crawlers aren’t humans. They don’t necessarily “keep scrolling” in emulation of the behavior of a human user.

So, how do you fix it?

Thankfully, there is a way to have crawlable/searchable infinite scroll pages.

Several methods are available, but Google officially recommends just one method.

The basic idea is this. You have to create an infinite scroll page and a series of other pages that go along with the infinite scroll pages. Thus, you (or your CMS) develop infinite scroll with pagination.

The infinite scroll page is chunked into component pages:

page split

Here’s the exact process:

Step #1: Determine how to divide up your content

Take stock of all the content that you want to infinite-scroll, and break it up into chunks.

There’s no magic length for these chunks. You simply want to ensure that users can find what they’re looking for with a reasonable amount of scrolling.

In keeping with best practices, you also want to make sure that these pages have optimal load times and do not duplicate the content of other pages.

Step #2: Create a URL structure that accommodates infinite scroll

Even though you’re creating an infinite scroll, you still need to think through a URL structure. This URL structure should be able to maintain the sequential nature required for an infinite scroll page.

Remember, you’re paginating your infinite scroll process, so each section of content will be a unique page with a unique URL. Use human language for your URLs since it works best for both users and crawlers.

The standard and typical URL works great: “example.com/awesome-design.”

If, to accommodate a streamlined configuration, you add pagination or IDs, that works too. Google states that the following patterns are acceptable:

  • example.com/fun-items?lastid=567
  • example.com/fun-items#1

There are two things to avoid as you structure your URLs:

  1. Do not use relative-time-based URL parameters. Using time-based features adds chronological complexity that will reduce the SEO value of your page. For example, Google advises avoiding this particular URL structure: “example.com/category/page.php?name=fun-items&days-ago=3″ because of the “days-ago=3” section of the URL.
  2. Do not use code-based language in your URL. Avoiding code mumbo jumbo helps to preserve an enhanced user experience. Here is Google’s example of stuff you shouldn’t have in a URL: “example.com/awesome-design/radius=5&lat=40.71&long=-73.40.” In this example, you would want to avoid using everything after the word “design.”

Step #3: Each page should contain rel=”next” and rel=”prev” within the <head> tag

Adding these pagination codes to your header will ensure that Google can index the content of each page. These rel attributes inform Google of the relationship among your URLs, increasing the likelihood of Googlebot crawling, indexing, and returning these pages sequentially.

In practice, the rel attribution retains sequential crawlability of your site, while still ensuring that all the content has its own indexed and unique page.

Read up on paginated content and on how to use the rel attributes in different ways.

Step #4: Use pushState on the infinite scroll page

PushState is an HTML5 method that dictates the load process. PushState will draw from the state object (anything serialized) and the URL to load the new content in the sequence defined by the pagination.

Basically, pushState tells the browser what to load and display. This is how Twitter implements its infinite scroll.

Alternatively, you can use the replaceState method for modifying the history entry or responding to user-scrolling behavior. ReplaceState would respond to scroll actions or allow the user to scroll backwards and view the pages that were loaded in the pagination history.

Step #5: Use SEO best practices on every page

You’ll want to test your infinite scrolling page, of course, and ensure that every page loads accurately and in the right time frame. Then, going forward, simply use your SEO knowledge to create the best and cleanest content possible.

In this regard, infinite scrolling is no different from SEO business as usual. Once you have implemented the proper infinite scrolling pagination features, you’re free to create killer content that is optimized according to your needs.

Conclusion

Infinite scrolling is just one of the many design options that might improve user interaction and retention. However, it is not optimal for every website. It all depends on what you’re trying to accomplish with your specific page.

As the Nielsen Norman Group stated:

Endless scrolling…is not a good choice for websites that support goal-oriented finding tasks. Such goal-oriented finding tasks include terminal point conversion actions. When users scroll endlessly through a page, it can introduce a new breed of bounce rate that skews metrics and minimizes the chance for CRO.

Infinite scrolling, as you’re now aware, can work for SEO. But that doesn’t mean it’s best for your particular website.

What is your experience with the SEO of infinite scroll?

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Comments

  1. Thanks again for a great, informative and detailed article!

  2. When I just got a notification on Facebook, I quickly setup to read this article, to see how you covered the article, and most important – It’s length. As because, the topic you have choose for writing is “Infinite Scrolling” and perhaps I’d thought it would be of 500-600 words, but what I’m seeing it’s of 1454 words.

    Great work Neil Patel, I’d love to loop those word for you “You’r trendy. Your’r cool. You’r awesome. And it’s non other than Neil Patel”.

    Perhaps, I’ve a question that – According to Quick Sprout’s measure, having more than 100 links on a page, isn’t good. But, with having Infinite Scrolling, won’t it affect the loading speed?

    I’d love to hear from you.
    - Bishal Biswas

  3. Thanks Neil, finally a decent article on this topic.

  4. HI Neil,

    May be you don’t believe me but yesterday I was searching for something like “How can I load my all web pages on my blog home page.” on google but Today when i got your post in my mail box, as always I jumped here and wow…..Looks like I was searching for “Infinite scrolling page”.

    thank You so much Neil, I learn something new today.

  5. Great post Neil. I personally like to stay away from the new fancy things like infinite scroll and AJAX in favor of html for seo reasons.

    Do you have a similar post on your blog regarding AJAX? Even when the seo guidelines are followed for AJAX, I still don’t think it helps. I’ve never seen a website coded in AJAX rank on the first page of Google before…

  6. Hi Neil,

    I agree with you. Infinite scroll looks great and more engaging. It creates more page views and users view more than 4 pages but it has some pros and cons.
    Your solution to handle this is great.
    Thank you for giving this solution to this problem buddy… :)

  7. I’ve decided to remove the Infinite Scrolling from my website. Thank you for awesome article.

  8. Neil, could you please provide some examples of sites that are using this method? The example Google provides (John Mueller’s infinite-scroll-with-pagination site) is not really a great example as it just adds a page number to the url (it doesn’t actually change,) the title tag stays static, and there are no meta descriptions. I’m having a hard time visualizes how this would actually work/look in a real-life business and I was really hoping that you would have provided some real examples of sites built this way that are optimized for SEO.

  9. From now, no more Infinite scrolling on my blogs as well as will not be going to use the themes which are having this feature :(

  10. Hi Neil
    My query is not related to infinite scrolling.
    Rather I want to know something very basic about duplicate content and copyright.
    If I write an article and subit it to directory,can I also put that as a blog post later,or before submitting article?
    How Can I prevent copyright theft from my blog content.How will i come to know if there is any infringement?
    Thanks
    Mona

  11. Finally the point I have cleared today.
    Thanks Neil.
    I am really feeling happy to read your article.

  12. That sounds very useful, but only for certain types of web pages.

  13. Thank you for the info. Every post is a guide…

    Regards

  14. Hi Neil,

    Great timing on this post!

    I recently discovered QuickSprout through Noah Kagan/Appsumo article. Wow, you’re a busy guy!

    Would you know offhand if WP’s Jetpack or Slim Jetpack plugins implement the Google recommendation for the infinite scroll feature?

    If so this would be great added value for my current work flow to pitch to prospects.

    Thank you much!

  15. What is your take on doing SEO on Parallax Scrolling sites?

    • Hi Chris,

      I can’t speak for Neil, but as long as the markup on the parallax page contains the content search engines are crawling for then you should be totally fine with the feature.

      Parallax is mostly CSS w a touch of javascript primarily for the presentation of the page. CSS/JS effects typically won’t have much baring on SEO, unless the way it’s implemented reduces page load times.

      Thought that might help.

      Best,

      ~ D

    • Chris, I love them. They work really well!

  16. Great content for lovers of such sites. I never thought of having one though ;)

  17. Another thing to consider is bounce rate. If someone hits the lander and scrolls down the entire page and then hits the back button after 5 minutes does google consider this a bounce?

  18. Nice post!

    I love infinite scrolling and I use this technique at one of my websites:

    http://www.woontrendz.nl

    It does not negatively effect my SEO as I use the prev/next meta links and I also use internal linking to the best posts I want to rank high with!

  19. Hi Neil,

    Great post btw. This is a great technique (hashtag + URI) for SEO for anything ajax (parallax sites are trending). But my question is a little outside of SEO. Have you tested which way (infinite scroll, table of contents style pagination, regular numeric pagination etc) yields the highest engagement and least bounce rate?

    The reason I ask is let say if you have infinite scroll and you have a visitor scroll thru your site for lets say 3 minutes. Since he/she did not click on any other page, would this than be considered a bounce in Google’s eyes?

    Thanks!
    Andy

  20. Perfect timing to help me articulate this to a client who’s “new” site looks great but is structurally not doing them any favors. Sending this to all my developers ASAP.

  21. Hi Neil,
    Although it is a great way to keep visitors on site for longer but it would not work for sites which update less, like most of the bloggers.
    Maybe that’s why Mashable is growing their traffic a lot, a lot and a lot.
    Do you use it anywhere?

  22. Great Post Neil, I guess with the apply of the pagination there is more change of getting more page views per session as well as time spend on the site increased. Thus low bounce rate..

    Definitely giving a try on upcoming sites.

    Cheers

  23. Yes, but it has some pros and cons as you have mentioned clearly how to optimize with seo. Better we can use same like how stuff works displays related content bottom page helps to increase page views but here there will be increase page load spoil our site. Thanks for this quick guidance Neil.

  24. Awesome! I was pleasantly surprised to see your blog, It’s Great to see that you described whole information in simple words.Thank you

  25. Hey Neil,

    Thanks for these great tips on this topic. I hope I will follow them in case I will get a chance to work on this type of website in future. Yesterday only my colleague and me were talking about this and today I came across this post. :-)

    Thanks again!
    Vijay Pashte

  26. As always, great post Neil!

    Infinite scroll is a big part of our product (e.g. http://hub.uberflip.com). One other thing to consider is if search engines can reach all your pages once a link is clicked on one of those infinitely scrolled elements – even with simple previous/next links on each page. It’s a good backup method to make sure all your pages are crawlable, but ultimately the URL pattern you’ve outlined is the better long-term strategy.

    Thanks,
    Yoav

  27. Great write-up Neil. Infinite scroll / Parallax is such a hot design today.. just looks so sleek and sexy. Nice to hear your thoughts on the SEO side of this design type. Thanks :-)

  28. Hi Neil,

    Thanks for another detailed article on infinite scrolling.

    One of the reservations I have with this type of layout is on the issue of UX? I can’t help but think there’s a lot of your content thats not being read by the reader / visitor.

    Perhaps its just me, but my attention span beyond a couple of mouse scrolls fades – mashable as an example – my mind wanders after a short while but I guess thats an individual problem.

    Appreciate your brief feedback

    Steve M

  29. Thanks for the article! My website top10hq.com uses infinite scroll, I’m going to check if my SEO is done right.

  30. That’s very cool feature to have on websites. I was wondering if Indian Railway could implement that on their website where information is scattered at various places. It would be nice to keep scrolling down and finding out everything one needs to know.

  31. Thanks Neil, This is the first time I am seeing any article related to Infinite scrolling page.
    Thanks for sharing :)

  32. Thank you for the wonderful idea! Earlier for some projects it seemed great to use infinite scroll pages from design point of view, but it harmed SEO. With your tutorial it will be easy to create both design and SEO-friendly pages

  33. I was looking for the same article since a long time. Thanks Neil for sharing such a valuable information. It helps a lot to make strategies for scrolling websites and many issues got resolved after reading this. It has been typical always for scrolling website to make them SEO purpose.

  34. Useful stuff, thanks. I’ve been surprised Pinterest were able to get away with what they’re doing, actually. Seeing as Google+ uses a similar format, though, I suppose Google can’t be too savage about their algorithm penalties here.

  35. Personally i don’t link infinite scrolling but your post is awesome and it has changed my mind. I never came into my mind that fb is the best example of infinite scrolling if we consider it a mini bog although i am a regular user of fb.

  36. Is there a wordpress plugin that will do pagination/infinite scrolling without us having to manually insert the codes?

  37. Again wonderful article. I wonder why you replaced blog home page with SEO tool. Isn’t that going to affect the SEO? I am curious to know it.

  38. Neil ,
    can you please tell me how to do seo for parallax design website?

  39. Adele Tiblier :

    Great read! I recently was noticing the infinite scroll of articles on Forbes.com then noticed that the meta titles were changing as I moved down to each new article upon loading. Digging through their code, it made some sense, but this article was definitely insightful to giving me the details on “how-to”.

    Thanks!

  40. Maybe I’m just old-school, but infinite scrolling sites drive me absolutely crazy. I hate it when I scroll and I scroll and I scroll and can never reach the end. I guess I’m one of those kind of guys that likes a definite beginning and an end to a page.

    Travis

  41. this looks good, but i guess it is godd for only certain type of pages or sites.

  42. Great post Neal. I think the infinite scrolling is more applicable where the user engagement is the most important KPI and not the conversion (such as news sites and sites with social media in nature). Whenever there is a conversion that needs to be made I believe most sites would be better off without the infinite scrolling which you mentioned as well. I believe this is part of what you meant that infinite scrolling is not for every site and I agree…

  43. Hey Neil, great article. I’ve designed my portfolio website using it and your article is very helpful to make it even better with points you mentioned. Thanks.

  44. Hi Neil, thanks for the article! One question is still unclear for me though. If google doesn’t “like” duplicate content on different pages, how it works for dynamically growing content? Let say bot crawled your first page, but by the time it went to the second, 2 new records were added to the top. So 2 records from the bottom of 1st page moved to the 2nd. I guess these 2 records would be considered as duplicates… What you think?

Speak Your Mind

*