Infinite scrolling-known as infinite scrolling-is one of the most widely used techniques for displaying content in taxonomies. It could be product sheets from an ecommerce store in a tag, blog posts or articles from a thematic magazine in their respective categories. In each case the infinite scroll is decisive.
Basically, the organization of items in an archive relies on pagination, a system that allows the list to be divided into archives with the same number of items organized in ascending order.
Underlying these resources is a list of numbers and navigation elements linked to allow the user and the search engine spider to reach the various sections. All very logical. But then why assume a different solution? And is it really right to focus on infinite scroll?
What is infinite scrolling and what is it used for?
By this term we mean a feature that can automatically load content without requiring action on the part of the user. For example, if I go to the web page of a large online magazine or one of the many social networks I can use this solution. With infinite scrolling there is no button to load more posts or to scroll to other pages.
Everything moves thanks to a JavaScript that is activated the moment the user arrives at a certain point on the page while other content is automatically loaded in the background.
The reason for pointing toward infinite scrolling? To involve the user well in reading online, and this is the main difference from other methods of organizing content.
To read: SEO cannibalization of websites.
Difference with other organizational structures
We emphasized the basic feature of infinite scrolling: the reader arrives at a certain level of the page, a loading wheel is usually activated, and new items are loaded into the list. Without any action on the part of the audience. The standard pagination is one that features numbers and arrows.
How does this system work? Usually there are the first few pages of the archive linked and a tool for moving back and forth. When there are numerous, there are suspensory dots and the link to the last one. There is an intermediate solution between these systems: load more.
What happens in this case? There is no pagination at the end of the list but a button that, when clicked or selected via smartphone, allows new posts, articles or product sheets to be shown.
Advantages and disadvantages of infinite scrolling
As you can well imagine, such a radical solution can be a source of different thoughts from the point of view of pros and cons. There are the design and UX fundamentalists, along with SEO experts, who push for ordinary pagination. The avant-gardists and revolutionaries, on the other hand, would like infinite scrolling everywhere. At most, load more. But are these really useful solutions all the time?
Why infinite scrolling pays off
The substantial advantage concerns the possibility of exponentially increasing pageviews and content readings by eliminating a stumbling block related to web page usability: the click. Especially from smartphones, it can be useful to have a continuous unfolding of the archive to facilitate reading.
For an ecommerce browsed from mobile, this means increased possible sales; for an online magazine earning from advertising, we are talking about increased revenue related to clicks. In short, the main benefit of infinite scrolling: you keep your audience longer on the portal or blog.
The cons of infinite scrolling
In the face of such an appealing benefit – longer user dwell time and pageviews – there are several disadvantages to your decision. First, it lacks a footer.
Content loads all the time. And in this area are elements crucial to your business such as contact information, social media links, privacy or security notices, copyright elements and more. In short, a number of accessibility and UX rules are broken:
You can’t reach the previous location with the keyboard.
The browser back button does not work with infinite scrolling.
The absolute URL of these resources with the article listing is absent.
In addition, there is one aspect that is of great concern to SEOs and developers – but also to careful web designers, namely optimization for Google ranking. In fact, the latter does not get along very well with the most widely used method of developing infinite scrolling. JavaScript and SEO are not incompatible, but great care must be taken. Otherwise, there is a risk of registering problems in ranking.
These SEO problems of infinite scrolling also depend on the presence of layout shifts. That is, the staggered placement of design elements of a web page as it is uploaded. This is part of the vital parameters known as Core Web Vitals that always fall under ranking signals.
SEO and infinite scrolling: problems and solutions
The relationship between Google and indexing content that depends on JavaScript-related functions and activities has improved over time. The webmaster guide points out that everything works if certain rules are followed. For example, here is what Mountain View suggests on this topic:
“The Google indexing system renders a web page as the user would see it, including images, CSS, and JavaScript files. To see which page assets that Googlebot cannot crawl, use the URL Inspection tool.”
DEVELOPERS.GOOGLE.COM
Google indexing renders a web page as the user would see it, including images, CSS, and JavaScript files. The main problem SEOs encounter with infinite scrolling?
Crawlers can’t always emulate manual user behavior, such as scrolling or clicking a button to load multiple posts. And they don’t always access all the items in the archive or gallery. If crawlers cannot access content, it is difficult for it to appear in search results.
How to have SEO friendly scrolling? Official solutions guide us in a few directions.
Division of content into pages
This is one of the basic rules to avoid problems: divide the archive you want to manage with infinite scrolling into standard HTML pages that can be accessed when JavaScript is disabled.
Evaluate the amount of elements to be included for each page while also considering the loading speed-which must be low-and the possibility of reaching the desired element in a short time. Divide the content so that there is no overlap between pages.
Insert pagination links
Look at the example Google provides to understand how best to handle infinite scrolling to be sure to avoid SEO problems. As content moves downward, it loads with independent URLs that change automatically. With page links at the bottom you move from one publication to another. Then you provide the crawler with quick and secure access to all archive resources.
Canonical is handled by the head. Above is an example of first and second page HTML code: there are rel=”next” and rel=”prev” which are deprecated long ago.
Finally, do not include sub pages in XML sitemaps.
Use SEO friendly URLs.
Even if you have infinite scrolling on your website make sure you use 404 pages for non-existent individual archive pages. Also aim for an SEO friendly structure that is simple and indicative of the content.
Sample URL suggested by Google: scrollsample.com/items?page=3.
Add replaceState or pushState
Thanks to pushState, you can suggest to the browser what to load and display on the page. As Google suggests, you can also use replaceState based on the behavior of your site’s users but it is suggested that you include pushState if the URL needs to update as a result of scrolling.
It becomes critical to land the user at specific point in the content, rather than at the top of a continuous scrolling page.
Must-read: doing good SEO pruning.