HTML: Вёрстка ссылок с rel="noopener noreferrer nofollow"

Иногда одна невинная ссылка может:

  • дать внешней странице доступ к window.opener и позволить ей подменить вашу вкладку (tabnabbing);
  • передать referrer (URL страницы-источника) в другую систему;
  • создать SEO-риски, если вы ручаетесь за сомнительные/платные/UGC-ссылки.

Что означает каждый атрибут

  • noopener — запрещает доступ внешней страницы к window.opener при target="_blank". Защита от tabnabbing.
  • noreferrer — не передаёт заголовок Referer. Минус: может ухудшить атрибуцию/аналитику у получателя ссылки.
  • nofollow — SEO-сигнал: не передавать ссылочный вес / не ручаться за ссылку. Полезно для рекламы, партнёрских ссылок, UGC и сомнительных источников.
  • sponsored — SEO-сигнал: ссылка платная или коммерчески обусловленная. Ставят на: партнёрские ссылки (affiliate), рекламные интеграции, оплаченные размещения/обзоры, любые ситуации "нам заплатили / есть выгода за переход".
  • ugc — SEO-сигнал: ссылка создана пользователями (User Generated Content). Ставят на: комментарии, отзывы, форумные сообщения, профили пользователей, гостевые посты, где ссылки добавляет не редакция.

Готовое решение

1) Внешняя ссылка в новой вкладке (базовый стандарт)

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Перейти на example.com</a>

2) Внешняя ссылка в новой вкладке + не ручаемся SEO-смыслом (каталоги, комментарии, форумы, непроверенные источники)

<a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer">Источник</a>

3) Реклама / партнёрка (лучше уточнять тип)

<a href="https://partner.example.com" target="_blank" rel="sponsored noopener noreferrer">Партнёрская ссылка</a>

4) Пользовательский контент (UGC) (комментарии, отзывы, профили)

<a href="https://user-link.example" target="_blank" rel="ugc nofollow noopener noreferrer">Ссылка пользователя</a>

5) Нужно сохранить referrer (аналитика важна), но защититься от tabnabbing

<a href="https://example.com" target="_blank" rel="noopener">С реферером, но безопасно</a>

6) Обычная ссылка (без новой вкладки), но “не ручаемся”

<a href="https://example.com" rel="nofollow">Не передавать вес</a>
Материал помог? Оценка помогает находить устаревшие и спорные решения.

Комментарии

0

Нашли ошибку или хотите дополнить материал?

Комментариев пока нет.Можно первым дополнить материал или сообщить об ошибке.
Telegram