Атрибуты rel (nofollow, noreferrer)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 48
Автор
Рек. время прохождения 5 минут
Упражнений 12
Комментарии 0
Тренажер HTML
Тема урока — атрибут rel у ссылок и его значения nofollow и noreferrer. Вы потренируетесь помечать внешние и рекламные ссылки, а также делать переходы без передачи источника. Значения rel перечисляются через пробел и могут комбинироваться; порядок токенов не важен, регистр тоже. Важно понимать роль этих значений: nofollow сообщает поисковым системам, что переход по ссылке не должен учитываться как сигнал ранжирования, а noreferrer отключает отправку заголовка Referer при переходе на целевой сайт. В заданиях вы будете заполнять пропуски в HTML с помощью макросов inputN: где-то потребуется указать имя атрибута, где-то — его значение или целый набор значений. Практика включает одиночные ссылки, списки, кнопки-ссылки, футер-навигацию и мини-галерею. Никакой теории и лекций — только практика и моментальная проверка. Если встретите незнакомый термин, воспользуйтесь подсказкой: Referer 🛈. Выполнив упражнения, вы уверенно примените корректные значения rel для внешних ссылок.
Список тем

Пометьте партнёрскую ссылку как не влияющую на ранжирование

id: 37807_rel-nofollow-basic

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

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.45}
.note{color:#555;font-size:14px;margin-bottom:8px}
.btn{display:inline-block;padding:10px 14px;background:#2d6cdf;color:#fff;text-decoration:none;border-radius:8px}
.btn:hover{background:#1f5ad1}
HTML
<div class="wrap">
  <p class="note">Переход по партнёрской ссылке:</p>
  <a href="https://example.com" input1="input2" class="btn">Партнёр</a>
</div>
Добавьте к ссылке атрибут rel и укажите в нём соответствующий токен. Имя атрибута ставится рядом с другими атрибутами ссылки, значение пишется в кавычках. Токены пишутся без запятых. Для этой задачи нужен один токен.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Откройте внешнюю ссылку без передачи источника

id: 37807_rel-noreferrer-blank

Ссылка открывается в новой вкладке. Необходимо отключить передачу адреса-источника на целевой сайт. Визуально это обычная ссылка, проверка производится по коду.

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.link{color:#2d6cdf;text-decoration:none;border-bottom:1px dashed #2d6cdf}
.link:hover{color:#1f5ad1;border-bottom-color:#1f5ad1}
.hint{font-size:12px;color:#666;margin-top:8px}
HTML
<div class="wrap">
  <a href="https://developer.mozilla.org/" target="_blank" rel="input1" class="link">MDN</a>
  <p class="hint">Ссылка должна открываться в новой вкладке, но без передачи источника.</p>
</div>
Когда ссылка открывается в новой вкладке (target="_blank"), можно добавить атрибут rel с соответствующим значением, которое отключает отправку заголовка Referer. Введите нужный токен в значение rel.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинация значений rel для внешней ссылки

id: 37807_rel-combo

Ссылка ведёт на внешний сайт. Необходимо одновременно задать два значения в одном атрибуте, перечислив их через пробел. Порядок значений не важен.

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.btn{display:inline-block;padding:10px 14px;background:#10b981;color:#fff;text-decoration:none;border-radius:8px}
.btn:hover{background:#0e9f75}
HTML
<div class="wrap">
  <a input1="https://www.wikipedia.org/" class="btn" input2="input3">Открыть Wiki</a>
</div>
Укажите имя атрибута, который задаёт адрес ссылки (href). Затем добавьте атрибут rel и перечислите в нём сразу два значения через пробел. Регистр и порядок значений не влияют на результат.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Смешанный список ссылок: разные значения rel

id: 37807_rel-mixed-list

Список содержит внутреннюю и внешние ссылки. Для каждой внешней ссылки укажите корректное отношение. В одной из ссылок нужно запретить влияние на ранжирование, в другой — отключить передачу источника.

CSS
.list{max-width:360px;margin:0 auto;padding:0;list-style:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.list li{margin:8px 0}
.link{color:#111;text-decoration:none;padding:6px 10px;border-radius:6px;background:#f3f4f6;display:inline-block}
.link.ext{background:#eef2ff}
.link:hover{background:#e5e7eb}
.link.ext:hover{background:#e0e7ff}
HTML
<ul class="list">
  <li><a href="/about" class="link">О проекте</a></li>
  <li><a href="https://partner.example.com/offers" input1="input2" class="link ext">Партнёрские акции</a></li>
  <li><a href="https://news.example.com" target="_blank" input3="input4" class="link ext">Новости</a></li>
</ul>
Определите какие ссылки являются внешними. К партнёрским или рекламным укажите соответствующий токен в rel. Для ссылки, которая открывается в новой вкладке, добавьте значение, отключающее Referer. Внутренним ссылкам ничего добавлять не требуется.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Мини-галерея: открывать превью без передачи источника

id: 37807_rel-gallery-noreferrer

Изображения открываются в новой вкладке при клике. Требуется отключить передачу источника для каждого превью. Адреса картинок уже заданы и менять их не нужно.

Кнопка-ссылка на внешний магазин: комбинируйте значения

id: 37807_rel-cta-combo

Кнопка ведёт на внешний магазин. Требуется одновременно пометить ссылку и для поисковых систем, и для передачи источника. Значения указываются в одном атрибуте через пробел.

CSS
.card{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.title{margin:0 0 10px 0;font-size:16px}
.btn.primary{display:inline-block;padding:10px 14px;background:#ef4444;color:#fff;text-decoration:none;border-radius:8px}
.btn.primary:hover{background:#dc2626}
HTML
<div class="card">
  <h3 class="title">Купить сейчас</h3>
  <a href="https://store.example.com/product" class="btn primary" input1="input2">Перейти</a>
</div>
Добавьте атрибут rel и перечислите два значения через пробел. Порядок не важен. Не меняйте адрес ссылки и классы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Правильно назовите атрибут и задайте нужные значения

id: 37807_rel-attrs-naming

В первой ссылке уже задано значение, но пропущено имя атрибута. Во второй необходимо указать и имя атрибута, и значение. Обе ссылки ведут на внешний ресурс и требуют корректного отношения.

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.pill{display:inline-block;margin:4px 6px;padding:6px 10px;border-radius:999px;background:#e5e7eb;color:#111;text-decoration:none}
.pill:hover{background:#d1d5db}
HTML
<div class="wrap">
  <a href="https://example.com/pricing" input1="nofollow" class="pill">Цены</a>
  <a href="https://example.com/docs" input2="input3" class="pill">Документация</a>
</div>
В первом элементе добавьте имя атрибута для уже указанного значения. Во втором элементе добавьте имя атрибута и задайте значение, которое отключает передачу источника. Следуйте формату атрибутов HTML.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Футер-навигация: корректно отметьте внешние ресурсы

id: 37807_rel-footer-nav

В футере есть внутренняя ссылка и две внешние. Нужно отметить одну из внешних ссылок как не влияющую на ранжирование, а для другой отключить передачу источника при открытии в новой вкладке.

Сравнение двух кнопок: разные назначение rel

id: 37807_rel-compare-two

Первая кнопка ведёт на страницу с акциями, вторая — на инструмент, открывающийся в новой вкладке. Для каждой укажите подходящее значение в rel. Визуально кнопки отличаются стилем.

CSS
.wrap.two{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none}
.btn.small{font-size:14px}
.btn.small{background:#2563eb;color:#fff}
.btn.small.ghost{background:#fff;color:#2563eb;border:1px solid #2563eb}
HTML
<div class="wrap two">
  <a href="https://offers.example.com" input1="input2" class="btn small">Акции</a>
  <a href="https://tools.example.com" target="_blank" input3="input4" class="btn small ghost">Инструменты</a>
</div>
Для рекламных/акционных ссылок используйте значение, не влияющее на ранжирование. Для внешней ссылки, открывающейся в новой вкладке, используйте значение, отключающее передачу источника.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылка на видео: открывать в новой вкладке без источника

id: 37807_rel-video-noreferrer

Ссылка ведёт на видеофайл и открывается в новой вкладке. Нужно отключить передачу реферера. Адрес видео уже указан и не подлежит изменению.

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.btn{display:inline-block;padding:10px 14px;background:#0ea5e9;color:#fff;text-decoration:none;border-radius:8px}
.btn:hover{background:#0284c7}
.note{font-size:12px;color:#666;margin-top:8px}
HTML
<div class="wrap">
  <a href="https://naytikurs.ru/img/1.mp4" target="_blank" input1="input2" class="btn">Смотреть видео</a>
  <p class="note">Видео откроется в новой вкладке.</p>
</div>
Добавьте к ссылке атрибут rel с нужным значением. Не меняйте href и target.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Навешиваем корректные значения rel для двух внешних ссылок

id: 37807_rel-two-externals

Две внешние ссылки располагаются рядом: одна на партнёрский материал, другая открывается в новой вкладке. Для каждой добавьте корректное значение в rel. Стили помогут визуально отличить ссылки.

CSS
.wrap{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;display:flex;gap:8px;flex-wrap:wrap}
.link{padding:6px 10px;border-radius:6px;text-decoration:none}
.link.ad{background:#fff7ed;color:#9a3412;border:1px solid #fdba74}
.link.tool{background:#ecfeff;color:#155e75;border:1px solid #67e8f9}
HTML
<div class="wrap">
  <a href="https://ads.example.com/article" input1="input2" class="link ad">Рекламный материал</a>
  <a href="https://tool.example.com/app" target="_blank" input3="input4" class="link tool">Онлайн-инструмент</a>
</div>
У первой ссылки укажите токен, который сообщает поисковикам не учитывать её для ранжирования. У второй — токен, отключающий передачу Referer. Значения пишутся без запятых, через пробел не требуется, т.к. используется по одному значению.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинированный список: примените нужные токены rel

id: 37807_rel-multi-mix

Ниже три ссылки: внутренняя, партнёрская и внешняя в новой вкладке. Добавьте корректные значения rel только там, где это требуется. Внутреннюю ссылку оставьте без изменений.

CSS
.list{max-width:360px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;padding:0;list-style:none}
.list li{margin:6px 0}
.a{display:inline-block;padding:6px 10px;border-radius:6px;text-decoration:none;background:#f3f4f6;color:#111}
.a.ext{background:#eef2ff}
.a.partner{background:#fff7ed}
HTML
<ul class="list">
  <li><a href="/help" class="a">Помощь</a></li>
  <li><a href="https://partner.example.com" input1="input2" class="a partner">Партнёр</a></li>
  <li><a href="https://external.example.org" target="_blank" input3="input4" class="a ext">Инструменты</a></li>
</ul>
Для партнёрской — используйте токен, исключающий влияние на ранжирование. Для внешней в новой вкладке — значение, отключающее Referer. Не меняйте внутреннюю ссылку. Если порядок атрибутов отличается — это не критично.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру