Как делать ссылки, не передающие вес

Часто на сайте мы хотим сослаться на какой-либо сторонний ресурс. При этом, передавать ему вес совершенно не хочется. Например, Вы делаете на сайта ссылки на социальные сети. И хотели бы, чтобы ссылка не воспринималась поисковой системой в качестве ссылки. Есть несколько вариантов сделать это и я приведу основные способы.

❶ У всех ссылок на сторонние ресурсы меняем атрибут href на атрибут data-href. Далее в файл скриптов вставляем скрипт:

document.addEventListener("DOMContentLoaded", function() { // используем событие построения DOM
    document.querySelectorAll('[data-href]').forEach(function(i) {
        let href = i.getAttribute('data-href');
        i.setAttribute('href', href);
    })
}); 

❷ Используем зашифрованный вариант, с использованием тега <i>.

Мы можем усложнить преобразование ссылок, используя для этого любой другой тег, например <i>. Html будет выглядеть следующим образом:

<i data-target="_blank" class="loc https://vk.com/indeks_expert">текст ссылки</i>

Если Вам нужно, чтобы ссылка открывалась в этом же окне - атрибут data-target со значением "_blank" нам не потребуется.

Javascript будет следующим:

document.addEventListener("DOMContentLoaded", function() { // после построения DOM
    document.querySelectorAll('.loc').forEach(function(elem) { // перебираем все элементы с классом loc
        elem.addEventListener('click', function() { // назначаем обработчик события по клику
            let href = this.className.split('loc ')[1]; // в переменную href записываем всё, что в атрибуте, кроме класса loc и пробела
            let blank = this.getAttribute('data-target'); // в переменную blank записываем значение атрибута data-target 
            if(blank === null) { // если data-target атрибута нет
                history.pushState({page: this.href}, '', this.href); // записываем в историю браузера текущую страницу
                document.location.replace(href); // переходим по адресу href
            }
            else { // если атрибут data-target существует
                window.open(href, blank); // открываем ссылку в новом окне
            }
        });
    });
});  

Для элемента <i> используйте стили, аналогичные стилям ссылки в браузере, чтобы пользователь понимал, что это ссылка. В частности, в свой css-файл впишите следующие стили:

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

P.S. Сторонние библиотеки для работы этого и предыдущего скрипта не требуются.

Если Вам требуется поддержка IE11, то Вам потребуется полифилл для метода forEach, который не поддерживается в IE11. Используйте следующий код:

(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){callback.call(thisArg,array[i],i,array);}
    };
}
if(typeof NodeList.prototype.forEach==="function") return false;
else NodeList.prototype.forEach = Array.prototype.forEach;
})();    

Теперь код будет работать в любом современном браузере!

❸ Ещё есть вариант сделать всё на php и передавать ссылку в качестве GET-параметра.

Создаём файл в корне сайта, назовём его links.php

В этот файл вставляем строку:

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

Нужные ссылки оформляем по типу:

<a href="/links.php?link=https://mail.ru" target="_blank">link</a>