What methods can be used to prevent external URLs from being crawled by using hashing?

Recently, I came across a post on a coding forum discussing how to hide links from Google using JavaScript. The idea is to mask the URLs from being crawled by Google while still making them accessible to users. In my case, I have external URLs that I want my clients to be able to click on, but I don't want Google to index them.

Here is the code I have been working with:

<template>
 <span href="https://www.example.com/" @click="linkAction($event)">
      Link to Example Website
 </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.encodeURL(e.target.getAttribute('href'));
  }

  encodeURL(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>

However, even after implementing this code, I can still see the original hrefs in the inspection tools, leading me to believe that Google is still indexing them. I would appreciate assistance on how to effectively achieve my goal of hiding these links from Google's crawl.

Answer №1

Exploring navigation using elements other than <a href> can lead to disappointment. When you attempt to open a link in a new tab by middle-clicking, it may not work as expected for links that are not within the page content.

If you wish to avoid detection by bots, consider using the following technique:

  1. Create a hidden link element
    <a hidden-href="xxx" href="#">.......</a>
  2. Set up listeners for mouseover & focus (and possibly touch events)
  3. When interacted with, populate the href attribute with the value of hidden-href.

It may be optional to clean up the links, as the crawler may not revisit the page after interaction...


Are you looking to evade detection by search engines like Google and Bing? They are less likely to follow your links if politely requested through robots.txt or rel="nofollow".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

Is there a way to trigger a click event on V-btn?

Why doesn't firing an event on v-btn using @click or @click.native work for me? I've also tried using @click.native, but that didn't solve the issue. <v-flex align-start left style="margin-top:-30px;"> <v-btn color="primary" ic ...

Prevent form submission with jQuery during validation process

Currently, I am working on validating a form using jQuery. My main objective now is to have the submit button disabled until all fields are correctly filled in. To achieve this, I have implemented the following approach: http://jsfiddle.net/w57hq430/ < ...

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

Issues with Semantic UI Calendar not displaying properly

I am currently experimenting with the Semantic UI Calendar, where there is a date input field and a calendar that pops up when selected as demonstrated in this initial example. Since I am not familiar with this process, I am uncertain if I have properly li ...

What is the best way to cancel a request within an HTTP-interceptor?

Within an application, I have established the following URL structure for the API: // public public/url-xyz // private dashboard/url-xyz To avoid unnecessary requests, what is the most effective method for canceling a request? My current approach involv ...

Unable to change the main data of slot object in VueJS

When running this demo and selecting "modify in child", the text will be updated. However, if you choose "modify top level through slot", the text remains unchanged, and attempting to click the other button afterwards will not work. Is there a way to upda ...

Trouble locating DOM element in Angular's ngAfterViewInit()

Currently, I am attempting to target a specific menu item element within my navigation that has an active class applied to it. This is in order to implement some customized animations. export class NavComponent implements AfterViewInit { @ViewChild(&a ...

Is there a way to retrieve the current map center coordinates using the getCenter function in @react-google-maps/api?

I am currently working with the GoogleMap component provided by @react-google-maps/api, but I am struggling to figure out how to obtain the latitude and longitude coordinates of the map's center after it has been moved. After some research, I came ac ...

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime

I'm in the process of developing a no-code application with Vue. I have come across an issue where I cannot add functions to a JSON file that I want to import at runtime. As a workaround, I decided to use a JavaScript or TypeScript file to store the J ...

Display different website content in a div when the page loads

My current project involves creating a team website hosted on a LAMP server. This website includes various "team pages" dedicated to different age groups. I am facing the challenge of integrating "external" content (from another page within my domain) into ...

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

Is there a way to prevent a premature closure of a connection?

I'm currently faced with the task of moving a substantial amount of data from a MySQL database, exceeding the maximum query size. To accomplish this, I need to process it in chunks through a loop. However, encountering an issue where about half of the ...

Submitting a Vue component in a Laravel Blade file can be done by integrating the Vue component

Attempting to incorporate a custom vue component within a submit form. Below is the blade template code: <form action="/question/{{ $question->id }}" method="post"> <label for="title">Description</label> <editor-by-vue editcontent= ...

Steps for inserting new rows into a table from text fields1. Begin

As someone who is brand new to jquery/html, I am eager to create a diary specifically for logging my long distance running times in a neat table format. Here's the HTML code I have been working on: <head> <title>Running Diary</titl ...

Challenges with line height in IE when adjusting font size in textarea

I'm facing an issue with adjusting the font size in a textarea using JavaScript. While it works perfectly in Firefox, there are some problems in IE. Specifically, the line-height does not change accordingly. This results in gaps between lines when the ...

What could be causing my TypeScript code to not be recognized as CommonJS?

I rely on a dependency that is transpiled to ES6. My goal is to leverage ES2019 features in my own code. Ultimately, I aim to output ES6. This is how I set up my tsconfig { "compilerOptions": { "module": "CommonJS" ...

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

I am currently working on creating an ajax-form to validate the client-side server of my sign-up form. My goal is to have error messages displayed on the same page where they are triggered, without loading a separate page. Below is the code from my (sign ...

Creating PNG images in a scripting language for web applications

Imagine giving your website user the ability to specify a radius size, let's say 5px, and in return receiving a PNG file with a circle of that radius. This question can be divided into two sections: In what language and using which technologies can ...

Transferring a zipped file between a Node.js server and a Node.js client

I am facing an issue with sending a zip file from a node.js server to a node.js client. The problem is that when I try to save the zip file, it becomes corrupted and cannot be opened. To create and send the zip file to the client, I am using the adm-zip l ...