How to make links that are not powerful

Денис Л.
How to make links that are not powerful

Often on the site, we want to refer to a third-party resource. At the same time, I do not want to give him any weight at all. For example, you make links to social networks on the site. And we would like that the link is not perceived by the search engine as a link. There are several options to do this and I will give the basic methods.

All links to third-party resources change the attribute href on the attribute data-href. Next, we insert the script into the script file:

document.addEventListener("DOMContentLoaded", function() { // use the DOM build event
    document.querySelectorAll('[data-href]').forEach(function(i) {
        let href = i.getAttribute('data-href');
        i.setAttribute('href', href);

We use the encrypted version, using the tag <i>.

We can complicate the conversion of links using any other tag, for example <i>. Html will look like this:

<i data-target="_blank" class="loc">link text</i>

If you need a link to open in the same window - the attribute data-target with value "_blank" we do not need.

Javascript will be next:

document.addEventListener("DOMContentLoaded", function() { // after building the DOM
    document.querySelectorAll('.loc').forEach(function(elem) { // we go through all the elements with the class loc
        elem.addEventListener('click', function() { // assign a click event handler
            let href = this.className.split('loc ')[1]; // in the variable href we write down everything that is in the attribute, except for the class loc and the space
            let blank = this.getAttribute('data-target'); // in the variable blank we write the value of the data-target attribute 
            if(blank === null) { // if data-target attribute does not exist
                history.pushState({page: this.href}, '', this.href); // write the current page in browser history
                document.location.replace(href); // go to the address 'href'
            else { // if the data-target attribute exists
      , blank); // open the link in a new window

For an item <i> Use styles that are similar to the link styles in the browser so that the user understands that this is a link. In particular, in your css-file, enter the following styles:

i.loc {
    cursor: pointer;
    border-bottom: 1px dashed;
i.loc:hover {
    border-bottom: 1px solid;

P.S. Third-party libraries for this and the previous script are not required.

If you need support IE11, then you need a polyfill for the method forEach, which is not supported in IE11. Use the following code:

(function () {
    if(!Array.prototype.forEach) {
        Array.prototype.forEach = function forEach (callback, thisArg) {
            var array = this; thisArg = thisArg || this;
            for(var i=0,l=array.length;i!==l;++i){,array[i],i,array);}
if(typeof NodeList.prototype.forEach==="function") return false;
else NodeList.prototype.forEach = Array.prototype.forEach;

Now the code will work in any modern browser!

Still there is a variant to make all on php and to transfer the link as GET-parameter.

Create a file in the root of the site, call it links.php

In this file we insert a line:

<? header("Location: ".$_GET['link']); exit; ?>

Create the necessary links in this way:

<a href="/links.php?link=" target="_blank">link</a>