Атрибут rel тега <a> — nofollow та інші зв'язки
Атрибут rel визначає відношення між поточним документом і пов'язаним документа.
Використовується тільки з атрибутом href.
автор: NagarD
Загальний опис
автор: NagarD
- Порада
-
Атирибутів rel може бути кілька, в такому випадку записувати їх потрібно через пропуск. Наприклад,
автор: NagarDrel="noopener noreferrer nofollow"
Синтаксис
<a rel="value">Атрибут rel може отримувати 13 значень:
-
alternate -
Надає посилання на альтернативний вигляд документа (тобто друк сторінки, переклад або дзеркала).
автор: NagarD -
author -
Надає посилання на автора документа.
автор: NagarD -
bookmark -
Постійний URL використовується для установки закладок.
автор: NagarD -
external -
Вказує, що посилання на документ не є частиною одного і того ж сайту, що і поточний документ.
автор: NagarD -
help -
Надає посилання на документ довідки.
автор: NagarD -
license -
Надає посилання на інформацію про авторські права для документа.
автор: NagarD -
next -
Надає посилання на наступний документ в серії.
автор: NagarD -
nofollow -
Вказує на те, що гіперпосилання не передає свою вагу (зміст) тій сторінці, на яку посилається. ("Nofollow" використовується Google, щоб вказати, що пошукова система Google не повинна слідувати за цим посиланням, в основному використовується для платних посилань).
автор: NagarD -
noreferrer -
Вимагає, що браузер не повинен посилати заголовок HTTP Referer, якщо користувач слідує із гіперпосилання іншої сторінки.
автор: NagarD -
noopener -
Вимагає, щоб будь-який контекст перегляду, створений після гіперпосилання не повинен мати контекст перегляду браузера.
автор: NagarD -
prev -
Попередній документ у виборі.
автор: NagarD -
search -
Посилання на інструмент пошуку для документа.
автор: NagarD -
tag -
Теґ (ключове слово) для поточного документа.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
rel описує стосунок цілі до сторінки, на вигляд не впливаючи: nofollow каже пошуковикам не передавати вагу (реклама, коментарі), noopener захищає сторінку при відкритті в новій вкладці.
<p><a rel="nofollow" href="https://example.com">Рекламне посилання</a> — nofollow.</p>
<p><a rel="noopener" href="https://example.com" target="_blank">У новій вкладці</a> — noopener.</p>Усі чотири посилання браузер малює однаково — rel вигляду не міняє; підписи домальовує CSS через селектор a[rel~="…"], щоб було видно, де що стоїть
HTML
<p><a href="https://example.com" rel="sponsored">Платне розміщення</a></p>
<p><a href="https://example.com" rel="ugc">Посилання з коментаря</a></p>
<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">Відкрити в новій вкладці</a></p>
<p><a href="https://example.com">Звичайне посилання</a></p>CSS
/* ~= бере одне слово зі списку, розділеного пробілами */
a[rel~="sponsored"]::after { content: " [sponsored]"; }
a[rel~="ugc"]::after { content: " [ugc]"; }
a[rel~="noopener"]::after { content: " [noopener]"; }
a[rel~="noreferrer"]::after{ content: " [noreferrer]"; }
a::after {
color: #b1381e;
font-size: 0.85em;
font-family: monospace;
}
a:not([rel])::after {
content: " [rel немає]";
color: #6b7280;
}Різниця між HTML 4.01 та HTML5
Деякі значення видалені, а деякі нові значення добавлені.
Коментарі
Коментарів ще немає — будьте першим!