Change URL in pagination without refresh but detectable by Google

Question

We have a pagination. Right now we use buttons for the next, previous and page numbers in the pagination. But since we change the page number in in an onclick of a button and the Google bot doesn't click on buttons, it will only detect all links in the first page and not the other pages. Is there a way to have the pagination done in functions while also having it detected by Google?

Answer 1

To make it work, you need to:

• Assign each page a separate URL like /my-list?page=2
• Link to each page of the list: <a href='my-list?page=2'>Page 2</a>.
• Ensure that page 2 loads when you visit that URL.
• Put a JavaScript onclick event on the link that:
  • Intercepts the click
  • uses event.preventDefault() to prevent users from loading the new page.
  • Fetches the data to show in the page using AJAX
  • Writes the data into the page without refreshing
  • Uses history.pushState() to change the URL
  • Uses return false as a second method of preventing users from loading the new page.

Then users will be able to click to load the second page withouth refreshing the page while Googlebot still finds links to the second page and crawls them.

This will work even if your link is written into the page by JavaScript. Googlebot doesn't click on anything, but it does scan the document object model (dom) looking for links to crawl.