如何让站点地图生成器完全抓取 SPA 的 Angular 路由器？

Question

我正在尝试为我的网页生成站点地图。

在线站点地图生成器只显示 xml 文件中的主页。

<?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>

我的网页同时在 angular 中有几条路线。

要查看您可以转到的网页 margvel.com

我使用了几个站点地图生成器。

xml-sitemap 和 botmap

我检查了 botmap，因为它应该有 SPA 支持。

我要创建站点地图的链接使用 material 设计和路由链接。

代码如下所示。

          <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>

Answer 1

正如 Botmap.io 开发人员 Karl 回答的问题，爬虫只支持 href 链接。

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.

由于我使用的是 routerlinks，而且我不想使用 hrefs 更改我的代码，所以我决定手动创建 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>

我所做的就是遍历 angular 中的路由并将它们放入 xml 文件中，如上所示。

我将所有链接的优先级设置为 0.5，因为它是在 0 - 1.0 之间选择的手动优先级。我对页面没有任何偏好。

注意 - 此方法仅适用于页面数量较少的小型站点地图。

如何让站点地图生成器完全抓取 SPA 的 Angular 路由器？

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

sitemap

single-page-application

angular