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.