Гіперпосилання (hyperlink) — HTML-елемент <a href="...">, який дозволяє одним кліком переходити між сторінками у вебі. Базова одиниця навігації інтернету та ключовий сигнал ранжування для пошукових систем.
Гіперпосилання (від англ. hyperlink), або просто посилання, — це HTML-елемент, який пов’язує між собою сторінки, документи та ресурси у вебі. Одним кліком по гіперпосиланню користувач переходить з однієї сторінки на іншу, відкриває PDF, запускає дзвінок, надсилає email або навіть перемотує відео на потрібну секунду. Гіперпосилання — базова одиниця навігації інтернету: без них веб був би не мережею, а набором ізольованих документів. Слово hypertext, від якого походить «гіперпосилання», придумав Тед Нельсон у 1965 році, а першу робочу реалізацію HTML-посилання зробив Тім Бернерс-Лі в CERN у 1989–1991 роках — це й стало моментом народження World Wide Web.
В українській мові використовуються різні синоніми: гіперпосилання, посилання, лінк (від англ. link), гіперлінк. Усі вони позначають одне й те саме — HTML-тег <a> з атрибутом href.
Як влаштоване HTML-посилання
Будь-яке гіперпосилання в HTML — це тег <a> (від англ. anchor, «якір») з обов’язковим атрибутом href (hypertext reference, «посилання на гіпертекст»):
<a href="https://example.com/page">Текст посилання</a>
З чого складається посилання:
<a>— відкривальний і закривальний тег</a>.href="..."— URL-адреса призначення. Може бути абсолютною (https://example.com/page), відносною (/page), якірною (#section-1), email (mailto:hi), телефонною (@example.com tel:+380501234567).- Анкорний текст — те, що бачить і клікає користувач. Між відкривальним і закривальним тегом.
- Додаткові атрибути —
target,rel,title,download,hreflangтощо.
Повний приклад з атрибутами:
<a href="https://example.com/report.pdf"
target="_blank"
rel="noopener noreferrer"
download
title="Завантажити PDF-звіт">
Звіт за 2026 рік (PDF, 2 МБ)
</a>
Види посилань в інтернеті
Хоча в HTML усі посилання створюються одним і тим самим тегом <a>, вони відрізняються за призначенням, напрямком та атрибутами. Базова класифікація:
За місцем джерела та цілі
| Вид | Що собою представляє | Приклад |
|---|---|---|
| Внутрішнє (internal link) | Посилання з однієї сторінки сайту на іншу сторінку того самого сайту | <a href="/blog/article">Читайте статтю</a> |
| Вихідне / зовнішнє (outbound link) | Веде з вашого сайту на інший домен | <a href="https://google.com">Google</a> |
| Зворотне (backlink) | Приходить з чужого сайту на ваш. Головний сигнал ранжування Google | На сайті wikipedia.org стоїть посилання на ваш сайт |
| Якірне (anchor link) | Веде на конкретний фрагмент тієї самої сторінки | <a href="#section-2">До розділу 2</a> |
Канонічне (rel="canonical") | Не клікабельне посилання, а директива в <head>, що вказує Google «головну» версію сторінки | <link rel="canonical" href="https://example.com/main"> |
За типом адресата
- Веб-посилання (
https://…) — на інші сторінки в інтернеті. - Email-посилання (
mailto:hi) — відкривають поштовий клієнт.@example.com - Телефонні посилання (
tel:+380501234567) — ініціюють дзвінок (особливо важливо на мобільних). - SMS-посилання (
sms:+380501234567?body=Hello) — відкривають SMS-застосунок. - Файлові посилання — на PDF, DOC, XLS, ZIP з атрибутом
download. - Якірні (
#id) — на фрагмент поточної сторінки. - JavaScript-посилання (
javascript:void(0)) — застаріла практика, краще використовувати<button>для дій без переходу.
За типом анкорного тексту
- Анкорні посилання — містять описовий текст:
<a href="...">ефективна веб-аналітика</a>. Передають Google семантичну підказку про тему цільової сторінки. - Безанкорні (URL anchor) — анкор містить сам URL:
<a href="https://example.com">https://example.com</a>. Більшість «сирих» посилань саме такі. - Брендові — анкор містить назву бренду: «Analytics.net.ua», «Google».
- Generic — нейтральні слова: «тут», «click here», «детальніше».
- Image-посилання — обгортка тегу
<img>в<a>. Анкор для Google =alt-атрибут картинки.
За SEO-атрибутами rel
Атрибут rel повідомляє Google, як саме інтерпретувати посилання:
| Значення | Коли застосовувати |
|---|---|
| (без атрибуту) — dofollow | Звичайне редакційне посилання, передає ранжуючу вагу |
rel="nofollow" | Ненадійні джерела, коментарі — Google не передає PageRank |
rel="sponsored" | Реклама, платні розміщення, афіліатні посилання |
rel="ugc" | User-generated content: коментарі, форуми, відгуки |
rel="noopener" | Безпека: запобігає доступу відкритої сторінки до window.opener |
rel="noreferrer" | Не передавати заголовок Referer — анонімний перехід |
rel="canonical" | Вказує канонічну версію сторінки (тільки в <head>) |
rel="alternate" hreflang="uk" | Мовна або мобільна версія сторінки |
rel="prev" / rel="next" | Пагінація (Google перестав використовувати у 2019, але валідно для інших ботів) |
З 10 вересня 2019 року атрибути nofollow, sponsored і ugc стали для Google «підказками» (hints), а не директивами — алгоритм може врахувати або проігнорувати їх на власний розсуд.
Гіперпосилання та target="_blank"
Атрибут target керує тим, куди відкриється нова сторінка:
target="_self"(за замовчуванням) — у поточній вкладці.target="_blank"— у новій вкладці/вікні.target="_parent"— у батьківському фреймі.target="_top"— у верхньому фреймі.
Важливо щодо безпеки: посилання з target="_blank" завжди мають мати rel="noopener noreferrer". Без цього атрибуту відкрита сторінка технічно може отримати доступ до об’єкта window.opener і запустити фішингову атаку (manipulation of original tab). З 2018 року всі сучасні браузери (Chrome, Safari, Firefox) застосовують noopener неявно при target="_blank", але явно прописувати все одно безпечніше.
Навіщо гіперпосилання потрібні для SEO
Гіперпосилання — не просто навігація. Вони відіграють три ключові ролі в пошуковому ранжуванні:
- Сканування (crawling). Пошукові роботи обходять інтернет саме за посиланнями — переходять з однієї сторінки на іншу. Якщо на вашу сторінку немає жодного посилання (ні внутрішнього, ні зовнішнього), Google ніколи її не знайде.
- Передача авторитету (link equity). Кожне гіперпосилання передає певну кількість «ваги» (PageRank) від сторінки-джерела до сторінки-цілі. Чим більше якісних посилань вказує на сторінку, тим вищі її шанси потрапити в топ видачі.
- Семантична підказка. Анкорний текст посилання повідомляє Google, про що цільова сторінка. Десять посилань з анкором «веб-аналітика» — потужний сигнал, що сторінка релевантна цьому запиту.
За даними дослідження Backlinko (аналіз 11,8 млн результатів), сторінка на першій позиції в Google має у середньому в 3,8 разу більше зворотних посилань, ніж сторінки на позиціях 2–10. Без гіперпосилань сучасний пошук не працював би взагалі — саме на аналізі посилань був побудований оригінальний алгоритм PageRank Google у 1998 році.
Гіперпосилання vs URL vs URI
Часто ці терміни використовують як синоніми, але строго кажучи вони описують різні сутності:
- URL (Uniform Resource Locator) — конкретна адреса ресурсу в інтернеті:
https://example.com/page?q=1#section. Це «координата» сторінки. - URI (Uniform Resource Identifier) — ширше поняття, будь-який ідентифікатор ресурсу. URL — окремий випадок URI.
- Гіперпосилання — це HTML-елемент, що обгортає URL у клікабельний об’єкт, який користувач може активувати. Гіперпосилання містить URL, але не дорівнює йому.
Можна сказати: URL — це адреса, а гіперпосилання — це «двері» з цією адресою, через які можна зайти.
Атрибути доступності (a11y)
Хороше посилання не лише працює технічно, але й доступне для користувачів зі скрінрідерами та клавіатурною навігацією:
- Описовий анкор. «Завантажити звіт за 2026 рік» краще, ніж «тут».
aria-label— для іконкових посилань без видимого тексту:<a href="/cart" aria-label="Перейти в кошик">🛒</a>.- Видимий focus-стиль — для користувачів, які навігують Tab-клавішею.
- Не використовувати
<a href="#">для кнопок-дій — це збиває скрінрідери. Для дій використовуйте<button>. - Мінімальний розмір клікабельної області — 24×24 px за WCAG 2.2 AA, 44×44 px рекомендація Apple HIG для тача.
Биті посилання (broken links)
Бите посилання (broken link) — гіперпосилання, що веде на неіснуючу сторінку і повертає HTTP-код 404 Not Found (або 410 Gone, 500 Server Error, DNS-помилку). Парадоксально, але биті посилання — основа окремої SEO-тактики broken link building: ви знаходите биті посилання на чужих сайтах, створюєте свій матеріал на ту саму тему і пропонуєте замінити мертве посилання на своє.
Регулярна перевірка власного сайту на биті посилання — стандартна гігієна. Інструменти:
- Google Search Console — розділ «Покриття» / «Сторінки».
- Screaming Frog SEO Spider — десктопний краулер.
- Ahrefs Site Audit, Semrush Site Audit — хмарні сканери.
- Broken Link Checker для WordPress, Dead Link Checker онлайн.
Биті внутрішні посилання потрібно лагодити (виправити URL або поставити 301-редирект на актуальну сторінку). Биті зовнішні — замінити або видалити.
Гіперпосилання в епоху AI
З появою AI Overviews в Google і ChatGPT Search роль гіперпосилань почала змінюватися. AI-асистенти дають користувачу готову відповідь, і частина кліків по органічних посиланнях втрачається. За даними Ahrefs, CTR першої позиції на запитах з AI Overviews падає на 30–60%. Проте посилання в джерелах AI-відповідей залишаються важливими — вони формують AI-цитування, новий тип сигналу, під який ще тільки формуються метрики та інструменти оптимізації.
Гіперпосилання як технологія за 35 років існування вебу не змінилося — змінився контекст його використання. Тег <a href> залишається таким самим базовим будівельним блоком, яким його створив Тім Бернерс-Лі у 1991 році.