So I don't have access to any server side languages only javascript. I currently have pagination implemented on a page that dynamically pulls in data from an xml file. Below is an example of the pagination html, this example being on page 4. Each time you click a page number or arrow the code is regenerated based off the url variable while moving the rel attributes where they need to be. Is this best route for SEO or is there a better way?

Also should the canonical tag just be the base url like : PATH/all-content.html or should that be generated as each page changes as well. Like PATH/all-content.html?page=4

<div id="pagination">
<a rel="prev" class="prev" href="?page=3">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="page-num-container">
    <a href="?page=1">1</a>
    <a href="?page=2">2</a>
    <a href="?page=3" rel="prev">3</a>
    <a class="current" href="?page=4">4</a>
    <a href="?page=5" rel="next">5</a>
    <a href="?page=6">6</a>
    <a href="?page=7">7</a>
    <a href="?page=8">8</a>
    <a href="?page=9">9</a>
    <a href="?page=18">18</a>
<a rel="next" class="next" href="?page=5">
    <i class="fa fa-angle-right" aria-hidden="true"></i>

  • Pagination never works well for SEO anyway. If it isn't on page 1, search engines aren't going to rank it very well. The individual items can get well ranked, but not through pagination. Jul 18, 2017 at 17:18

1 Answer 1


Unfortunately, this is not how rel="prev" and rel="next" work. They should be placed on <link> elements in the <head> tag, not on <a> elements.

The canonical URL can contain the specific URL, so including the page parameters.

You can learn more about the specific of rel="prev" and rel="next" or here: https://support.google.com/webmasters/answer/1663744?hl=en

  • Is it ok to dynamically generate those in the head tag based on the url page variable? Jul 18, 2017 at 17:09
  • Yeah, I guess it is, would need to see the specific setup to know if it was done well though Jul 18, 2017 at 17:33
  • The format would be the same as above except the rel attributes would be removed from anchor tags and the link tags would be added to the header. So say you click 4, the page url would be example.com/all-content.html?page=4 then the two link tags that would be generated in the <head> would be: <link rel="prev" href="http://www.example.com/all-content.html?page=3"> and <link rel="next" href="http://www.example.com/all-content.html?page=5">. The setup before JS runs is just two empty divs, which I know isn't the best, but I believe it's my only options with no server language. Jul 18, 2017 at 18:04
  • While Google is able to crawl JS these days, I would highly recommend to find a way to get this in the actual page source (meaning it would have to be pre-rendered by a server-side script) instead of adding this via JS. While I see your problems on that end, I'm concerned whether Google will parse the prev/next when you add them post-render via JS. Jul 19, 2017 at 6:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.