SEO Friendly Pagination Component With React like google
pagination is required for those application which have lots of data to display. So, we breakdown the data into pages and browse through page by page.
I build a react application in that pagination is required. So, I used http://react.semantic-ui.com/ pagination components and it’s quit good.
But when I run site-map test for application. There is no record of the other pages except the input URL. So, I realize I’m doing a click event on every pagination number not binding element with hyperlink(<a href=’#’>).
I google react pagination plugin but I didn’t find the SEO friendly pagination with hyperlink. So, I decide to write small logic and build an custom SEO friendly pagination.
So, I start writing the code for pagination that will be friendly with google bot.
Assumptions:
I’m assuming that routes format is like this /page/<page_no>. So, page is hard coded. So, you can edit that part as your application requirements.
/page/2
/page/3
/page/20
index.js file where we will import <pagination> component.
index.js
<Pagination totalPages=”20" params={match} />
The Pagination components need two props one is totalPages and params={match}(passing to get the current page through URL).
const activePage = parseInt(props.params.match.params.page_no);
And parseInt is requires because the params are in string and we need the active page into integer.
pagination.js
So, basically here we just have to get the startIndex and endIndex according to the active page. So, I’m using basic if and else condition as google.com using.
Here I’m embedding the codesandbox.io link to play with code.
Yes, that all for pagination if you have any suggestion to improve this pagination components then comment down below.
Also, you can hit the clap button if you like this post. And I’ll get motivation to write more tech post for the community.
Thanks 😎 👏
