Before we start with SEO, we can understand how Google crawls Javascript and what stages it uses to include pages in its index from the image below. A page goes through many stages before being indexed and then included in the index. Considering the number of pages Google crawls daily, if Googlebot is given a problem-free experience, it can fully crawl the content and include it in its index, thus ranking the page.
Since Googlebot is now evergreen , it can crawl and index Javascript-based sites better than its older version, Chrome 41. After giving a brief information, we can start the React optimization process.
You can see an example of a site written using the React Framework below;
You can find the top 10 sites written with React below;
You can see which JS frameworks the market employment database leaders use in the image below. React ranks first;
Google can render React just like it can render other Javascript frameworks. As we will explain later in the article, only the basic SEO elements need to be present on the pages.
You can see the number of clicks in Search Console for a site using React in the graph below. If Googlebot could not crawl JS, the site's traffic would not increase for months and it would have problems with indexing. If the rules are followed when presenting React to Googlebot, Google will not have any problems during the rendering phase.
When we look at the crawl statistics, we have not found any situation that prevents or slows down crawling in the last 90 days. In other words, Googlebot can read React according to the crawl data.
React is currently supported by Google, one of the major search engines, while other search engines do not fully support Angular or other JS frameworks.
Image source .
Using React Router
As it is known, React is designed to be a SPA (single page site) ; however, if we specify certain rules and SEO elements properly on our pages, we can use the SPA model in an advanced form.
It is very important for us that the pages open as a separate URL without the # (hashtag) format. Since Google has stated that it cannot read URLs with hashes, if these URLs are created with React, Google may not index them. Therefore, each URL should be created to open on a separate page.
URL with a deprecated example hash: www.sitename.com/#zeo-react
We should use React Router in URLs . You can find the sample view below;
When creating content, we recommend that you do not use setTimeout to display the content after a certain number of seconds. In such cases, Googlebot may not stay on the page and may leave the site without reading the content.
