Как одна маленькая опечатка в коде может стоить сайту позиций в поиске, а забытый символ — открыть дыру в безопасности вашего ресурса?
В веб-разработке и SEO дьявол кроется в деталях. Одной из таких критически важных деталей является атрибут rel. В этой статье мы разберем, как этот небольшой фрагмент кода управляет тем, как поисковые роботы сканируют ваш сайт, как распределяется ссылочный вес и как браузеры защищают ваших пользователей.

1. Что такое атрибут rel простыми словами

Атрибут rel (от англ. relationship — отношение, связь) — это HTML-атрибут, который указывает на характер связи между текущим документом (страницей, на которой находится код) и документом или ресурсом, на который ведет ссылка или который подключается.
Простая аналогия: Если обычная ссылка (<a href="...">) — это просто дорога от пункта А к пункту Б, то атрибут rel — это дорожный знак на этой дороге. Он говорит браузеру или поисковому роботу:
  • «Не ходи туда, это платный участок» (sponsored),
  • «Игнорируй эту дорогу при подсчете авторитета» (nofollow),
  • «Это оригинальная карта, все остальные — копии» (canonical),
  • «Загрузи этот ресурс заранее, он скоро понадобится» (preload).

2. Базовая анатомия: где и как используется rel

Атрибут rel не работает сам по себе. Он всегда является частью тега, создающего связь.
Синтаксис для гиперссылок:
html
Синтаксис для подключения ресурсов (внутри тега <head>):
html
Где он работает: Основные HTML-теги, поддерживающие этот атрибут — это <a> (гиперссылки), <link> (подключение стилей, скриптов, указание канонических URL), <area> (карты изображений) и <form> (указание отношения формы к документу).
Множественные значения: Вы можете указывать несколько значений через пробел, если это необходимо. Например, для безопасности и SEO одновременно:
html

3. «Святая троица» для SEO: управление ссылочным весом

Эти три значения используются в теге <a> и критически важны для линкбилдинга и внутренней перелинковки. Они сообщают поисковикам, как относиться к передаваемому через ссылку «весу» (PageRank).
  1. rel="nofollow"
    Исторически это был строгий запрет для робота следовать по ссылке. Однако с 2019 года Google (а следом и Яндекс) изменили трактовку: теперь это не директива, а подсказка (hint). Робот может пройти по ссылке, но не будет передавать через нее ссылочный вес.
    Где использовать: В комментариях, на форумах, в платных статьях, чтобы избежать санкций за продажу ссылок.
  2. rel="sponsored"
    Современный стандарт для маркировки любых рекламных, партнерских или спонсируемых ссылок. Это прямой сигнал поисковику: «Эта ссылка размещена за деньги или по бартеру».
  3. rel="ugc" (User-Generated Content)
    Предназначен для контента, созданного пользователями.
    Где использовать: В подписях к комментариям, в текстах отзывов на форумах или в профилях пользователей.
Лучшая практика: Для платных гостевых постов рекомендуется комбинировать значения: rel="sponsored nofollow". Это дает поисковику максимально четкий сигнал о природе ссылки.

4. Технические SEO-атрибуты

Эти атрибуты чаще всего используются в теге <link> в разделе <head> и управляют индексацией.
  • rel="canonical"
    Самый важный технический атрибут. Он указывает поисковику на оригинальную (основную) версию страницы, помогая избежать проблем с дублированным контентом.
    Пример: Страница товара с параметрами сортировки (site.ru/tovar?sort=price) должна иметь canonical, указывающий на чистый URL (site.ru/tovar).
  • rel="alternate" (в связке с hreflang)
    Сообщает поисковым системам о существовании языковых или региональных версий одной и той же страницы. Критически важно для многоязычных сайтов.
  • rel="amphtml"
    Указывает на существование ускоренной мобильной версии страницы (AMP). Актуально в основном для крупных новостных порталов.
  • rel="next" и rel="prev"
    Используются для разметки пагинации (многостраничных списков). Важный нюанс: Google официально заявил, что больше не использует их как строгий сигнал ранжирования, но Яндекс по-прежнему обращает на них внимание при сканировании структуры каталога.

