Development10 Essentials in Implementing a SEO-Effective Infinite Scroll

10 Essentials in Implementing a SEO-Effective Infinite Scroll

While it can be beneficial to adopt Infinite Scroll, it is important that its implementation takes into account the best SEO and usability practices.

The Infinite Scroll is becoming increasingly used in Web design. In fact, many businesses are choosing this feature for their websites, either to provide a different experience to users or to stay up-to-date with the latest digital trends. While it can be beneficial to adopt Infinite Scroll, it is important that its implementation takes into account the best SEO and usability practices.

The Main Issue: Indexing

In terms of SEO, one of the major challenges that you may encounter in trying to implement Infinite Scroll is indexing. The issue stems from the fact that Google does not allow the JavaScript download to display content found below a Web page that was programmed in Infinite Scroll. As a result, when the search engine lands on your Web page, it will only see the content that is first presented to the user; the content that is visible without having to scroll. To address this shortcoming, you must help Google detect your entire website’s content to effectively index your website and promote visibility between internal pages. You can do this by implementing an interlinking strategy.

Interlinking: The Solution to Indexing

An interlinking strategy is necessary to promote effective indexing to your website’s pages. By allowing Google to effectively crawl internal pages, you can ensure your website’s domain authority will remain high.

Classic Pagination

The first step to an effective interlinking strategy (when implementing Infinite Scroll), is to use a system of classic pagination. Pagination not only allows for a better crawling of pages (as mentioned above), but it is also necessary for users who turned off JavaScript display on their Web browser for whatever reason.

pagination

By adopting a classic navigation system, we help Google access all content on your website. As a result in the search engines, your website appears completely normal without any third-party technology such as Infinite Scroll. You no longer have to be concerned about your content being detected.

The following provides practical tips on how to implement classic pagination with Infinite Scroll.

infinite-scroll-pagination

As the image above indicates, the key to successful pagination is to first divide the content into unique segments, while carefully avoiding the possibility of duplicate content. Next, one should have a unique URL per page (ex. site.com/page/1, site.com/page/2, etc.) and a unique title per page (ex. website – Page 1, website – Page 2, etc.). It is necessary to present search engines and users with navigational numbered links toward other pages. There should be at least one “Back” link and one “Next” link.

Furthermore, you must use the REL and CANONICAL meta tags in the pagination system to properly segment the process, ensure there are no issues with browsing and indexing, and to avoid the possibility of duplicate pages. You must also ensure that off limit pages all give a 404 error. Why?

“JavaScript code which is too complex or arcane could also prevent rendering the page fully and accurately.” — Google Webmaster Central Blog, May 23, 2014

Too Complex or Arcane?

Without classic pagination, the Google bot will not be able to access your content. Infinite Scroll requires a scrolling interaction that the robot in theory cannot execute. No scrolling, no content. No content, no search results.

Other Interlinking Elements

The following is a list of other key elements that need to be implemented to ensure proper indexing:

  • Well-segmented categorization: Segmentation of your content should be structured appropriately with categories and tags.
  • Well-structured menus: Do not be afraid to include in your menus all the internal pages that you think are pertinent (categories, tags, articles, etc.)
  • Interlinking module: An effective and popular technique for executing a good interlinking strategy is the use of an automatic module. For example, inserting a “related post” or “random articles” script at the end of a blog article will allow the wide distribution of pages with a high domain authority. This brings optimal indexing, and gives fresh impetus to forgotten older articles.
  • Avoid no-follow links: Surprisingly, many sites use the no-follow attribute on their own internal links. This practice basically indicates to Google that you do not trust pages that are internal to your website.
  • Sitemap: Including a sitemap on your website will help the indexing of your site.

Infinite Scroll as a Progressive Improvement

Infinite Scroll should be implemented as a “progressive improvement”; that is, it should function as an additional feature available to users that support it, without penalizing others or changing the technical structure of the site.

