Yesterday, we talked about infinitely scrolling homepages, and whether they're a good design decision when it comes to SEO. While tricky and often prone to mistakes, infinite scroll has its uses, especially where usability is concerned. So today, we'll talk about some SEO requirements you should keep in mind before you go ahead and implement an infinite scroll. These tips will help you design a better homepage for users as well as search engines.
There are two parts to this story. This is the second part. You might like to read our previous post before moving on.
Part 1: Are Infinite Scrolling Homepages SEO Friendly?
Part 2: SEO Requirements To Remember When Implementing Infinite Scroll
Don't break functionality!
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.
Downloading asynchronously
Asynchronous roughly means 'not bound with time'. When a regular website loads, most of its content loads synchronously - time driven, that is to say it loads when user visits. But for an infinite scroll, you cannot load the entire feed when the user first lands on the page.
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:
- The user requests a page (eg: site.com/page/3) and gets the content of this page.
- When it reaches the limits of content while scrolling, a JavaScript function will run, requiring new content from the server.
- When the server responds with the new content, another JavaScript function interprets the data and injects it into the HTML page.
- 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.
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.
Maintaining history
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?
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.
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 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.
These were some of the things to keep in mind. We'll soon create a tutorial on actually implementing an effective infinite scroll, so stay tuned!
