Скрытие внешних ссылок при помощи JavaScript - Web-Global: Связывая миры через веб-технологии
Web-Global

Скрытие внешних ссылок при помощи JavaScript

Пост опубликован 17 февраля 2023 в 11:37 и находится в рубриках HTML&CSS, Js. 60
Поделиться:

Скрытие внешних ссылок от поисковых систем очень важно для любого сайта. Из этой маленькой заметки вы узнаете как можно скрыть ссылки с вашего сайта от поисковых систем.

Один из способов скрытия ссылок – добавление внутрь тега ссылки атрибута rel со значением “nofollow”, а также обрамление ссылки тегом <noindex>.

HTML

<noindex><ahref="http://site.ru"rel="nofollow">site.ru</a></noindex>

На самом деле — это не очень правильное решение. Дело в том, что при наличии такой ссылки на странице, страница теряет вес, а это совсем неблагоприятно сказывается на вашем сайте.

Есть более элегантный способ: он заключается в использовании решения на языке javaScript.

Работает следующим образом: при публикации какого-либо контента на сайте, вы вместо ссылок вы вставляете другой HTML-тег (обычно — это <span>).

У этого элемента, как и у всех остальных, заменяющих ссылки на сайте, должен быть какой-то определенный класс. В нашем случае, он будет иметь имя “j-link”

В этот тег добавляете атрибут с URL, куда должна вести ссылка.

HTML

<spanclass="j-link"data-link="http://www.site.ru/">site.ru</span>

Если вы желаете, чтобы ссылка открывалась в новой вкладке, то необходимо добавить еще один data-атрибут. Назовем его data-target, а значение его будет ровняться “blank”.

HTML

<spanclass="j-link"data-link="http://www.site.ru/"data-target="blank">site.ru</span>

Теперь осталось только добавить скрипт, который будет «превращать» указанные элементы в ссылки. Его размещаем в отдельном JS-файле (например, с именем jslink.js) и добавляем в разделе “<head>” шаблона нашего сайта.

JavaScript

functionjs_link() {    $('.j-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'"'+(typeof$(this).data('target')!='undefined'? ' target="_blank"': '')+'>'+$(this).html()+'';})}$(function(){ js_link();});

Не забудьте перед подключением этого файла подключить jQuery.

Глядя на эти строки кода, несложно догадаться, что скрипт будет срабатывать при каждой загрузке страницы и заменять все элементы <span> с классом “j-link” на ссылки на основе значений data-атрибутов.

Вот таким довольно простым и оригинальным способом можно скрыть внешние ссылки от поисковых систем.