Що насправді роблять rel=noopener, noreferrer і nofollow

Коротка версія

Атрибут rel у посиланні описує зв’язок між поточною сторінкою та сторінкою, на яку веде посилання. Це звучить абстрактно, але в повсякденній веброботі постійно трапляються три значення:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Ці три токени часто вставляють разом, ніби вони роблять одну й ту саму річ. Це не так.

• noopener — це механізм безпеки браузера.
• noreferrer — це механізм приватності та аналітики.
• nofollow — це сигнал для пошукових систем.

Їх можна поєднувати, але варто знати, чому присутній кожен із них. Додавати всі три до кожного вихідного посилання не завжди неправильно, але зазвичай це ліниво.

rel=noopener запобігає зворотному табнабінгу

rel="noopener" повідомляє браузеру, що нововідкритій сторінці не слід надавати доступ до початкової сторінки через window.opener.

Це має значення переважно тоді, коли ви відкриваєте посилання в новій вкладці або вікні за допомогою target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Без noopener цільова сторінка може отримати змогу виконати JavaScript на кшталт цього:

window.opener.location = 'https://phishing.example';

Таку атаку зазвичай називають зворотним табнабінгом. Користувач натискає легітимне посилання, потрапляє на інший сайт, а початкова вкладка непомітно перенаправляється на фальшиву сторінку входу або інший шкідливий ресурс.

Сучасні браузери тут стали кращими. У поточній поведінці браузерів target="_blank" зазвичай обробляється так, ніби rel="noopener" уже присутній. Це добре, але не робить явний атрибут безглуздим. Явний noopener усе ще корисний, тому що:

• він документує ваш намір;
• він захищає старіші або нетипові середовища перегляду;
• він не змушує покладатися на те, що кожен вбудований web view поводиться як сучасний десктопний браузер;
• він спрощує рев’ю коду.

Для зовнішніх посилань, що відкриваються в новій вкладці, rel="noopener" є розумним стандартним варіантом.

Чи впливає noopener на SEO?

Ні, не в якомусь значущому сенсі. noopener стосується поведінки браузера. Він не повідомляє пошуковим системам, чи ви схвалюєте сторінку, чи має передаватися посилальна вага, або чи є посилання оплаченим.

Якщо ваша SEO-політика трактує noopener як директиву ранжування, цю політику потрібно відредагувати.

rel=noreferrer приховує сторінку-джерело переходу

rel="noreferrer" повідомляє браузеру не надсилати HTTP-заголовок Referer, коли користувач переходить за посиланням.

Так, назва заголовка історично написана з помилкою: Referer. Атрибут пишеться як noreferrer.

Зазвичай, коли користувач натискає посилання з вашої сторінки на інший сайт, цільовий сайт може отримати значення реферера, яке показує, звідки прийшов візит. Залежно від Referrer-Policy вашого сайту це може бути повна URL-адреса, лише origin або нічого.

Наприклад, цільовий сайт може побачити:

Referer: https://www.example.com/pricing?plan=enterprise

або лише:

Referer: https://www.example.com/

З rel="noreferrer" браузер не повинен надсилати цей заголовок для такої навігації.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

На практиці noreferrer у сучасних браузерах також поводиться як noopener. Якщо ви використовуєте noreferrer, зазвичай вам не потрібен noopener для безпеки на тому самому посиланні. Багато команд усе одно пишуть обидва значення для ясності:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

Це нормально. Це надлишково, але читабельно.

Коли noreferrer корисний

Використовуйте noreferrer, коли URL поточної сторінки не має розкриватися цільовому сайту.

Типові приклади:

• посилання з приватних панелей керування;
• посилання з неопублікованих preview-середовищ;
• посилання з URL-адрес, що містять чутливі параметри запиту;
• посилання в адміністративних інструментах, чергах модерації, CRM-екранах або системах підтримки клієнтів;
• посилання, для яких цільовий сайт не повинен знати точну сторінку-джерело.