javascript-css-html

Asynchronous Download

For a “progressively improving” implementation, an Infinite Scroll has to load the required JavaScript elements necessary for asynchronous operation. Here is an overview of Infinite Scroll in asynchronous mode:

asynchonus

  1. The user requests a page (eg: site.com/page/3) and gets the content of this page.
  2. When it reaches the limits of content while scrolling, a JavaScript function will run, requiring new content from the server.
  3. When the server responds with the new content, another JavaScript function interprets the data and injects it into the HTML page.
  4. When there is more content to download, the server responds with a 404 error message that will not be shown to the user. Rather, we will post a notice that the content is exhausted. This feature works for both a scroll up as a scroll down.

Preloading and Caching

The asynchronous download can cause delays in the content display depending on the server’s response time. Therefore, we must use preloading and caching. The purpose of preloading is to download the adjacent content preventatively to minimize the new contents’ loading time. Caching’s purpose is to keep asynchronously downloaded content in memory.

Browsing States

1. History API (Or “FOR THE LOVE OF GOD DON’T BREAK THE BACK BUTTON”)

The Infinite Scroll is definitely a plus for continuous navigation, but what about “segmented” navigation? If a user scrolls for several sections, finds an interesting link and clicks it, then returns to the Infinite Scroll, what happens?

perfect-content

If a user visits your site, leaves, then comes back a few days later and tries to find a certain piece of content, what is their experience? How will they know where to go? The answers to these questions are found in the History.pushState.

2. History.pushState

History.pushState lets you change the URL in the address bar dynamically. When the user scrolls and reaches a new section, the address bar will change. The pushState then creates a new state in the browser navigation history. If the user clicks on the back button, it will be up to the previous URL we populate via pushState.

history.pushState(stateObject, title, URL);

window.onpopstate = function(event) {

window.location = window.location; }

Sites like Facebook and 9gag demonstrate the importance of this practice. If you scroll far down on the site page with Infinite Scroll, then accidentally press the “Back” button and return immediately to the site, you will return to the very top of the scroll instead of exactly where you left off.

SEO Benefits?

The implementation of an Infinite Scroll, when well established, will not influence the SEO performance of a website. The major advantage however, lies in optimizing conversions (depending, of course, on the objectives of the website in question!).

For example, one of the most documented cases is that of TIME Magazine, which managed to reduce its bounce rate by 15 percent simply through the implementation of an Infinite Scroll. The reason being is when users enter the Time.com website, they browse through several different pages of content without realizing they have changed pages multiple times. This increases the likelihood that they will view many content pages on the website during their visit. The main lesson learned in all of this is that a user is extremely lazy, and it’s up to you to make it as easy as possible for them to go through your content!

Thus, the implementation of an Infinite Scroll on your website may allow you to decrease your bounce rate and increase the amount of content being viewed, as well as the number of pageviews. This can be extremely interesting for sites whose main income comes from advertising with CPM ads (if the advertisement reloads when users change pages with Infinite Scroll).

Conclusion

In summary, the implementation of Infinite Scroll on your website may benefit the user experience and increase conversions, provided you follow best Web development practices. By following the advice shared in this article, you can easily avoid falling into the trap of not indexing. You will also be able to give more weight to your internal pages and much more easily achieve your conversion goals. The Infinite Scroll will help achieve conversions if set up based on UX best practices.

Francis Roussin, earned media advisor, and Philippe Vachon-Rivard, front-end developer at iProspect, also contributed to this post.

Resources

The 2023 B2B Superpowers Index

whitepaper | Analytics The 2023 B2B Superpowers Index

8m
Data Analytics in Marketing

whitepaper | Analytics Data Analytics in Marketing

10m
The Third-Party Data Deprecation Playbook

whitepaper | Digital Marketing The Third-Party Data Deprecation Playbook

1y
Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study

whitepaper | Digital Marketing Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study

1y