Скрытие лишних внешних ссылок в шаблоне с помощью js-скриптов

Если вы сотрудничаете с seo-оптимизаторами, то наверняка знаете, что те не любят, когда на странице присутствует много внешних ссылок, а некоторых даже атрибут nofollow не удовлетворяет. Для таких оптимизаторов идеалом является страница, на которой нет вообще внешних ссылок за исключением той, которую они продвигают.

Конечно, полностью избавиться от внешних ссылок на страницах нормального сайта не получится, но если вы хотите минимизировать их присутствие, то это можно сделать с помощью js-скриптов. Давайте рассмотрим несколько способов.

01 Скрытие ссылок с помощью тега i и JS

Предположим, что у нас в шаблоне есть ссылка вида

<a href="https://n-wp.ru">Блог о WordPress</a>

и мы хотим, чтобы поисковые системы не видели ее, как внешнюю ссылку. Для этого заменяем тег a на тег i, а параметр href на параметр title:

<i title="https://n-wp.ru/">Блог о WordPress</i>

После такой замены Блог о WordPress для поисковых роботов станет не ссылкой, а обычным текстом. Ну а чтобы для живых людей этот текст все же отображался в браузере, как ссылка, по которой можно кликнуть и перейти, внедрим JS-скрипт. Для этого нужно создать файл extlink.js с содержанием

jQuery(document).ready(function(){
 $("i").each(function(){
 $(this).replaceWith("<a href="http://" target="_blank" rel="nofollow noopener">" +$(this).html() + "</a>");
 });
 $("a[href^=http]").not("a[href*=n-wp.ru]").attr("target", "_blank");
 });

Этот файл нужно скопировать в папку JS, которая находится в папке используемой вами темы, и присоединить. Делается это одной строчкой, которую нужно вставить в файл header.php или footer.php:

<script type="text/javascript" src="/js/extlink.js">

Как работает этот скрипт? В момент окончания загрузки страницы браузером находятся все теги i с атрибутом title. Они по очереди обрабатываются: в них на лету тег i заменяется на тег a, а атрибут title заменяется на атрибут href. После этого полученный код ссылки проверяется, и для поисковых систем исключаются все ссылки с адресом n-wp.ru.

Плюсы этого способа:

• Все легко и понятно.
• Событие click происходит по элементу a — это легко понимают всевозможные счетчики и бары.
• Для элемента i не нужно задавать отдельное оформление в css, так как он на лету преобразуется в элемент a, на который распространяются общие правила из style.css.

Минусы этого способа:

• Наличие лишних преобразований при формировании страницы.
• Если вам нужно скрыть ссылку от фиксации барами и счетчиками, то в большинстве случаев способ не подходит. Например, хотя сам поисковый робот Яндекса и не воспринимает такую ссылку, как полноценную (для него ее нет среди внешних ссылок на странице), Яндекс.Метрика все же умеет определять клики по такой скрытой ссылке.

02 Скрытие ссылок с помощью тега span, JS и CSS

Этот способ похож на предыдущий. В качестве тега, который будет заменяться на ссылку, мы используем всем хорошо знакомый span.

Ссылку

<a href="https://n-wp.ru/">Блог о WordPress</a>

заменяем на

<span class="extlink">Блог о WordPress</span>

Файл скрипта extlink.js будет выглядеть так:

$('.extlink').click(function(){window.open($(this).data('link'));return false;});

Не забываем присоединить этот скрипт:

<script type="text/javascript" src="/js/extlink.js">

Для элемента span нужно задать оформление. Для этого достаточно добавить в style.css:

span.extlink {
	color: #1BA1E2;
	text-decoration: underline;
	cursor: pointer;
}

span.extlink:hover {
	color: #E51400;
	text-decoration: underline;
	cursor: pointer;
}

Этот скрипт смотрит на все элементы span на странице, находит среди них те, которые имеют класс extlink, и заменяют код этого элемента на код обычной ссылки. Поисковые системы видят текст как обычный текст, люди же видят текст как ссылку.

Важно: так как Google умеет индексировать содержание js-файлов, то нужно закрыть файл скрипта (а лучше всю папку со скриптами темы) от индексации. Для этого вам нужно вставить в файл robots.txt специальное правило:

User-agent: *
Disallow: путь к папке темы/js/

Плюсы этого способа:

• Элемент span можно использовать не только в коде шаблона, но и вставлять в содержимое записей.

Минусы способа:

• Нужно задавать оформление для элемента span.
• Нужно запрещать индексацию файла скрипта.

03 Скрытие ссылок с помощью элемента span и JS без использования CSS

Второй описанный выше способ требует присутствияе в файле style.css оформления элемента span. Чтобы избежать этого, можно немного изменить скрипт.

Ссылка заменяется на

<span class="extlink">Блог о WordPress</span>

Файл скрипта extlink.js будет выглядеть так:

$('.extlink').replaceWith(function(){return'<a target="_blank" rel="nofollow noopener">'+$(this).html()+'</a>';})

Скрипт находит на странице все элементы с классом extlink и на лету заменяет код такого элемента на код ссылки. При этом не требуется задавать отдельное оформление для элемента span с классом extlink, так как он преобразовывается в ссылку уже после формирования страницы. Так же будет не лишним запретить индексирование файла скрипта.

Плюсы этого способа:

• Не требуется дополнительное оформление, действуют глобальные директивы для ссылок.

Минусы этого способа:

• Требуется запрет индексации файла скрипта.

Все способы работают, каким пользоваться — решать вам. Так же обращаю внимание на ассиметричный способ скрытия ссылок, который работает с содержимым записей — превращение внешних ссылок во внутренние.