Infinite scrolling has become a popular consideration for websites following its use on Facebook and Twitter. Put simply infinite scrolling is an enhancement to the user experience where a continuous stream of content is displayed i.e. additional content is appended to the bottom of the page as users scroll down.

This is done on the fly without the need to physically navigate to a new page (as you would on a paginated news page), giving the sense that the page will infinitely continue hence it’s name. This is therefore by no means the right solution for every website and should be considered only where it will benefit the user experience.

With the ultimate goal to create more engagement, increased time on site and page depth, we must look at the likely behaviour of the target audience and present a page that fulfils their requirements and expectations.

Many sites with infinite scrolling have enhanced the overall experience, however it could present a negative for product orientated sites, which attract users with a specific isolated intent. For example, where a user is directly looking for a product and more information about it, if presented with infinite scrolling content this could lead to frustration and ultimately push the user onto a competitor site.

Pro’s – for a suitable website and subject.

– Increase time on page

– Increase page depth

– Presents more related topical information

– If set up correctly can increase SEO value.

Cons

– Can be frustrating due to continuous scroll with no sense of an end point.

– Can be distracting if trying to achieve a specific goal.

– Can inhibit SEO if not set up correctly.

– Not so much of a con, but more of a caveat.  When optimising for SEO, ensure you stay within Google’s guidelines with regards to the intent behind any “optimised’ additional links, as the opportunity will arise to place links within the page that is intended for Google i.e. the gracefully degradated view of the page that has pagination and caters for viewers without JavaScript.

If you do decide to implement infinite scrolling there are a few things that will impact the search engines, which is why it’s important to get it right.

Implementing infinite scrolling without SEO in mind can lead to the search engines not being able to crawl and index your site pages. This is because as a user scrolls down a page, more content is then automatically updated to append to the bottom of the page. A search engine robot is not able to scroll and therefore an alternate solution needs to be provided.

It is best practice to ensure that not only are you planning to allow the robots to understand and view the content but when implementing infinite scrolling you should also consider all users and implement graceful degradation techniques to accommodate.  Graceful degradation means implementing techniques that look to provide every user with a functioning quality experience, thereby accommodating different browsers with limited functionality and viewers without JavaScript enabled etc.

An example solution would be to have a page which, for a user with a modern browser would get the enhanced infinite scrolling experience.

For a user with an older browser, the page would gracefully degrade to a version of the page with no viewing issues and for a robot that doesn’t execute JavaScript, would automatically be provided with a suitable replacement to the infinite scrolling page i.e. paginated page.

Google posted on the 13th February 2014 their recommendations for using infinite scroll.

Key Points

– Divide your content into a paginated series.

– Ensure no overlapping pages to avoid duplicate content.

– Ensure all individual pages of content are accessible to users and robots.

– When structuring the URLs for infinite scrolling use full URL’s to reduce risk of errors.

– Avoid time based URL’s i.e example.com/topic/firstpage.php?name=topic1-items&days-ago=5 so that the URLs created will be accessible weeks later etc.

– Ensure each page contains <link rel=”next” href=”/items?page=9″/> and “rel=prev” values in the <head> section to connect the group of pages, as values in the <body> are ignored by google for indexing purposes.

– Google recommend including pushState by itself or with replaceState, to resemble a click or turning a page and to provide the ability to back up through to the most recently paginated content.

Top tips.

1. Check out other sites with infinite scrolling: Mashable.com and test how they handle the search engines.

2. Disable JavaScript and see what it looks like without infinite scroll. Notice the archiving, link table at the bottom leading to the rest of the content.

3. Always implement pagination components in the <head> as values in the <body> are ignored by Google for indexing purposes (as they could be created by user-generated content).

4. To improve the user experience and search engine optimisation you may wish to implement sticky navigation and or footers.

Helene Celine Hall

Helene Celine Hall

Columnist


Helene is a Digital Marketing Director at Gravytrain.