Javascript pagination and SEO
I have a single-page application based on react.js. In one view I have a paginated table containing links to other pages on the left side and some content on the right side. The pagination is done with reactjs and the pagination buttons don't have a href
attribute like `?page=2.
I assume that google or other search engines won't be able to access links from the tables of second or later pages. Is this assumption valid?
If that's right I will add href tags like href=link?page=2
to the pagination and to make the following pages directly accessible.
This brings up another question:
I have cannonical
tags on my page. Should I include page=2
in this tag?
Because the content on the right side does not change, wouldn't this lead to duplicate content?
Answer
First, you need to add hrefs to your pagination, this will allow page rank to flow to all the pages you have.
Then make sure when you type in the URL bar: www.example.com/section-name?page=2 your system will return a new data set, also when you ask for page 3 and 4 etc.
Also make sure to update the pagination, for example if you are on page 3, the pagination should give you page 4,5,6 etc.
After doing this, Google will see all your pages and the page rank will flow into all of them.
Next you have to add relations "next" and "previous" to your pages. These relations will tell Google what pages to follow after the current page.
EX: we are on the second page, the next page is 2 and the previous page is 1
<link rel="prev" href="http://www.example.com/article-part1.html">
<link rel="next" href="http://www.example.com/article-part3.html">
Now you can use canonical links, there are many approach this for pagination, the best one is to always give a canonical link to the first page.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM