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.
Download this handy cheat sheet to learn how to create an SEO friendly infinite scrolling page.
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.
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.
You’ve probably experienced it on Facebook. This is precisely why you never stop looking at 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.
Google, despite its resistance to infinite scroll search results on its main search page, uses infinite scroll for image search.
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.
The French design agency, Département Créatif, uses a mashup of hero graphics, infinite scroll, parallax elements, and other very impressive design techniques.
Axara, a fashion brand site, uses infinite scroll with some success:
What’s the SEO problem with infinite scrolling pages?
Google, through its webmaster recommendations, makes this point as well:
So, how do you fix it?
Thankfully, there is a way to have crawlable/searchable infinite scroll pages.
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:
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:
There are two things to avoid as you structure your URLs:
- 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.
- 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.
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.
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.
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?