CODEWITHSUNDEEP
angularangular-routerlink
Álvaro Franz
Álvaro Franz

Reputation: 811

Is it okay to add Angular routerLink to HTML <a> tags to avoid SEO issues?

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:

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.

Upvotes: 3

Views: 2463

Answers (4)

Rapha&#235;l Balet
Rapha&#235;l Balet

Reputation: 8605

You could create a directive, that understand automatically if you route to a relative path.

I did a library to help you with it > ngx-href

  1. Import into your app.module.ts file
import { NgxHrefModule } from 'ngx-href'

imports: [
 NgxHrefModule.forRoot({}), 
]

Into your component

import { NgxHrefDirective } from 'ngx-href'

imports: [
  NgxHrefDirective,
]

Then in your html

<a href="/page">Go to page view</a>

Upvotes: 0

Black Mamba
Black Mamba

Reputation: 15625

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.

Upvotes: 2

Sunil Kashyap
Sunil Kashyap

Reputation: 2984

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.

Upvotes: 3

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

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.

Upvotes: 4

Related Questions