I created an angular application using angular 8. I am working on referencing my website on Google. I have added a sitemap.xml
and robot.txt
at the route of the project, however when I try to access the file in my browser by doing so:
https://blablawebsite.fr/sitemap.xml
The routing module is picking up the route and can’t find the page. How can I make sure sitemap.xml
and robots.txt
are not picked by the routing module?
4
Answers
You need to first look into converting your project to Angular Universal. Google and other search engine bots can’t and won’t navigate through your app because all of that happens after-the-fact.
Start Here: https://angular.io/guide/universal
A lot of people misunderstand how all of this works and get very far into their project before realizing the difference between a website and an SPA. No biggie, you can still get your angular app to rank with Server Side Rendering
Using
Angular Universal
withCloud Functions for Firebase
to host and I’m puttingsitemap.xml
withrobots.txt
insidesrc
. Then inangular.json
within"assets"
adding it like so:Works great 🙂
Contrary to how I understand the accepted answer, tt is not neccessary to add angular universal to your project just for adding a sitemap.xml or robots.txt.
As @David said more succinctly in his comment,all you need to do is:
It is explained in a bit more detail here.
Add. remarks:
While other answers provide a solution for adding single
robots.txt
andsitemap.xml
files, usually you would want to have different versions of these files based on the instance you are deploying.For example, in production you would want to allow search engines to crawl and index your pages, but not on staging or development instances.
If you want to have different version of files based on the environment, you can do it like this:
Step 1
Create one folder called
robots
, and 3 subfolders inside calleddevelopment
,staging
andproduction
(or whatever environments you want). Then, in each of subfolders create environment specificrobots.txt
andsitemap.xml
files.Step 2
In
angular.json
file, specifyassets
separately for each environment: