sitemap.xml in Angular SPA

Question

we have build a simple page app in angular, which is a loan application wizard. So every user must start at page 1, enter some info to get to page 2 etc. There is no possibility to enter other pages without submitting data from the fist one.

I am quite new to SEO and my question is what an optimal sitemap file should look like. I think it must contain just first page url and ignore the rest because when crawler tries to access other pages the app returns first page too(this is handled in "$stateChangeStart" - app checks user data on BE and redirects him to appropriate page)

Thanks for advice

Solution 1

In src folder paste you sitemap.xml file then go to angular.json file just add sitemap in assets.

It's work for me

 "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/sitemap.xml",
  ],

Solution 2

First of all, this is not really about programming, so you may get a better response on the sister site: http://webmasters.stackexchange.com. But will give my view anyway.

A sitemap is just an optional extra hint to your site to help search engines and other web crawlers find all your pages. There is no need to have one at all and Google will find your pages if linked from anywhere else. A sitemap just speeds up the process and also gives search engines like Google one place to check if any of your pages have been updated so for those reasons it's recommended but still not mandatory nor is it mandatory to include all your pages in it.

So, given that, what pages do you want Search Engines to find? Those pages should go in the sitemap. As per above, that is not to say other pages will not be found because you do not include them in your site map, so don't depend on that.

Given that your second and subsequent pages will just display your first page there seems little point in including them in a sitemap. At best case they would be ignored and in worst case Google would think they are duplicate content which can cause problems.

Typically for a site like yours you want the static pages indexed by Google along with the first page of the dynamic application form and that's it. So that's what should go in the sitemap.

The other thing to note is that Angular SPAs take quite a bit of Javascript which may or may not be processed properly by search engines. Google crawlers have got pretty good at it, but can't vouch for other search engines. It's best to have as much content as possible not dependent on Javascript and particularly heavy frameworks like Angular if you want the best change of being understood by search engines. So if you turn off Javascript and don't at least get a basic page of content then you could be in trouble.

Leading on from that, and why it pertains to sitemap, search engines page process hash URLs (used by Angular) and parameters differently. Some ignore them and treat anything with the same core URL as the same page. Adding same pages with different parameters to a sitemap can be an indicator that these are different pages - but even then I've seen lots of problems with this. Not sure how you're handling page moves in your app (same url, hash url or parameters?) but the fact you only want or need your first page indexed will probably avoid a lot of those problems.

Google has a number of useful tools in Google Search Console (aka Google Webmaster Tools). If you have not registered your site in that then do that ASAP. This allows you to upload your sitemap, see any errors, and also fetch a page as Google sees it (to answer Javascript questions raised above) and tell Google how to handle parameters on your pages - amongst other things. Google will also use this to report back any errors it finds in your site which is another very important reason to use it.