预渲染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属性。 如果要生成超链接按钮，只需使用锚元素 。

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