5. Атрибуты для безопасности и производительности

rel управляет не только SEO, но и тем, как браузер обрабатывает страницу.
  • rel="noopener"
    Обязателен к использованию, если ссылка открывается в новой вкладке (target="_blank"). Без этого атрибута новая страница получает частичный доступ к исходной через объект window.opener, что может быть использовано для фишинга или кражи данных.
  • rel="noreferrer"
    Запрещает браузеру передавать заголовок Referer (адрес страницы, с которой пришел пользователь). Бонус: современные браузеры автоматически применяют поведение noopener, если указан noreferrer.
  • rel="preload" и rel="prefetch"
    Инструменты оптимизации скорости (Core Web Vitals).
    • preload: Заставляет браузер немедленно загрузить критически важный ресурс (например, шрифт или CSS), который понадобится на текущей странице.
    • prefetch: Загружает ресурсы, которые, вероятно, понадобятся пользователю на следующей странице (например, при наведении мыши на кнопку).

6. Топ-5 фатальных ошибок при работе с атрибутом rel

  1. Противоречивые комбинации. Например, указание rel="canonical" на одну страницу, а на самой этой странице стоит мета-тег <meta name="robots" content="noindex">. Это вводит робота в ступор и может привести к выпадению страницы из индекса.
  2. Закрытие всей внутренней перелинковки в nofollow. Устаревшая тактика «скульптурирования PageRank». В 2024+ году это только вредит сайту, так как роботы не могут нормально сканировать структуру и передавать вес важным страницам.
  3. Использование nofollow для исходящих ссылок на авторитетные источники. Если вы ссылаетесь на Википедию или гос. сайт с nofollow, поисковики могут расценить это как признак некачественного или спамерского контента.
  4. Опечатки в значениях. Написание rel="no-follow" (с дефисом) или rel="canonica". В этом случае браузер и поисковик просто проигнорируют атрибут, посчитав его неизвестным.
  5. Забывчивость с noopener. Оставление внешних ссылок с target="_blank" без защиты. Это прямая угроза безопасности пользователей.

7. Как проверить и проаудитить атрибуты rel на своем сайте

Не надейтесь на память, используйте инструменты:
  • Ручная проверка: Нажмите F12 (или ПКМ → «Просмотреть код») в браузере. Найдите нужную ссылку или тег <link> и проверьте атрибуты.
  • Массовая проверка (SEO-краулеры): Используйте программы вроде Screaming Frog SEO Spider или Netpeak Spider. Они позволяют за один проход найти:
    • Страницы с отсутствующим или указывающим на 404 canonical.
    • Внешние ссылки без rel="noopener".
    • Избыточное использование nofollow во внутренней перелинковке.
  • Google Search Console: Инструмент «Проверка URL» покажет, какую каноническую страницу Google выбрал для вашего документа и совпадает ли она с той, что вы указали в rel="canonical".

8. Заключение

Атрибут rel — это пульт управления, который дает веб-мастеру власть над тем, как роботы и браузеры интерпретируют связи на сайте. Грамотное использование этих значений улучшает индексацию, защищает от спама, ускоряет загрузку и закрывает уязвимости безопасности.
Чек-лист для быстрой проверки прямо сейчас:
  • На всех страницах с дублями или параметрами в URL прописан корректный rel="canonical".
  • Все внешние ссылки, открывающиеся в новой вкладке (target="_blank"), имеют rel="noopener".
  • В комментариях и пользовательском контенте ссылки автоматически получают rel="ugc" или rel="nofollow".
Призыв к действию:
Откройте код главной страницы вашего сайта прямо сейчас. Найдите тег <link rel="canonical">. Он там есть? И указывает ли он на правильный, чистый URL без лишних параметров? Если нет — это первая задача для вашего разработчика на сегодня.

Есть проблемы с сайтом и SEO?

Попробуйте самостоятельно улучшить свой сайт, используя мои чек-листы и рекомендации