Как одна маленькая опечатка в коде может стоить сайту позиций в поиске, а забытый символ — открыть дыру в безопасности вашего ресурса?
В веб-разработке и 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).rel="nofollow"
Исторически это был строгий запрет для робота следовать по ссылке. Однако с 2019 года Google (а следом и Яндекс) изменили трактовку: теперь это не директива, а подсказка (hint). Робот может пройти по ссылке, но не будет передавать через нее ссылочный вес.
Где использовать: В комментариях, на форумах, в платных статьях, чтобы избежать санкций за продажу ссылок.rel="sponsored"
Современный стандарт для маркировки любых рекламных, партнерских или спонсируемых ссылок. Это прямой сигнал поисковику: «Эта ссылка размещена за деньги или по бартеру».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
- Противоречивые комбинации. Например, указание
rel="canonical"на одну страницу, а на самой этой странице стоит мета-тег<meta name="robots" content="noindex">. Это вводит робота в ступор и может привести к выпадению страницы из индекса. - Закрытие всей внутренней перелинковки в
nofollow. Устаревшая тактика «скульптурирования PageRank». В 2024+ году это только вредит сайту, так как роботы не могут нормально сканировать структуру и передавать вес важным страницам. - Использование
nofollowдля исходящих ссылок на авторитетные источники. Если вы ссылаетесь на Википедию или гос. сайт сnofollow, поисковики могут расценить это как признак некачественного или спамерского контента. - Опечатки в значениях. Написание
rel="no-follow"(с дефисом) илиrel="canonica". В этом случае браузер и поисковик просто проигнорируют атрибут, посчитав его неизвестным. - Забывчивость с
noopener. Оставление внешних ссылок сtarget="_blank"без защиты. Это прямая угроза безопасности пользователей.
7. Как проверить и проаудитить атрибуты rel на своем сайте
Не надейтесь на память, используйте инструменты:
- Ручная проверка: Нажмите
F12(или ПКМ → «Просмотреть код») в браузере. Найдите нужную ссылку или тег<link>и проверьте атрибуты. - Массовая проверка (SEO-краулеры): Используйте программы вроде Screaming Frog SEO Spider или Netpeak Spider. Они позволяют за один проход найти:
- Страницы с отсутствующим или указывающим на 404
canonical. - Внешние ссылки без
rel="noopener". - Избыточное использование
nofollowво внутренней перелинковке.
- Страницы с отсутствующим или указывающим на 404
- 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?
Попробуйте самостоятельно улучшить свой сайт, используя мои чек-листы и рекомендации