Як зробити посилання клікабельним в email, соцмережах, HTML

Щоб зробити посилання клікабельним, виділіть текст, який хочете перетворити на посилання, натисніть Ctrl+K (Cmd+K на Mac) і вставте URL призначення. Це єдине поєднання клавіш працює в Gmail, Google Docs, Word, Notion і більшості редакторів. У сирому HTML це пишеться вручну: <a href="https://example.com">visit us</a>. Усе інше - це знання, де гіперпосилання працюють, де ні, і як зробити посилання читабельним.

Це інструкція з кластера tutorials. Ширшу картину того, що робити з посиланнями, коли вони вже клікабельні (брендування, відстеження, маршрутизація), розкриває опорна стаття про те, що таке керування посиланнями.

Швидкий спосіб: виділити і Ctrl+K

Майже кожен текстовий редактор із форматуванням використовує той самий патерн. Напишіть слова, які мають стати клікабельними, виділіть їх і натисніть Ctrl+K (Cmd+K на Mac) або клацніть іконку ланцюжка на панелі інструментів. Вставте URL, підтвердьте - готово.

Деякі редактори відрізняються лише розташуванням кнопки. Gmail, Google Docs і Word - усі мають кнопку посилання; постійна величина тут - клавіатурне скорочення. Якщо ви вставите голий URL, що починається з https://, окремим рядком, більшість інструментів автоматично розпізнають його і зроблять клікабельним без усього цього, але гіперпосилання з анкорним текстом читається краще, ніж голе посилання.

Єдине, у чому люди найчастіше помиляються, - анкорний текст. Видимі слова мають описувати призначення.

• Добре: read the [setup guide](/blog/setup-branded-short-links).
• Слабко: "натисніть тут", яке не повідомляє нічого ні читачеві, ні програмі читання з екрана.

Як клікабельне посилання працює в HTML

Під кожною кнопкою "зробити посилання" ховається один HTML-елемент. Тег-якір складається з двох частин: href (куди він веде) і текст між тегами (що клікає читач).

<a href="https://example.com/pricing">See pricing</a>

От і все. Довідка MDN про елемент-якір документує решту (відкриття в новій вкладці через target, атрибути rel для безпеки). Два варіанти трапляються часто: посилання mailto: відкривають email, а посилання tel: починають дзвінок.

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

Де посилання не стають клікабельними

Ось частина, через яку люди йдуть шукати відповідь у пошуку. Дехто з найціннішої "нерухомості" для посилання - звичайний текст, де ніщо не стає клікабельним, хоч що ви робіть.

• Підписи та коментарі в Instagram: не клікабельні.
• Описи відео в TikTok: не клікабельні.
• Більшість текстів постів у стрічках соцмереж: не клікабельні.
• Друковані матеріали, слайди та відео: очевидно не клікабельні, але тут на допомогу приходить QR-код.

У таких місцях сирий URL просто лежить текстом, який читачеві довелося б набирати вручну. Рішення двобічне: розмістити посилання там, де посилання таки працюють (слот посилання в біо або біо-сторінка), і зробити URL коротким та достатньо легким для запам'ятовування, щоб набрати чи впізнати. Довгий трекінговий URL тут безнадійний; коротке брендоване посилання - ні.

Саме тому додавання посилання до біо Instagram і лінк-ін-біо для TikTok існують як окремі покрокові посібники - блокує платформа, а не ваше форматування.

Зробіть клікабельне посилання вартим кліку

Щойно посилання запрацювало, два покращення роблять його кращим. Скоротіть його, щоб воно було охайним і зручним для торкання, і забрендуйте, щоб люди йому довіряли. Коротке брендоване посилання легше розмістити в біо, зачитати вголос у відео чи вставити в SMS, ніж сирий URL із рядком запиту. Це також дає змогу відстежувати клік і пізніше перенаправити призначення, не редагуючи сам пост.

Якщо ви пишете HTML вручну, залишайте сирий URL у href і дайте анкорному тексту нести сенс. Якщо ви вставляєте посилання в підписи та біо, покладайтеся на коротке брендоване посилання та біо-сторінку. Те саме посилання, розміщене там, де на нього справді можна клікнути.

Читайте серію опорних статей

Цей матеріал належить до кластера tutorials. Опорна стаття - що таке керування посиланнями. З основами скорочення посилань ознайомить супутній матеріал як скоротити URL.

Читайте також у блозі

• Що таке керування посиланнями? Повна картина
• Як скоротити URL: безкоштовні, брендовані та масові посилання
• Як додати посилання до біо Instagram
• Лінк-ін-біо для TikTok: повне налаштування