Google Search Console indexing non existent pages for a Create React App website with react-helmet-async hosted on Netlify

Question

Google is showing non-existing pages when I search for my website (hosted on Netlify)

it looks like this: https://*********.com.tr/Achlamydeae1901520.html or https://*********.com.tr/Cumar1152083.html (These pages Does not exist and the user will get redirected to the 404 custom page I created).

my sitemap.txt looks like this :

https://*********.com.tr/
https://*********.com.tr/about
https://*********.com.tr/companies
https://*********.com.tr/team
https://*********.com.tr/activities
https://*********.com.tr/contact

my _redirects file looks like this :

/*    /index.html   200

my robots.txt file looks like this :

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://*********.com.tr/sitemap.txt

my meta in react-helmet-async looks like this :

<Helmet>
     <title>website title</title>
              <meta
                name="description"
                content="This is a desciption"
              />
              <meta
                name="keywords"
                content="this is the website keywords"
              />
             
    
              <link rel="canonical" href="/" />
</Helmet>

my React router v6 looks like this :

      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route index element={<Home />} />
          <Route path="contact" element={<ContactUs />} />
          <Route path="companies" element={<OurCompanies />} />
          <Route path="team" element={<OurTeam />} />
          <Route path="about" element={<AboutUs />} />
          <Route path="activities" element={<Activities />} />
          <Route path="news" element={<ComingSoon />} />

          <Route path="*" element={<Error404 />} />
        </Routes>
      </Router>

How can I resolve this issue?

EDIT : In Google Search Console I found that there are more than 3k URLs like the two I have mentioned above under the Coverage category This is a screenshot to demonstrate

Answer 1

The problem has been solved thanks to the awesome people at Google Search Help.

This answer from there worked for me:

Looks like you're a purely client side rendered site here, so the page returns a 200 status. (You can't change a status code client side)

So despite the page saying 404, it's really a 200.

The two options for a client side routed site are:

• Add a noindex tag
• Or do a JavaScript redirect to a page outside the app, that actually returns a 404

Both will work about the same, and result in the same outcome (these URLs being dropped from the index) so really pick the easiest to implement.