Як атрибути посилань rel=”noopener” і “nofollow” впливають на SEO та безпеку

SebWeo.com

Уявіть, що кожне посилання на вашому сайті — це двері. Звичайне посилання веде відвідувача до іншої кімнати у вашому ж будинку. А посилання, що відкривається у новій вкладці (target="_blank") — це двері, що ведуть у зовсім іншу будівлю. Але що, якби, відкриваючи двері в іншу будівлю, ви автоматично давали її власнику ключ від своєї? Звучить небезпечно, чи не так?

Приблизно так працюють посилання без правильних атрибутів. Ці маленькі, часто непомітні доповнення до тегу <a> відіграють величезну роль у безпеці, продуктивності та SEO вашого сайту. В сьогоднішній статті я розкажу, що означають noopener, noreferrer, nofollow та інші, і як їх правильне використання може захистити вас і покращити ваші позиції в Google.

`target="_blank"`: Зручність, що приховує небезпеку

Атрибут target="_blank" є одним з найпопулярніших. Він змушує браузер відкрити посилання у новій вкладці, що зручно для користувача, адже він не залишає ваш сайт. Однак за цією зручністю ховаються дві проблеми:

Проблема безпеки (Tab-nabbing): Сторінка, що відкрилася, отримує частковий доступ до вашої сторінки через об’єкт window.opener. Це дозволяє зловмисникам за допомогою простого JavaScript перенаправити вашу вкладку на фішинговий сайт (наприклад, підроблену сторінку входу), поки користувач відволікся на нову вкладку.
Проблема продуктивності: Нова вкладка, навіть якщо вона з іншого сайту, виконується в тому ж процесі, що і ваша сторінка. Якщо на ній виконується “важкий” скрипт, він може “підвісити” і ваш сайт, погіршуючи користувацький досвід.

Рятівники: `rel="noopener"` та `rel="noreferrer"`

Щоб нейтралізувати ризики, пов’язані з target="_blank", існують спеціальні значення атрибута rel.

`rel="noopener"`

Це головний захисник від “tab-nabbing”. Цей атрибут наказує браузеру відкрити посилання без надання доступу до об’єкту window.opener. Простими словами, він розриває зв’язок між вашою і новою вкладкою, унеможливлюючи будь-які маніпуляції з вашою сторінкою. Це також вирішує проблему продуктивності.

`rel="noreferrer"`

Цей атрибут робить все те саме, що й noopener, але з одним доповненням: він приховує інформацію про те, звідки прийшов користувач. Коли людина переходить за посиланням, браузер зазвичай відправляє HTTP-заголовок Referer, який повідомляє новому сайту адресу сторінки, з якої було здійснено перехід. Атрибут noreferrer цей заголовок видаляє.

Важливе оновлення: Поведінка сучасних браузерів

Хороша новина полягає в тому, що більшість сучасних браузерів (Chrome, Firefox, Safari) автоматично застосовують поведінку rel="noopener" до всіх посилань з target="_blank", навіть якщо атрибут не вказаний. Однак, **додавати його вручну все ще є найкращою практикою** для підтримки старих браузерів та для ясності коду.

Золоте правило №1: Якщо ви використовуєте target="_blank", завжди додавайте rel="noopener noreferrer". WordPress, наприклад, робить це автоматично.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Приклад посилання</a>

Атрибути для SEO: `nofollow`, `sponsored`, `ugc`

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

`rel="nofollow"`

Це інструкція для пошукових роботів (наприклад, Googlebot), яка говорить: “Не переходь за цим посиланням і не передавай йому вагу (PageRank) моєї сторінки”. По суті, ви кажете, що не можете поручитися за контент, на який посилаєтесь.

Еволюція `nofollow`: `sponsored` та `ugc`

У 2019 році Google розширив атрибут nofollow, ввівши два нових значення, щоб краще розуміти природу посилань:

rel="sponsored": Створений спеціально для рекламних, спонсорських або будь-яких інших платних посилань. Його використання допомагає Google ідентифікувати комерційні зв’язки.
rel="ugc" (User-Generated Content): Призначений для контенту, створеного користувачами. Це коментарі в блогах, дописи на форумах тощо. Цей атрибут допомагає боротися зі спамом.

Google рекомендує використовувати саме ці нові атрибути, коли це доречно. Однак nofollow залишається дійсним і може використовуватися як загальний варіант, коли ви не хочете передавати вагу посиланню, але воно не є ні спонсорським, ні користувацьким. Також можна комбінувати атрибути, наприклад: rel="nofollow sponsored".

Порівняльна таблиця атрибутів

Атрибут	Основне призначення	Коли використовувати
`noopener`	Безпека та продуктивність	Завжди з `target="_blank"` для захисту від tab-nabbing.
`noreferrer`	Конфіденційність + безпека	Коли потрібно приховати джерело переходу (і для безпеки з `target="_blank"`).
`nofollow`	SEO	Для посилань, які ви не хочете “схвалювати” або передавати їм PageRank.
`sponsored`	SEO	Для всіх платних та рекламних посилань.
`ugc`	SEO	Для посилань у контенті, створеному користувачами (коментарі, форуми).

Замість висновку: Маленькі атрибути — великий вплив

Правильне використання атрибутів rel та target — це не просто технічна деталь, а важлива частина сучасного веб-девелопменту та SEO. Це ознака якісного та безпечного сайту, який дбає про своїх користувачів та свою репутацію в очах пошукових систем.

Завжди використовуйте rel="noopener noreferrer" для зовнішніх посилань, що відкриваються у новій вкладці, та застосовуйте nofollow, sponsored або ugc для контролю над тим, як пошукові системи інтерпретують ваші посилання. Це прості кроки, які значно підвищать рівень вашого сайту.