SEO in React based SPA

user_4519246 0
Viewed 1072

I have a single page application built using React library (Create React App is used). And I have different routes inside the application which I am resolving using React Router, for instance http://<domain-name>.com/faq. Server side rendering is not used and right now I don't have a possibility to use it.

I want inner pages of that application to be indexed by Google search engine. In order to do that I did the next things:

  • Make inner pages (for instance /faq page) accessible via their routes
  • Created sitemap.xml file inside public folder so that when the application is built Create React app puts this files into /build folder right after index.html file

Sitemap file contains:

<?xml version="1.0" encoding="utf-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9  
  http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
>
  <url>
    <loc>https://www.<domain-name>.com</loc>
    <priority>1</priority>
  </url>

  <url>
    <loc>https://www.<domain-name>.com/faq</loc>
  </url>
</urlset>

Where <domain-name> is a real domain name. I omited the rest of the pages here for the sake of simplicity.

But unfortunately those pages are not being indexed by Google search engine even a week after I deployed this application. So I decided to use Google search console (https://search.google.com/search-console/welcome) and found that all of my inner pages are not found.

enter image description here

So my question is how to make pages listed in the sitemap file to be indexed by Google search engine?

NOTE: I am not sure if it's important or not, but when I open FAQ page in the browser and open Chrome dev tools, I see that there is a request to the document /faq and 404 response

enter image description here

single-page-application react-router reactjs seo
1 Answers

Google should be able to index React applications. If it cannot do it and doesn't see your routes, it's possible that you have an error in your app. If it works in a browser, something still can cause an error for Google. You can use for example Google Pagespeed at least to be sure it can render your app properly.

Alternatively you can do dynamic rendering -- generating a plain HTML on the server for bots. Here is how to do it with Nginx and Apache https://trackabi.com/blog/single-page-application-seo But, again, Google can crawl React SPAs, there is probably an error.

user_147587630
Related