I am trying to create a website using react js (using react routers , not using next.js). liveitcourses.com is the name of the website which is still in progress. But I am facing a strange issue. On every page of the website whenever I am trying to see the "view source", the tag body is showing empty. I am afraid if it is not showing the body contents in the view source, search engines will not be able to crawl my pages, hence bad impact on SEO. I just started react a few weeks ago. Is it the normal react js behavior or should I need to correct it? If my understanding is correct then how can I make my website crawlable for search engines. Please suggest. Below body tag is empty while title and other meta tags are present.
<html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Learn IT courses online in interactive and live classes."/><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/><title>Best online IT courses based on live classes and interactive programming sessions</title><script defer="defer" src="/static/js/main.80f62ed5.js"></script><link href="/static/css/main.53eb7892.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
CodePudding user response：
Reactjs is rendering code javascript with render in client, so if you view source code, you cant view it. if you click F12 and choose elements tab, you can view code is rended but it from load js file. So if you want to SEO for performance, you should choose SSR ( server side rendering), in reactjs is next.js, in vuejs is nuxt.js.
CodePudding user response：
That's how React is, an UI library for making SPA (Single Page Application), where everything is handled via JavaScript in the browser. For an application made entirely with React, indeed, on the first request, the server send this empty template with scripts to be executed. And yeah it's bad for SEO as Search Engine Crowlers are on hurry. If that's something that matter for your application, you should try Next.js, Gatsby... or use Server Side Rendering as known for decades with PHP, Node.js...