Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 8 sitemap and robots.txt

Tags:

angular

seo

i created an angular application using angular 8. I am working on referecing 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 ?

like image 470
Gaetan56 Avatar asked Apr 21 '20 20:04

Gaetan56


3 Answers

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:

  1. Add put the files into your project (next to the favicon.ico) in /src
  2. Add them to projects>architect>build>options>assets in your angular.json like so:
 "assets": [
                  "src/favicon.ico",
                  "src/assets",
                  "src/robots.txt",
                  "src/sitemap.xml"
                ],

It is explained in a bit more detail here.

Add. remarks:

  • Make sure you do not accidentally catch the assets of "test" only in your angular.json, they come into view earlier when skimming through the file
  • You can verify Google now recognizes your robots.txt if the warning that your robots.txt file is invalid no longer appears underneath the SEO section of the Lighthouse report in Chrome Dev Tools
  • It is true however, that even with a robots.txt, search engines other than Google are not known to be able to deal well with Angular SPAs without server side rendering (e.g. through Angular Universal). And even Google's capabilities here are debated. This guy explains it quite well.
  • My answer holds for Angular 10 and 11, other versions I do not know
like image 141
SLLegendre Avatar answered Nov 14 '22 05:11

SLLegendre


Using Angular Universal with Cloud Functions for Firebase to host and I'm putting sitemap.xml with robots.txt inside src. Then in angular.json within "assets" adding it like so:

...
"assets": [
  "APP_NAME/src/robots.txt",
  "APP_NAME/src/sitemap.xml",
],
...

Works great :)

like image 27
Daniel Danielecki Avatar answered Nov 14 '22 04:11

Daniel Danielecki


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

like image 4
anothercoder Avatar answered Nov 14 '22 04:11

anothercoder