Seo Optimization with React
Hi forum,
I am currently working on my bootstrap startup landing page. After 3 weeks I am finally ready to add the content.
I had never bothered to think of SEO as my former projects all revolved around internal business applications.
React is my strongest suit by far. I have started looking at react-snapshot for SEO optimization.
For those of you working on frontend frameworks, especially React, do you have any wisdom to share?
I'd strongly recommend using either Next.js or Gatsby to build your application because they have SEO working pretty much out of the box. I made the mistake when I wrote my first app to use the create react app starter and I was sad to see when I finally deployed it that none of the SEO from dynamic pages came through. If that's your situation a good solution is prerender.cloud which will work for most applications but it can cost a little bit per month depending on your traffic.
Hi Angular developer here, the main problem is not with the frameworks but mainly with the search bots, basically those bots just access the URL and caches whatever it gets. It works good for old serverside rendering architectures like php( that's why WordPress SEO is very good) etc, but as you know, all new frontend frameworks don't work like this, first request only fetches the index file and then browser executes the JS codes and does the soft-routing and request the necessary data and then generate the HTML but search bots does none of these so nothing gets indexed so no SEO.
Google bot does execute JS but the frequency is less and google is not the only one, other search engines and social share (fb,twitter, whatsapp) are also bots, without some assistance, those cannot also see your contents.
Earlier the only way was server-side rendering (Angular Universal ) which needs lots of effort to code. Basically these bots need plain vanilla HTML to understand.
Some solutions: Rendertron
https://github.com/GoogleChrome/rendertron#readme
Basically, you put a headless chrome on running on the server, when those bots come to crawl only then ask the headless chrome to render and return the plain HTML
https://www.youtube.com/watch?v=ydThUDlBDfc
https://prerender.io/
Also does the same thing in similar fashion
Hope it helps :)
I would recommend using Next.js. They have amazing features such as automatic static optimization (which means that if a page isn't fetching dynamic data, then it gets automatically turned into a static page -- great for SEO), and server-side rendering (also great for SEO).