5

I came across a site which serves multiple articles with single click using infinite scrolling.

I see page URL is updating as we reach to the bottom of 1st article and so on.

I am curious to know how it works. What is the procedure to implement it? What pros and cons it may have in terms of reporting and SEO.

6

From a technical standpoint

This page has broken down its content into different pages and uses the history.pushstate JavaScript function to change the URL as the user loads more content.

For a user: This is all one page of content that can be smoothly scrolled through. Once a 'floor' is hit, it dynamically loads in the next 'page'.

For a crawler or browser: This is seen as several pages in a paginated directory structure (eg. /category?page=2, /category?page=3).

It's important to use Use 'rel=next|prev' link headers to indicate pagination and allow Google to crawl this structure seamlessly. Google also has a blog post about optimising infinite scrolling.

There are guides on how to effectively implement this page structure and scripting.

How is this treated from an SEO perspective?

Like any other piece of paginated content. The initial page is given precedence and following pages are treated as subsidiaries.

| improve this answer | |
  • 1
    I'd add that Googlebot doesn't scroll pages. Even though it is now rendering pages, it doesn't scroll down. For SEO, you still need to maintain regular links to your articles from something like the home page. – Stephen Ostermiller Jun 21 '17 at 16:19
1

Google’s Martin Splitt Explains Why Infinite Scroll Causes SEO Problems

What Googlebot does is land on a page and crawl what is immediately visible.

According to what is stated by Splitt, Googlebot cannot crawl content that loads only after a page is scrolled.

Googlebot not being able to scroll could potentially lead to a lot of content missing from Google’s search index.

Alternatives to Infinite Scroll

He mentions that native lazy loading for images is fine, and using IntersectionObserver API is acceptable as well.

If you absolutely must work with lazy loading for key web page content, then make sure your JavaScript library supports loading data when it enters the viewport.

Another route you could go is using paginated loading in addition to infinite scroll.

Google’s official documentation on fixing lazy-loaded content recommends supporting paginated loading for infinite scroll:

“If you are implementing an infinite scroll experience, make sure to support paginated loading.

Paginated loading is important for users because it allows them to share and reengage with your content.

It also allows Google to show a link to a specific point in the content, rather than the top of an infinite scrolling page.”

To ensure your website fully supports paginated loading, you must be able to provide a unique link to each section that users can share and load directly.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.