skip to Main Content

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


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

    Login or Signup to reply.
  2. First, let’s discuss the difference between href attribute or routerLink 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 every href redirect will load Angular bundle & chunks.

    Login or Signup to reply.
  3. https://developers.google.com/search/docs/advanced/guidelines/links-crawlable

    States that Google crawler:

    Can follow:

    <a href="https://example.com">
    <a href="/relative/path/file">
    

    Can’t follow:

    <a routerLink="some/path">
    <span href="https://example.com">
    <a onclick="goto('https://example.com')">
    

    So using href along with routerLink would be a must if you want to consider SEO effects since google bot doesn’t check routerLink.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search