How can i add sitemap to react js

I research for a bit but i didn’t really understand it so i did the sitemap on my own and hard coded it but the problem is google has to recognize it and for that i need to put the sitemap on the url how do i do that i have put it in the app.js as a route but when i go to it gives an error and when i give the link to google it says its an html file please help
thanks.

It doesn’t go in the routes, you aren’t routing anything to it. Just make a text file (like sitemap.txt or whatever) and put this in it with whatever the URL is:

https://whatever-the-url-is.com/index.html

Put it in the public folder if you’re using CRA or just in the folder that it’s being deployed to. Then go to the link Google gives you to submit the file, upload it there.

If it’s a React app, it’s not a website, there’s only one HTML file, so that’s all it can be, unless I’m missing something here

but there isnt any upload thing on google search console there is only url that you can put on.

You either add the path to the sitemap in a file called robots.txt, which will be in the same place, at the root of where you deploy the files, or you use the link on that page

Edit: well, yes. Same as any other asset to upload: images, fonts, html, CSS, JS. You put them in a place on the server you’re using. Then they are visible online. So the link has to be to there

i created a txt file and put all the url in it and then i routet it as /sitemap then i put the url on the search console it gave me the sitemap is an html file error.

Why are you trying to involve react router? That’s never going to work.

If you build the app, you’ll get a Javascript file. And you’ll have an HTML file and probably a CSS file and maybe some images and things. Then you put those files on a server.

If you’re making a sitemap file for Google, then you put the text file for that there as well. As I say, it’s going to consist of a single line of text that’s the path to the index.html file

1 Like

im sorry for not understanding i have a headache right now and english is not my native language so i got a bit brain fart there i translated it then i understanded it i checked the build then stactic then media and there it was the sitemap so i go to the website and go to static media and i found and copied the url pasted into the search console and it approved thank you so much for giving your time for me have good night.

1 Like

this has always been something i’m confused about…Can google crawl a react based website? How do you get pages indexed and therefore organic traffic? Or is that not the point of the site map?

Yes, that is the point, but a React application (or any SPA) isn’t a website per se, it’s just a single web page. “Organic traffic” is meaningless in this context because there aren’t any pages except the index.

You don’t, in the same way that the Windows file explorer program won’t index all the different screens in, say, Microsoft Word. SPA frameworks are designed for building applications, not websites, and applications don’t have pages to index, the concept doesn’t make sense.

They use web technologies, so the browser History API can be used to switch components in and out on the same page (“client-side routing”). But that isn’t the same as actual webpages.

Edit: There are kinda ways to fake it, but the app is just a blob of Javascript that a user downloads.

1 Like

that makes sense when you explain it that way.