Is it SEO friendly to disable link clicks in JavaScript when the click is handled with AJAX or Angular?

Question

If I use the anchor tag as:

<a href="/page1" onclick="return false;">page 1</a>

• Will the Search engines see it?
• Will pass the link juice to it?
• Is it OK for SEO?

I'm using angular4 to build my site, if a use an anchor tag the href reloads the app or page, if I use the routerLink attribute as angular4, the app change the page without reloading the page or app, like ajax. Also, the content will load from a database, from a wysiwyg editor, so I can't have the site reloading every time when the user clicks on links. In that regard, I can pass the event url to a routerLink function without losing the "link juice"

Answer 1

You need to reconsider the way you are handling the clicks events. For the most parts users won’t be bothered if they need to reload the page.

Another observation would be that inline event handlers are obsolete. The methods are not compatible with the modern approach of behaviour and structure separation. You should be using preventDefault().

But to answer your question, each Browser has defined its default behaviours and the methods to prevent them. What is expected is that when an user clicks on a link the browser will load the page specified in <a href=”...”>. In your case before the browser follows its default behaviour it must execute the event handler first, so if you specified return false, the link will never be followed.

The good news is, bots or web crawlers also have their own default behaviour and does not behave as browsers, we can expect crawlers to find all the hrefs attribute content and by default follow the links.

As long as the defined href URL is accessible and the resources are reachable, loads by itself (no through a clicked link) and creates a whole new crawlable webpage you won’t be having any SEO or link equity issues.

Answer 2

Preventing links clicks from loading new pages is SEO friendly as long as:

• When users click on that link they see what would be the contents of Page 1.
• When users and bots visit the /page1 URL, the contents of Page 1 load and are visible.

It is even better if you use pushState to change the URL that is visible to the user when they click on the link. Then the user will see the new page and the new URL all without causing a page reload in your web app.