The infinite scroll is a function that allows users to keep scrolling a page without reaching its end. So as you scroll towards the end of the page, it simply loads more content. Infinite scrolling is seeing a steady increase across sites, especially for those that have a large content stream and want to offer a flawless browsing experience. Sites with large data points like Facebook, Pinterest and lately Mashable have implemented the Infinite Scroll.
The only issue while implementing Infinite Scroll is to ensure that the site design does not come with poor SEO. While Javascript is the easiest way to implement infinite scrolling, Google through its web master recommendations has stated in no unequivocal terms that:
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.
It is therefore imperative to ensure that you offer an accessible path to crawlers. In implementing infinite scrolling if you are not offering a path that is accessible to crawlers to crawl though all your content, you are setting yourself up for failure. A good way to test this is to have the Java Script disabled while viewing such a page. As long as there are links to the next group of results with next and previous links, you are well covered from the SEO perspective. This functionality also improves user experience.
For large News sites, if the pages are viewed with the Java Script disabled, it will often show links to pages archived by months. Where relevant, the links can also be organized by topics.
Here are some quick steps to implement searchable infinite scroll pages:
#1: Break up your content
While you want an infinite scroll, from the implementation perspective you need to break up the content into chunks. Of course you need to ensure that each of these pages have optimal load times.
#2: Create a relevant URL structure
Since the content is broken up into chunks, each section needs to have a unique URL. However the URLs should not be:
- Relative time based
- Should not use a code based language
#3: Use of rel=”next” and rel=”prev” in the header
Adding these to your header will ensure that Google can index the content of each page.
#4: Using pushState or replaceState
Using PushState will ensure loading for URLs in the desired sequence. Alternatively, ReplaceState will allow users to scroll backwards.
With the above tips you can go ahead and use Infinite scrolling if it suits your website, without worrying about its SEO implications.