Internet Explorer 10 introduced a new featured called Flip Ahead. This makes a best guess at detecting the next page, article, post, thread, product or so on. When the user performs a forward swipe gesture (or presses the forward button on a mouse) it loads the detected page. If this sounds familiar to you, you’ve probably heard about or used Opera’s Fast Forward feature. This is roughly the same concept (although Opera bundles in other things, such as logging in), and can be activated using a mouse gesture, or pressing the space bar when reaching the end of the page.
Both implementations use heuristics to detect the next page. For Opera they are defined in the fastforward.ini file. The location of this file can be found by enteringopera:config#UserPrefs|FastForwardConfigurationinto the Opera url field. I’m unsure of the exact heuristics employed by IE. Browsing history data is reported back to Microsoft to improve Flip Ahead, so I expect the heuristics will evolve time goes on. As the feature “phones home’ it is opt-in and thus disabled by default.
Provide hints to Flip Ahead and Fast Forward with rel-next
While both implementations can apply some advanced heuristics to detect the next page, the browser is basically guessing what is the most appropriate page. As a page author, you can directly give hints to the browser on what page you’d like to load when the Flip Ahead or Fast Forward action is performed. Make sure to specify a page that makes sense, otherwise you will confuse the user. Examples include the second page of an article if you use pagination, the next article on your blog, next page of search results, or the next image in a slideshow.
The best way to specify the next page is to use a link element in the head with rel="next":
<head>
…
<link rel="next" href="/page/2" />
</head>This is the only approach I could find that works in IE (with limited testing in the Microsoft store) and has a number of advantages in Opera: it is the heuristic with the highest weighting, it uses standard markup that can lead to other benefits, and it is language independent. Other heuristics in Opera include looking for link text such as “more” or “next”. As each language uses different link text, the browser will only detect words for the languages it knows about.
In Opera, if you rely on link text within the page, the last occurrence of the term with the highest ranking wins. Due to this, you have to be careful not to introduce a new link with similar link text later in the document. This can be a major problem as the next page can be hijacked if you accept user generated content (such as comments on this blog). Links with rel="nofollow" are not ignored, so these links are considered when calculating which link should be the next page. Using a link element with rel="next" mitigates this risk.
I will update this post if I find out other ways to trigger Flip Ahead in IE. When spoofing as IE10 touch, the new MSN provides a rel-next link, but Bing does not, so I assume there are more heuristics. Their next page link uses “next” as the link text, but this doesn’t seem to be detected when I tried in a test file.
Other benefits of using rel-next
HTML4, and later HTML5 define rel=”next” as a valid sequential link type. This indicates the next logical document in sequence. As such, browser and search engine providers have adopted it to bring additional benefits.
SEO benefits
Google and other search engines support rel=”next” and rel=”prev” links. Adding these hints will allow the search engine to return more appropriate results, such as the first page of a multi-page article or the first image in a slideshow.
Prefetching in Firefox
If you have chosen the next page link wisely, it is likely that the user will want to visit that page. Possibly even more likely when the browser supports a method such as Flip Ahead to automatically detect it.
Firefox (and other Gecko based browsers) support a feature known as prefetching, which uses rel=”next” as a hint to load that resource in the background. The advantage of this is that if the correct page is prefetched, the loading time for that page will be reduced. As well as rel=”next”, you can also use rel=”prefetch” to prefetch a resource. The main difference is that rel=”prefetch” can be used on any type of resource, while rel=”next” should only be used for the next page, as it contains other semantics beyond being a prefetching hint. IE11 also supports rel=”prefetch” to prefetch a resource, but does not apply this behaviour to resources that use rel=”next”.
Chrome and IE11 support something called prerendering which goes a step further and actually renders the page in the background after fetching it. This can be triggered using rel=”prerender” on the link element, and doesn’t support rel=”next” as far as I’m aware.
Wrap up
So there you have it. One little link element with rel=”next” and you get a whole host of benefits across three different browsers and the leading search engines. Just remember to choose the next link wisely, as it can degrade the experience if your site does something unpredictable.