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

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

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

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

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

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

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

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

rel="noopener"

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

rel="noreferrer"

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

Золоте правило №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".

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

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