Three major news website redesigns this year look very different but have an important feature in common: articles that seamlessly transition to new content, without requiring readers to click or tap headlines and then wait for new pages to load.
This “continuous scroll” strategy for news sites’ article pages is gaining momentum. It’s been adopted by
So as readers increasingly enter sites from “side doors” or article pages, media organizations are trying to figure out how to get them to stick around. Pew recently found that visitors from Facebook
than direct visitors. Here’s how sites that relaunched in the first half of 2014 are addressing that problem by making use of the continuous scroll (aka infinite scroll) feature in their article pages:
Since its March redesign, Time.com’s bounce rate — the percentage of visitors who leave the site after viewing only one page — has declined by 15 percentage points, according to managing editor Edward Felsenthal. The percentage of desktop visitors going to another piece of content jumped 21 percentage points between February and May.
Felsenthal attributed that to the continuous scroll, which provides a clickless path for readers to reach another story. He said the left rail, which serves as a “traveling homepage” of links to the top stories of the moment, also helped.
The fact that Time.com queues up top stories, not related stories, is crucial to the site’s strategy for serving social visitors, Felsenthal said: “In many ways the major objective of our redesign was to showcase for those users the full Time offering.”
NBC News
The redesigned NBC News takes a different approach from Time. Article pages transition into related stories, not top stories. And some stories are compiled into “storylines,” so if you’re interested in
“hot cars and kids,” you can read a stack of more than 30 stories.
Mobile page views in June were up 30 percent over the previous 12-month average, according to an NBC News spokesperson. On average, NBC News readers on desktop and mobile are seeing nearly 20 percent more pages per visit than before the site’s
February redesign.
Los Angeles Times
The LA Times redesign is less seamless than the other two in terms of transitioning quickly to the next piece of content. There’s a choose-your-own-adventure quality to the layout; non-blog stories transition into a section page instead of another article page based on which section you choose.
That gives readers more control over where the site takes them next, but requiring readers to choose what they see next adds some friction that the other sites lack.
A spokesperson for the LA Times said it was too early to share specifics about how the newspaper’s new site is performing. She summed up the goals of
the May redesign:
• Eradicating print-centric and antiquated web concepts, such as “the fold,” “the jump,” “endless clicking” and “the dead end” with endless scrolling and multi-directional navigation
• Seamlessly pathing readers from one piece of content to the next, with section fronts and article pages anchored by a row of thumbnails that automatically transport readers to related coverage or other sections
Quartz, Fortune, and Cosmopolitan
The homepage-less
Quartz is a clear influence here, particularly for Time. Whatever page you arrive on via social media occupies the top spot in the story stack, with top news — not related stories — below. Editorial news judgment plays a big role in the reader’s experience.
Quartz senior editor Zach Seward said it’s nice to see others emulate one of his site’s signature features: “It must mean we’re onto something.” He also said he doesn’t like the term “infinite scroll”:
The intent is to help users who get to the end of a story but want to keep reading. Some sites have dead ends, others create paralysis of choice. We choose to quietly suggest just one more story, which users can easily scroll into or just ignore. It’s all about that one moment rather some kind of infinite experience.
Seward
recently told Digiday’s Ricardo Bilton that Quartz estimates “readers view about 50 percent more stories per visit than they would without the option to scroll.” And, Seward said, “When people choose to read another story on Quartz, about 80 percent do so by scrolling, as opposed to clicking on a headline.”
Time Inc.’s
Money and Fortune have also adopted the Quartz-inspired Time.com template for their redesigns. And at the
“sexy new Cosmopolitan.com”, a long stack of related stories is presented to readers at the bottom of article pages.
The article page is the new homepage, so what goes on underneath articles seems to be the paramount concern when redesigning a media site in 2014. Some, like Time and Quartz, choose to “quietly suggest” a particular story. Others, like the LA Times and Cosmo, are using the space below stories to offer lots of choices for readers. But all of them have redesigned with an eye toward that second click or page view.
The Infinite Scroll is becoming increasingly used in Web design. In fact, many businesses are choosing this feature for their websites, either to provide a different experience to users or to stay up-to-date with the latest digital trends. While it can be beneficial to adopt Infinite Scroll, it is important that its implementation takes into account the best SEO and usability practices.
The Main Issue: Indexing
In terms of SEO, one of the major challenges that you may encounter in trying to implement Infinite Scroll is indexing. The issue stems from the fact that Google does not allow the JavaScript download to display content found below a Web page that was programmed in Infinite Scroll. As a result, when the search engine lands on your Web page, it will only see the content that is first presented to the user; the content that is visible without having to scroll. To address this shortcoming, you must help Google detect your entire website’s content to effectively index your website and promote visibility between internal pages. You can do this by implementing an interlinking strategy.
Interlinking: The Solution to Indexing
An interlinking strategy is necessary to promote effective indexing to your website’s pages. By allowing Google to effectively crawl internal pages, you can ensure your website’s domain authority will remain high.
Classic Pagination
The first step to an effective interlinking strategy (when implementing Infinite Scroll), is to use a system of classic pagination. Pagination not only allows for a better crawling of pages (as mentioned above), but it is also necessary for users who turned off JavaScript display on their Web browser for whatever reason.
By adopting a classic navigation system, we help Google access all content on your website. As a result in the search engines, your website appears completely normal without any third-party technology such as Infinite Scroll. You no longer have to be concerned about your content being detected.
The following provides practical tips on how to implement classic pagination with Infinite Scroll.
As the image above indicates, the key to successful pagination is to first divide the content into unique segments, while carefully avoiding the possibility of duplicate content. Next, one should have a unique URL per page (ex. site.com/page/1, site.com/page/2, etc.) and a unique title per page (ex. website – Page 1, website – Page 2, etc.). It is necessary to present search engines and users with navigational numbered links toward other pages. There should be at least one "Back" link and one "Next" link.
Furthermore, you must use the REL and CANONICAL meta tags in the pagination system to properly segment the process, ensure there are no issues with browsing and indexing, and to avoid the possibility of duplicate pages. You must also ensure that off limit pages all give a 404 error. Why?
"JavaScript code which is too complex or arcane could also prevent rendering the page fully and accurately." — Google Webmaster Central Blog, May 23, 2014
Too Complex or Arcane?
Without classic pagination, the Google bot will not be able to access your content. Infinite Scroll requires a scrolling interaction that the robot in theory cannot execute. No scrolling, no content. No content, no search results.
Other Interlinking Elements
The following is a list of other key elements that need to be implemented to ensure proper indexing:
- Well-segmented categorization: Segmentation of your content should be structured appropriately with categories and tags.
- Well-structured menus: Do not be afraid to include in your menus all the internal pages that you think are pertinent (categories, tags, articles, etc.)
- Interlinking module: An effective and popular technique for executing a good interlinking strategy is the use of an automatic module. For example, inserting a "related post" or "random articles" script at the end of a blog article will allow the wide distribution of pages with a high domain authority. This brings optimal indexing, and gives fresh impetus to forgotten older articles.
- Avoid no-follow links: Surprisingly, many sites use the no-follow attribute on their own internal links. This practice basically indicates to Google that you do not trust pages that are internal to your website.
- Sitemap: Including a sitemap on your website will help the indexing of your site.
Infinite Scroll as a Progressive Improvement
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.
Asynchronous Download
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.
Preloading and Caching
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.
Browsing States
1. History API (Or "FOR THE LOVE OF GOD DON’T BREAK THE BACK BUTTON")
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.
2. 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 and 9gag 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.
SEO Benefits?
The implementation of an Infinite Scroll, when well established, will not influence the SEO performance of a website. The major advantage however, lies in optimizing conversions (depending, of course, on the objectives of the website in question!).
For example, one of the most documented cases is that of
TIME Magazine, which managed to reduce its bounce rate by
15 percent simply through the implementation of an Infinite Scroll. The reason being is when users enter the Time.com website, they browse through several different pages of content without realizing they have changed pages multiple times. This increases the likelihood that they will view many content pages on the website during their visit. The main lesson learned in all of this is that a user is extremely lazy, and it’s up to you to make it as easy as possible for them to go through your content!
Thus, the implementation of an Infinite Scroll on your website may allow you to decrease your bounce rate and increase the amount of content being viewed, as well as the number of pageviews. This can be extremely interesting for sites whose main income comes from advertising with CPM ads (if the advertisement reloads when users change pages with Infinite Scroll).
Conclusion
In summary, the implementation of Infinite Scroll on your website may benefit the user experience and increase conversions, provided you follow best Web development practices. By following the advice shared in this article, you can easily avoid falling into the trap of not indexing. You will also be able to give more weight to your internal pages and much more easily achieve your conversion goals. The Infinite Scroll will help achieve conversions if set up based on UX best practices.
References
- Francis Roussin, earned media advisor, and Philippe Vachon-Rivard, front-end developer at iProspect, also contributed to this post.
- http://searchenginewatch.com/sew/how-to/2392566/10-essentials-in-implementing-a-seo-effective-infinite-scroll
- http://www.poynter.org/news/mediawire/257466/time-coms-bounce-rate-down-15-percentage-points-since-adopting-continuous-scroll/
