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?

3
  • 1
    Is the href that gets automatically added with routerLink correct? Nov 20, 2021 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
    – NeNaD
    Nov 20, 2021 at 13:18
  • I am not using Angular Universal for SSR. I am using Prerender, and its cached HTML pages, href attribute is present.
    – NeNaD
    Nov 20, 2021 at 13:20

2 Answers 2

2
+25

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.

See docs on Content Projection e.g. ngcontent

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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