How should I implement links in Angular so that Google can follow them?

Question

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?

Answer 1

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.

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

See docs on Content Projection e.g. ngcontent