If I add routerLink to an HTML tag, the routerLink works perfect, meaning it takes preference over the natural new http request.
Example:
<a href="/page" [routerLink]="['/page']">Go to page view</a>
Why would I do that?
To let crawlers correctly identify links, while keeping the nice and smooth routerLink behaviour Angular provides.
Of course, this is intended for the links under the same SPA.
Question is: Could this turn into an issue?
A question to my question might be: “Why would it ever turn into an issue?”
Well, to me, it seems that two “natural” behaviours will want to happen:
- the browser wanting to go to the url
- angular wanting to change the view
Hence, I wonder: will this cause conflict?
This is not a SEO question, which would have to be asked somewhere else, it is a technical Angular oriented question.
3
Answers
Angular routerLink directive will replace or create the href based on the routerLink attribute provided. So if you are going to provide href manually it is not going to make any difference and there will not be any conflict.
First, let’s discuss the difference between
href
attribute orrouterLink
directive.href
an is HTML anchor tag attribute to navigate to another page. Here, a new page will be loaded.RouterLink is used to achieve the same functionality but Angular 2 (or above) are single-page applications, where the page should not reload. RouterLink navigates to a new URL and the component is rendered in place of
routeroutlet
without reloading the page.So your question was: Could this turn into an issue?
Using
href
won’t throw any errors or break the functionality, but it will impact performance as everyhref
redirect will load Angular bundle & chunks.https://developers.google.com/search/docs/advanced/guidelines/links-crawlable
States that Google crawler:
Can follow:
Can’t follow:
So using href along with routerLink would be a must if you want to consider SEO effects since google bot doesn’t check routerLink.