arrowkeys.js: Bringing Life Back to the prev/next Link Tag with Keyboard Navigation
As you may know, Google no longer takes the ancient...
<link rel="prev" /> and <link rel="next" />
...tags into consideration; per https://searchengineland.com/google-no-longer-supports-relnext-prev-314319:
Google has stopped supporting the rel=next/prev markup it launched back in 2011. The interesting part is, Google has not supported it for the past few years and didn’t tell anyone!
Meanwhile, many indexers still do give credence to these tags and we can give them new purpose by combining them with an arrow key navigation technique already familiar to this blog:
function checkKeycode(e)
{
var keycode;
if(window.event) keycode=window.event.keyCode;
else if(e) keycode=e.which;
var next = document.querySelector("link[rel*='next']").href;
var prev = document.querySelector("link[rel*='prev']").href;
if(navigator.appVersion.indexOf('MSIE') != -1)
{
if(keycode=='37' & typeof prev != 'undefined') window.location.href=prev;
else if(keycode=='39' & typeof next != 'undefined') window.location.href=next;
}
else
{
if (e.target.tagName != 'INPUT' & e.target.tagName != 'TEXTAREA')
{
if(keycode=='37' & typeof prev != 'undefined') window.location.href=prev;
else if(keycode=='39' & typeof next != 'undefined') window.location.href=next;
}
}
}
document.onkeyup=checkKeycode;
Example usage:
<head>
<link rel="next" href="/arrowkeys-js" />
<link rel="prev" href="/hello-again-world" />
</head>
Values for the href attribute may be relative or fully qualified.
Comments
There are no comments for this item.