I have a news section created with ReactJs, each news post acts as an individual page. Unfortunately Google is not indexing these pages because of REactJs. I tried to use the babel-polyfill webpack, but it's still not working. Also, I'm making my Ajax call BEFORE rendering the DOM.
Any other ideas for another workaround on this?
I have a news section created with ReactJs, each news post acts as an individual page. Unfortunately Google is not indexing these pages because of REactJs. I tried to use the babel-polyfill webpack, but it's still not working. Also, I'm making my Ajax call BEFORE rendering the DOM.
Any other ideas for another workaround on this?
Share Improve this question asked Aug 27, 2018 at 12:41 Csakany IringoCsakany Iringo 411 silver badge3 bronze badges 1- 1 Hi!. It was more of a theoretical question, I have way too many code snippets than just to through them where. Most probably wouldn't make much sense anyway :) – Csakany Iringo Commented Aug 28, 2018 at 8:11
2 Answers
Reset to default 6the google crawler won't wait for async requests to resolve, and because your pages are rendered on the users' client, they will appear to be empty pages.
You have two options. Either modify your app to render on the server, this is often called a universal app, or an isomorphic app. There are many tutorials for creating these. The other option is to pre-render static html from your code so that the crawler can see what should be there. There are numerous libraries you can use for this.
The first option is more extensible and probably preferable, but a bit more plex. So make the choice about whats more appropriate for you
It is not indexing them because they are bundled so tat they could be rendered inside your client's browser. What you ought to do is server side rendering.
You can find more about it here: https://medium.freecodecamp/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e