В этой короткой заметки я расскажу как маскировать ссылки на вашем сайте, и не важно это статика или CMS.

Все что нужно, это подключить js скрипт туда где он будет загружаться самым последним.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

llinks_moredetail = document
  .querySelectorAll("a[href*='?nt']")
  .forEach((llinks_moredetail) => {
    llinks_moredetail.setAttribute("target", "moredetail");
    llinks_moredetail.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_moredetail_href = llinks_moredetail.href.toString().slice(0, -3);
    llinks_moredetail.setAttribute(
      "href",
      "https://href.li/?" + llinks_moredetail_href
    );
  });

Атрибуты

Разберемся с атрибутами ссылки - rel: noreferrer, nofollow, noopener.

noreferrer - делает так, чтобы сайт на который вы ссылаетесь, не знал о вашем сайте.

nofollow - нужен для того чтобы поисковые роботы, игнорировали эту ссылку.

noopener - этот атрибут нужен для безопасности. Предотвращает вмешательство в страницу с которой была открыта ссылка.

Пример использования

Я написал этот простой скрипт, чтобы контролировать каждую ссылку, которая должна открываться в новой вкладке.

Пример:

Я пишу ссылку так: https://example.com/?nt, а получается это:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<a href="https://example.com/?nt">ссылка</a>

==>>

<a
  href="https://href.li/?https://example.com/"
  target="moredetail"
  rel="noreferrer nofollow noopener"
>
  ссылка
</a>

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

Вы можете использовать скрипт как есть или немного поменять его:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

llinks_moredetail = document
  .querySelectorAll("a")
  .forEach((llinks_moredetail) => {
    llinks_moredetail.setAttribute("target", "moredetail");
    llinks_moredetail.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_moredetail_href = llinks_moredetail.href;
    llinks_moredetail.setAttribute(
      "href",
      "https://href.li/?" + llinks_moredetail_href
    );
  });

Данный скрипт, берет все ссылки и добавляет href.li с атрибутами.

Пояснение скрипта

1

document.querySelectorAll("a[href*='?nt']");

Выбирает все ссылки которые содержат ?nt.

1

llinks_moredetail.setAttribute;

Назначает атрибуты.

1

llinks_moredetail.href;

Берет атрибут href (то есть саму ссылку).

1

toString().slice(0, -3);

Обрезает ссылку с конца на 3 символа. Так как предполагается что ?nt будет в конце.

1
2
3
4

llinks_moredetail.setAttribute(
  "href",
  "https://href.li/?" + llinks_moredetail_href
);

Меняет атрибут href, подставляет https://href.li/? перед ссылкой.

На месте moredetail может быть _blank или abrakadabra - оно в любом случае откроет ссылку в новой вкладке. Я не использую _blank так как есть проблемы с производительностью и безопасностью. Подробнее.

Так же вы можете редактировать атрибуты и использовать любого другого провайдера, а не href.li.

Плюсы использования скрипта, а не редактирования ссылок вручную в том, что фактически ссылки остаются чистыми.

Вы можете быстро поменять атрибуты у всех ссылок, или если href.li сломается - вы сможете быстро все исправить, отредактировав скрипт.