How can I mask external urls from crawling using hashing?

Question

I have been looking at this post: Hide links from Google via JavaScript . I would like to archive the same goal: masking the urls to prevent google from crawling but in my case, I have external URLs. I would like those URLs to be available for my clients when they click on it but not for google to crawl.

This is what I have so far:

<template>
 <span href="https://www.w3schools.com/" @click="linkAction($event)">
      Link to W3Schools
 </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {

  linkAction(e:any): any {
    window.location = this.rot13(e.target.getAttribute('href'));
  }

  rot13(s: any): any {
    return (s || this)
      .split('')
      .map(function(_: any) {
        if (!_.match(/[A-za-z]/)) {
          return _;
        }
        const c = Math.floor(_.charCodeAt(0) / 97);
        const k = (_.toLowerCase().charCodeAt(0) - 83) % 26 || 26;
        return String.fromCharCode(k + (c === 0 ? 64 : 96));
      })
      .join('');
  }
}
</script>

When I inspect it, I still see the hrefs and I suppose that google still crawls and indexes those. Would appreciate some help on how to achieve this.

Answer 1

Navigating use via elements other than <a href> will result in frustration. When you middle-click a link you expect it to open in a new tab, however that will not be true for links that are not on-page.

If you really want to hide from bots use something along these lines:

1. Define link element <a hidden-href="xxx" href="#">.......</a>
2. Add listeners for mouseover & focus (possibly touch too)
3. On interaction fill href with hidden-href .

Optionally clean uplinks. This is probably not needed as the crawler won't recrawl the page upon interaction...

---

Do you want to fight Google, Bing and other? They probably won't follow your links if you ask them nicely via robots.txt , or rel="nofollow" .