Best Way To Do SEO For A Client Side Rendering React Project
How to handle SEO for a single page application which is built using ReactJS, Webpack, React Router for routing and redux store? Also Google, Facebook crawler should be able to see my website content for indexing.
Handling SEO's for single page applications is tricky. This is not only relevant to react, but to all front end libs and frameworks(angular etc.)
If most of your information is coming from API call in you single page application then google bots actually dont wait for API calls to finish. Now as your API call is not completed your content is not read by google bots and there goes your SEO.
I tried above in google console. I would say do give it a try. They show a snapshot of how bots actually see your page.
So from my personal experience I would say the best solution would be to go for server side rendering. There are 2 ways in which you can do so:-
- Either use phantom.js to pre-render your pages or Use prerender.io service which use phantom.js internally.
- Render first load of your app from backend, by backend I mean dont call the API's but render information by querying the database directly(this should be only for first load, after that react-router should pick it up fine as single page application).
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?