How to let sitemap generator fully crawl Angular router for SPA?

Question

I am trying to generate a sitemap for my webpage.

The sitemap generators online only show me a homepage on xml file.

<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<url>
<loc>http://margvel.com</loc>
<priority>0.5</priority>
</url>
</urlset>

my webpage meanwhile has several routes in angular.

to see the webpage you could go to margvel.com

I used couple of sitemap generators.

xml-sitemap and botmap

I checked botmap, because it should have SPA support.

The links I want to create sitemap use material design and routerlink.

the code looks like this.

          <mat-list-item (click)="snav.close()" routerLink="/Projects"><mat-icon style="margin-left: 7px;">code</mat-icon><a style="margin-left: 25px;" >Projects</a></mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Jobs"><mat-icon style="margin-left: 7px;">work</mat-icon><a style="margin-left: 25px;" ></a>Work Experience</mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Education"><mat-icon style="margin-left: 7px;">school</mat-icon><a style="margin-left: 25px;"></a>Education</mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Resume"><mat-icon style="margin-left: 7px;">description</mat-icon><a style="margin-left: 25px;" ></a>Resume</mat-list-item>
          <mat-list-item (click)="openSnackBar()" routerLink="/Contact"><mat-icon style="margin-left: 7px;">contact_mail</mat-icon><a style="margin-left: 25px;" ></a>Contact</mat-list-item>

Lungfish

Answer 1

As Karl the Botmap.io developer answers the question the crawler only supports href links.

Hi! Do your links/anchor tags have an href attribute? The bot currently only detects and crawls the href attribute. You can add it even if your angular app doesn't use it internally. It may be redundant, however it may work as a stopgap until I can update the bot to handle this scenario.

Since Im using routerlinks and I don't want to change my code using hrefs I decided to manually create Sitemap.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://margvel.com</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/projects</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/jobs</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/education</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/resume</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/contact</loc><priority>0.5</priority></url>
</urlset>

All I did was went through the routes in angular and put them in xml file like displayed above.

I gave all the links priority 0.5 since it is the manual priority chosen between 0 - 1.0 . I didn't have any preference for pages.

NOTE - This approach is only for small sitemaps with small amount of pages.

Lungfish

Google claims that it "does not currently consume the <priority> attribute in sitemaps.", so I don't think you even need that, especially if you don't have a preference. Source – Aloft

good catch! you should probably leave them anyways. other search engines might be using them. – Lungfish

How did you point to your sitemap in the google search console? It requires you to add a route where to find the sitemap. Did you create a route serving the sitemap.xml? – Tantalus

I just put it in main directory. or src directory. just make sure its in main directory of your production build. after that you can access it webpage/sitemap.xml – Lungfish