Как скрыть внешние ссылки при помощи JS

Для чего скрывать ссылки?

Первый вариант: чтобы скрыть их от индексирования в поисковых системах / чтобы они не передавали вес.

Второй вариант: я скрываю ссылки которые имеют не 200-й ответ (биты ссылки — но они в тоже время рабочие). Часто анализируя сайты видишь внешние ссылки с ответами отличными от 200, например с 403 ответом, чтобы они не сыпались в ошибки аудитора я их скрываю в JS.

Как скрыть ссылку при помощи jQuery

В сети полно способов закрыть ссылки средствами jQuery, рассмотрим самые действенные.

Чтобы приведенные ниже способы работали, у вас должна быть подключена библиотека jQuery.

Без использования структуры <a href=""></a>

Код ссылки на странице:

<span class="my-link" data-link="http://goo.gl">внешняя ссылка</span>

Скрипт, который будет обрабатывать ссылку и открывать ее:

<script>$('.my-link').click(function(){window.open($(this).data('link'));return false;});</script>

В данном случае в коде будет кусок текста (он же анкор) выделенный <span> и отображаться такая «ссылка» будет как обычный текст на странице. Поэтому чтобы такая ссылка была похожа на обычную, придется немного добавить в свой css примерно такие стили:

span.my-link {
	color: #00ff00; /*-цвет ссылки-*/
	text-decoration: underline; /*-подчеркивание-*/
	cursor: pointer; /*-указатель в виде пальца-*/
}

Альтернативный вариант

Код ссылки на странице:

<span class="my-link" data-link="http://goo.gl">внешняя ссылка</span>

Скрипт, который будет обрабатывать ссылку и открывать ее:

<script>$('.my-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script>

Отличие этого способа от вышеуказанного в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.

Скрытие ссылок при помощи чистого JS (без jQuery)

Код ссылки на странице:

<span class="my-link" data-url="http://goo.gl">внешняя ссылка</span>

Скрипт, который будет обрабатывать ссылку и открывать ее:

<script>
let links = document.querySelectorAll('.my-link');
links.forEach(function(link) {
  link.onclick = function() {        
    window.open(link.dataset.url); 
  };
});
</script>

Если хотите чтобы ссылка открывалась в этой же вкладке (а не в новой). Замените window.open(link.dataset.url); на location.href = link.dataset.url;

В коде страницы получается просто текст, но если вы кликните на него то переход по ссылке произойдет. Чтобы скрытая ссылка была похожа на обычную ссылку, вам нужно добавить немного CSS, например:

span.my-link {
	color: #00ff00; /*-цвет ссылки-*/
	text-decoration: underline; /*-подчеркивание-*/
	cursor: pointer; /*-указатель в виде пальца-*/
}

Скрытие ссылок от индексации поисковыми роботами

Чтобы скрыть ссылки от индексации поисковыми роботами:

• выносим скрипт замены ссылок во внешний файл;
• запрещаем индексацию этого файла в robot.txt;
• в контенте используем функцию нашего скрипта, которая будет рисовать нам необходимую ссылку.

Теперь вы знаете как спрятать ссылку в JS. Если вдруг возникли вопросы или один из способов перестал работать, пожалуйся напишите об этом в комментариях.