预渲染Angular 6（用于SEO）不会将routerLink转换为Href

Question

我正在使用prerender.io使用无头的chrome渲染角度6页。问题在于渲染器无法渲染路由器链接，并且链接信息会丢失。

鉴于渲染的目的是SEO，这尤其成问题。

例如，具有[routerLink] =“ previewLink”的按钮将呈现为没有路由器链接的按钮。

这是一个生动的例子

没有链接的呈现页面

https://prerender.io/raw-html?url=https%3A%2F%2Fwww.fiveabook.com%2Fbooks&adaptiveType=desktop

“预览”按钮中没有href且没有路由器链接：

<button _ngcontent-c12="" color="accent" mat-button="" tabindex="0" class="mat-button mat-accent ng-star-inserted"><span class="mat-button-wrapper">

带有路由器链接的角度页面

https://www.fiveabook.com/books

按钮具有动态生成的路由器链接。

• 最初，问题是关于href链接的。但是，这些按钮没有href链接。不过，渲染后的渲染图并不会渲染“预览”按钮中的路由器链接，因此我不确定googlebot是否可以看到按钮链接到的位置。

Answer 1

如果我直接在Mac上的Chrome浏览器中加载https://www.fiveabook.com/books并寻找该按钮，那么我也看不到href：

因此，看起来我们呈现的页面与普通Chrome浏览器呈现的页面完全相同。

Answer 2

HTML按钮没有href属性。如果要生成超链接按钮，只需使用 anchor元素。

<a mat-button [routerLink]="...">
Link
</a>