Останній пункт не завжди про секретність. Іноді йдеться про мінімізацію даних. Якщо цільовому сайту не потрібно знати URL-адресу сторінки-джерела, не надсилайте її.

Це відповідає ширшому напряму вебдизайну, орієнтованого на приватність. Браузери, користувачі та регулятори рухаються до того, щоб за замовчуванням передавати менше фонових даних. Якщо ви повертаєтеся до цієї теми, наша стаття про те, що змінилося для cookies у 2026 році і що з цим робити описує той самий загальний зсув: менше невидимого відстеження, більше свідомо спроєктованих потоків даних.

Компроміс з аналітикою

noreferrer може зламати атрибуцію для сайту, на який ви посилаєтеся. Його аналітика може класифікувати візит як прямий трафік замість реферального.

Це не ваша головна проблема, але це може мати значення в партнерствах, афіліатних відносинах, клієнтських шляхах і внутрішніх кросдоменних екосистемах. Якщо ваша маркетингова команда очікує, що партнерські сайти бачитимуть реферальний трафік із вашого домену, повсюдний noreferrer може створити плутанину.

Для багатьох звичайних редакційних посилань кращий підхід — встановити загальносайтовий заголовок Referrer-Policy, а не додавати noreferrer всюди. Наприклад:

Referrer-Policy: strict-origin-when-cross-origin

Ця політика надсилає повну URL-адресу для навігації в межах того самого origin, надсилає лише origin до захищених cross-origin цілей і не надсилає реферер під час переходу з HTTPS на HTTP. Це практичний стандартний варіант для багатьох сайтів.

Якщо вам потрібно перевірити, як заголовки поводяться в production, сирий HTTP-чек часто зрозуміліший, ніж здогадки за аналітичними дашбордами. Процес із невеликого набору інструментів для налагодження редиректів і HTTP-заголовків у production напряму застосовується до налагодження referrer-policy.

rel=nofollow призначений для пошукових систем, а не для браузерів

rel="nofollow" повідомляє пошуковим системам, що ви не хочете натякати на схвалення сторінки, на яку веде посилання.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

Спочатку nofollow запровадили для боротьби зі спамом у коментарях. Ідея була простою: якщо посилання в коментарях не передавали рейтинговий кредит, у спамерів було менше стимулів засипати блоги та форуми.

Сьогодні Google трактує nofollow як підказку, а не як абсолютну директиву. Ця відмінність важлива. Вона означає, що пошукові системи можуть використовувати посилання для виявлення або в системах ранжування в деяких контекстах, але ви чітко сигналізуєте, що посилання не слід сприймати як звичайне редакційне схвалення.

Коли використовувати nofollow

Використовуйте nofollow, коли ви ставите посилання, але не хочете ручатися за цільовий ресурс.

Розумні приклади:

• ненадійні посилання, створені користувачами;
• посилання в публічних коментарях або профілях;
• посилання на сайти, згадані як приклади поганої поведінки;
• посилання, додані для довідки, але не як схвалення;
• посилання в зонах, де модерація обмежена.

Для оплачених або спонсорських посилань віддавайте перевагу rel="sponsored". Для контенту, створеного користувачами, віддавайте перевагу rel="ugc". За потреби значення можна поєднувати:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

Якщо ви підтримуєте публічні форми, коментарі, каталоги або сторінки профілів, атрибути посилань — лише одна частина проблеми зловживань. Спам зазвичай починається раніше, у процесі надсилання. У нас є окремий розбір чому ваша контактна форма — ваша найбільша спам-вразливість, і той самий урок діє тут: не очікуйте, що nofollow компенсує слабку модерацію.

Чого nofollow не робить

nofollow не заважає користувачам натискати посилання. Він не блокує браузеру надсилання реферера. Він не приховує цільовий ресурс від перегляду. Він не захищає target="_blank".

