Якірні посилання: як створити посилання-переходи в HTML і CMS та що вони дають для SEO

Якірне посилання, яке також називають посиланням-переходом, є однією з найстаріших можливостей HTML і однією з найкорисніших на довгому контенті. Воно дозволяє читачеві перейти до потрібної відповіді замість прокручування. Сам Google вважає посилання основним сигналом зв'язку сторінок, а його найкращі практики щодо посилань наголошують, що посилання мають бути справжніми елементами a з href. Цей посібник показує, як створювати якірні посилання в чистому HTML та в основних CMS, що вони дають для SEO та відповідей ШІ і як вони співвідносяться з текстом анкора.

Що таке якірне посилання?

Якірне посилання є гіперпосиланням, призначення якого розташоване всередині сторінки. URL закінчується знаком решітки з ідентифікатором, який називають фрагментом: example.com/guide#step-3. Коли хтось на нього клікає, браузер завантажує сторінку (або залишається на ній) і прокручує до елемента з id step-3.

Є три поширені застосування:

• Навігація в межах сторінки: зміст угорі статті або посилання «нагору».
• Глибокі посилання з іншої сторінки: посилання з однієї статті на точний розділ іншої, наприклад на визначення в глосарії.
• Поширення конкретного фрагмента: надсилання колезі прямо до абзацу, що відповідає на його запитання.

Пошукові системи вважають example.com/guide і example.com/guide#step-3 однією сторінкою. Фрагмент ніколи не створює нового URL для індексації, тож якірні посилання не можуть спричинити дубльований контент.

Як створити якірне посилання в HTML?

Достатньо двох фрагментів коду: id на цілі та посилання, що вказує на неї.

1. Додайте id до цілі: <h2 id="pricing">Pricing</h2>. Використовуйте малі літери, цифри та дефіси без пробілів і тримайте кожен id унікальним на сторінці.
2. Послайтеся на нього на тій самій сторінці: <a href="#pricing">See pricing</a>.
3. Послайтеся на нього з іншої сторінки: <a href="/guide#pricing">Pricing section of the guide</a>.
4. Перевірте: клікніть на посилання, переконайтеся, що заголовок з'являється вгорі екрана й не прихований під фіксованою шапкою (властивість CSS scroll-margin-top це виправляє).

Старий метод, <a name="pricing"></a>, досі працює в браузерах, але застарів у HTML5. Використовуйте id на самому заголовку. Споріднена можливість, текстові фрагменти, дозволяє посиланню виділити уривок без жодного id із синтаксисом #:~:text=, як описано в MDN. Google використовує цей механізм, коли прокручує відвідувачів до уривка, цитованого в деяких виділених сніпетах.

Як додати якірні посилання в WordPress, Shopify, Webflow чи Wix?

Кожна основна CMS дозволяє задати id, не торкаючись шаблону. Назва поля змінюється від інструмента до інструмента.

Якщо ваша CMS генерує id автоматично, перевіряйте їх: деякі створюють id з повного тексту заголовка, що дає довгі нестабільні фрагменти, які ламаються, коли ви редагуєте заголовок.

Чи допомагають якірні посилання SEO?

Якірні посилання передусім зручність користування. Їхня цінність для SEO непряма, але на довгому контенті вона реальна:

• Посилання «перейти до» у результатах: на довгих, добре структурованих сторінках Google іноді показує посилання на розділи під результатом, що може підвищити видимість і кліки. Коли їх показувати, вирішує Google.
• Краще зіставлення уривків: чіткі заголовки з id допомагають пошуковим системам і ШІ-асистентам визначити точну відповідь усередині довгої сторінки, за тією ж логікою, що виграє виділені сніпети.
• Залученість: зміст дозволяє читачам дістатися потрібної частини замість того, щоб піти шукати її деінде.
• Доступність: посилання пропуску та навігація всередині сторінки допомагають користувачам клавіатури та екранних зчитувачів, цей принцип охоплюють настанови W3C щодо доступності.
• Точні внутрішні посилання: вказівка на #definition в іншій статті спрямовує читачів до точного уривка, що посилює вашу внутрішню перелінковку.

Чого якірні посилання не роблять: вони не передають додаткового авторитету сторінці, адже посилання на page#section вважається посиланням на сторінку, і вони не замінюють хороший контент. Одне технічне застереження походить прямо з основ JavaScript SEO від Google: не використовуйте фрагменти для завантаження різного контенту сторінки, бо Googlebot не може надійно обробляти такі URL. Використовуйте фрагменти лише для прокручування в межах контенту, який уже є на сторінці.

Яка різниця між якірним посиланням і текстом анкора?

Ці два терміни близькі й часто плутаються. Якірне посилання стосується того, куди веде посилання (до розділу). Текст анкора стосується того, що посилання говорить (клікабельні слова). Наша стаття глосарія про текст анкора докладно розглядає другу тему.

Які найкращі практики для якірних посилань і їхнього тексту?

Кожне якірне посилання має й текст анкора, тож обидва набори правил застосовуються разом.

• Короткі читабельні id: #pricing, #how-to-install, а не #section-1 чи фрагмент із 12 слів.
• Описовий текст посилання: Google радить текст, який є описовим, достатньо лаконічним і релевантним, та застерігає від загальних формулювань на кшталт «натисніть тут».
• Зміст на довгих сторінках: понад приблизно 1500 слів перелічіть розділи H2 угорі, кожен із посиланням на свій id.
• Заголовки-запитання: заголовки, сформульовані як запитання людей, роблять посилання-переходи кориснішими й легшими для цитування.
• Стабільні id: не змінюйте id після публікації, якщо на нього посилаються інші сторінки чи сайти.
• Перевірте структуру: аналізатор структури заголовків показує, чи чисті ваші рівні H2 і H3, перш ніж ви додасте якорі.

Яких помилок слід уникати?

• Дубльовані id: два елементи з однаковим id змушують посилання переходити лише до першого.
• Приховані цілі: заголовок усередині закритої вкладки чи акордеона може бути недосяжним для посилання.
• Фіксовані шапки, що закривають заголовок: додайте scroll-margin-top у CSS.
• Маршрутизація на основі фрагментів: односторінкові застосунки, що змінюють контент через URL #/page, важко сканувати Google.
• Переоптимізований текст анкора: повторення того самого точного ключового слова в кожному посиланні виглядає як маніпуляція.

Висновок

Якірне посилання спрямовує читачів до точного розділу сторінки через фрагмент #id. Створіть його, додавши id до заголовка й пославшись на нього, в HTML або через налаштування вашої CMS. Його переваги для SEO непрямі, але конкретні на довгому контенті: зміст, можливі посилання-переходи в Google, чіткіші уривки для відповідей ШІ та кращі внутрішні посилання, якщо текст анкора залишається описовим. Якщо ви не хочете структурувати кожну статтю вручну, Sorank, наше ПЗ для SEO та GEO в режимі autopilot, пише структуровані статті із заголовками-запитаннями та внутрішніми посиланнями й публікує їх у вашій CMS: дивіться генератор статей для блогу на базі ШІ і спробуйте його з 3-денним безкоштовним періодом.