Prerendering Angular 6 (for SEO) does not translate routerLink to Href

Question

I am using prerender.io to render angular 6 pages using headless chrome. The problem is that the renderer does not render the router links and the link information gets lost.

This is especially problematic, given that the purpose of rendering is SEO.

For example, a button with [routerLink]="previewLink", will be rendered to a button with no router link.

Here is a live example

rendered page with no links

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

No href and no router link in the "Preview" buttons:

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

angular page with router links

https://www.fiveabook.com/books

The buttons have dynamically generated router links.

• Initiallly, the question was in regards to href links. However, the buttons don't have href links. Nevertheless, the rendered does not render the router links in the Preview buttons so I am not sure if googlebot can see where the buttons link to.

Answer 1

Html buttons dont have a href attribute. Simply use an anchor element if you want to generate a hyperlink button.

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