4

Google's official doc says that Google cannot follow links unless the link has an href attribute. It explicitly says that routerLink cannot be followed:

Google can follow links only if they are an <a> tag with an href attribute. Links that use other formats won't be followed by Google's crawlers. Google cannot follow <a> links without an href tag or other tags that perform a links because of script events. Here are examples of links that Google can and can't follow:

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')">

However when I inspect the DOM, I see that when I use routerLink, Angular automatically adds an href attribute to the link tag.

Should I also explicitly add an href attribute to the link tag, or is implementation with routerLink enough since now routerLink adds href attribute automatically?

5
  • 1
    Is the href that gets automatically added with routerLink correct? Nov 20 at 9:16
  • Yes, it is correct. However it is relative path, and not absolute, but Google can track both relative and absolute path, right? @StephenOstermiller Nov 20 at 13:18
  • I am not using Angular Universal for SSR. I am using Prerender, and its cached HTML pages, href attribute is present. Nov 20 at 13:20
  • 1
    @Mike I saw your tag edit from Angular to Angular.js. But I believe they are different concepts. Is this question about AngularJS? 2 hours ago
  • @MaximillianLaumeister I reversed my edit. I didn't know there was a difference actually but after a quick Google search it looks like they are. Interestingly angularjs.org links to angular.io in its hero section saying "Try the New Angular". Wikipedia page also says angular.js 1.7 will be supported till  December 31, 2021 as LTS and also subsequent versions will just be "Angular". 2 hours ago
2

If href is populated on dom ready and its value is correct (e.g. when you copy it to the address bar, it shows the correct page), then you're good.

You can also check if google crawls your site by parsing your access logs and seeing if there are request from google bot to pages with previous pages of your site in the referrer field. While on it, you may as well set a proper template for your access-log. Default template is usually garbage.

That, or use Google Search Console, which is not as precise, but also gives indexing insights.

2
<a 
  class="example-class"
  [routerLink]="getRouteByName('example-route')">
  Click Me
</a>

Will then look like this in your page source:

<a
   _ngcontent-c[number]="" 
   class="some-class" 
   href="/some-route">  
   Click Me
</a>

That should be crawlable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.