Якщо звичайні посилання ведуть на веб-сторінки, то якірні посилання ведуть до конкретних місць на веб-сторінках.
Якірне посилання на зовнішню сторінку
Якірне посилання є необхідним, якщо вам потрібно послатися не просто на іншу сторінку, а, наприклад, на певний розділ статті на іншій сторінці.
Якірне посилання на одній сторінці
Якірне посилання так само необхідне в рамках однієї сторінки. Користувачу потрібно просто натиснути посилання, і сторінка автоматично прокрутиться до необхідного елемента, де встановлено якір.
Якірні посилання, як додаткові елементи навігації, можуть зробити читання і орієнтацію в статті більш зручними. Особливо, якщо стаття велика і має складну структуру.
Завдяки зручності, веб-сторінка стає більш "юзер-френдлі", що може позитивно позначитися на SEO сайту. Крім того, якірні посилання, як і будь-які інші, є чудовим способом керування увагою користувача, а також ефективним елементом стратегії перхресного лінкування між сторінками.
Головна мета якірних посилань - створити зручну навігацію на сторінках сайту. Особливо це актуально для змісту статті, якщо такий є на сторінці.
Завдяки якірним посиланням ваш зміст стає не просто інформативним, а й функціональним. Користувач може швидко перейти до розділу, який цікавить.
З чого складається якірне посилання технічно?
Посилання-якір складається з:
- якоря - прихованого елемента, який встановлюється на будь-якій частині статті;
- посилання, яке веде до якірного елемента.
Як створити якірне посилання?
Наприклад, потрібно зв'язати пункт у змісті статті з розділом статті. У цьому випадку посилання - це пункт у змісті, а якір, до якого веде посилання - це назва розділу.
1) Щоб створити якірне посилання, спочатку потрібно встановити якір - id (наприклад, "Keyword-Search") для потрібного HTML-елемента сторінки (у нашому прикладі це назва розділу "Step 1: Keyword Search"):
<h2 id="Keyword-Search">Крок 1: Пошук ключових слів</h2>
2) Потім створити посилання, додавши до адреси сторінки доданий id зі знаком "#" попереду (наприклад, "#Keyword-Search"):
<a href="#Keyword-Search">Крок 1: Пошук ключових слів</a>
Якщо якірне посилання веде до зовнішньої сторінки (наприклад: sitename.com/someurl), до адреси необхідно додати id, заздалегідь встановленого якоря (наприклад: sitename.com/someurl#mycustomword).
В результаті, при натисканні на якірне посилання має відбутися перехід до якоря: обраний елемент (у нашому прикладі - назва розділу) повинен "прилипнути" до верхньої частини екрана.
Що робити, якщо "плаваюче" меню сайту закриває елемент з встановленим якорем?
Те, що "плаваюче" меню перекриває текст з якорем під час переходу (до цього тексту) за посиланням, є природнім, оскільки якір має "прилипати" до верху сторінки, а не до верху меню сайту чи інших елементів. Однак це проблема.
Проблему можна вирішити, додавши відступ зверху для якірного елемента. Відступ повинен бути не меншим за висоту меню (тобто, якщо висота меню = 100px, то відступ потрібно зробити таким же).
Як додати відступ зверху для якірного елемента:
У CSS необхідно додати кілька магічних рядків до обраного якірного елемента.
Наприклад, потрібно додати відступ у 100px. В якості якоря використовується підзаголовок H2, тому відступ будемо додавати відносно H2 (але не для всіх H2, а тільки тих, у яких є id).
h2[id]:target {
padding-top: 100px;
margin-top: -100px;
}
В результаті, всі підзаголовки H2 з доданим ID (будь-яким) будуть отримувати відступ зверху на 100 px при прокрутці до них як до цільового якоря після натискання на якірне посилання.
Візуально це повинно виглядати так, ніби якірний елемент "прилипає" до меню під час переходу до нього.
Як бачите, за допомогою якірних посилань можна виконувати ряд завдань:
- поліпшення зручності користування;
- створення структури перелінковки між сторінками;
- покращення SEO завдяки зручності, поведінковим факторам та якорному тексту (тексту посилання), який є важливим сигналом для пошукових систем (тому має бути релевантним вмісту, до якого веде посилання).
Завдання, які виконуються якірними посиланнями, роблять їх важливим елементом навігації між конкретними розділами веб-сторінок і прекрасним інструментом для поліпшення користувацького досвіду.