Він також не гарантує, що URL ніколи не буде проскановано. Якщо пошукові системи знайдуть URL в іншому місці, вони все одно можуть його просканувати. Якщо вам потрібно запобігти індексації, використовуйте відповідні robots-контролі на цільовій сторінці, наприклад noindex, а не атрибут nofollow на чужому посиланні.

Поширені комбінації

Зовнішнє посилання, що відкривається в новій вкладці

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

Це базовий варіант. Він вирішує проблему безпеки, створену відкриттям нового контексту перегляду.

Якщо ви також не хочете надсилати дані реферера:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Оплачене розміщення

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

Ви можете додати noopener, якщо посилання відкривається в новій вкладці:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

Не використовуйте nofollow як розмиту заміну розкриттю оплачених посилань. У пошукових систем тепер є конкретніше значення для цього: sponsored.

Посилання, створене користувачем

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

Це повідомляє пошуковим системам, що посилання додав користувач і його не слід сприймати як звичайний редакційний голос.

Внутрішні посилання

Більшості внутрішніх посилань жодне з цих значень не потрібне.

Не додавайте nofollow до внутрішніх посилань як рутинну тактику скульптингу. Зазвичай це створює більше плутанини, ніж користі. Якщо сторінка не має індексуватися, вирішіть це напряму. Якщо сторінка не має скануватися, уважно подумайте про правила robots, автентифікацію, canonicalization і архітектуру сайту.

Для внутрішніх посилань, що відкриваються в новій вкладці, noopener усе одно нешкідливий і може бути доречним. Але краще питання — чому внутрішньому посиланню взагалі потрібна нова вкладка.

Практична політика для команд

Простий внутрішній стиль запобігає більшості помилок:

1. Додавайте rel="noopener" до посилань із target="_blank", особливо зовнішніх.
2. Додавайте noreferrer лише тоді, коли приховування URL-адреси джерела є навмисним.
3. Додавайте nofollow лише тоді, коли ви не схвалюєте цільовий ресурс.
4. Використовуйте sponsored для оплачених посилань і ugc для посилань, створених користувачами.
5. Не використовуйте атрибути посилань як заміну контролю доступу, модерації або правил індексації.

Важлива частина — намір. Кожен токен у rel має відповідати на конкретне питання:

• Безпека: чи має нова сторінка бути ізольована від opener?
• Приватність: чи має цільовий сайт отримувати інформацію про реферер?
• SEO: чи схвалюємо ми це посилання як редакційне джерело?

Якщо ніхто в команді не може відповісти на ці питання, атрибут, імовірно, є карго-культовим HTML.

Як перевірити, що відбувається

Для noopener відкрийте посилання й перевірте, чи може цільова сторінка отримати доступ до window.opener. На контрольній тестовій сторінці window.opener має бути null, коли noopener активний.

Для noreferrer перевірте мережевий запит на стороні цільового сайту або використайте логер запитів у тестовому середовищі. Browser DevTools можуть показувати вихідні заголовки запитів, але серверні логи часто надійніші.

Для nofollow тестування менш миттєве, бо це інтерпретація пошуковою системою, а не поведінка браузера. Найкраща перевірка — інспекція вихідного коду: підтвердьте, що відрендерений HTML містить очікуване значення rel. Якщо ваш frontend framework переписує посилання, перевіряйте фінальний DOM, а не лише шаблон.

Підсумок

Ці атрибути невеликі, але вони лежать на перетині безпеки, приватності та SEO. Сприймати їх як взаємозамінні — означає формувати погані звички.

Щедро використовуйте noopener із посиланнями, що відкриваються в новій вкладці. Використовуйте noreferrer свідомо, коли важлива приватність реферера. Використовуйте nofollow, коли робите заяву для пошуку щодо схвалення. А коли посилання оплачене або створене користувачем, використовуйте конкретніші сучасні значення: sponsored і ugc.

Цього достатньо для більшості сайтів. Мета не в тому, щоб прикрасити кожне посилання. Мета — щоб кожне посилання повідомляло браузеру й пошуковим системам саме те, що їм потрібно знати.