Home » vue » How can I mask external urls from crawling using hashing?

How can I mask external urls from crawling using hashing?

Posted by: admin November 26, 2021 Leave a comment


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:

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

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

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)
      .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));

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.


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