Как сделать кликабельную ссылку в 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://, отдельной строкой, большинство инструментов автоматически распознают его и делают кликабельным без всего вышеперечисленного, но гиперссылка с анкорным текстом читается лучше, чем голая ссылка.

Единственное, что чаще всего делают неправильно, - это анкорный текст. Видимые слова должны описывать место назначения.

• Хорошо: читайте [руководство по настройке](/blog/setup-branded-short-links).
• Плохо: "нажмите здесь" - не сообщает ничего ни читателю, ни программе чтения с экрана.

Как работает кликабельная ссылка в HTML

За каждой кнопкой "сделать ссылку" стоит один HTML-элемент. У тега ссылки (anchor) есть две части: href (куда она ведёт) и текст между тегами (то, на что нажимает читатель).

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

Вот и всё. Справочник MDN по элементу anchor описывает остальное (открытие в новой вкладке через target, атрибуты rel для безопасности). Часто встречаются два варианта: ссылки mailto: открывают письмо, а ссылки tel: запускают звонок.

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

Где ссылки не становятся кликабельными

Вот та часть, из-за которой люди начинают гуглить. Часть самых ценных мест для ссылки - это обычный текст, где ничего не становится кликабельным, что бы вы ни делали.

• Подписи и комментарии Instagram: не кликабельны.
• Описания видео TikTok: не кликабельны.
• Тексты большинства постов в лентах соцсетей: не кликабельны.
• Печатные материалы, слайды и видео: очевидно не кликабельны, но здесь на помощь приходит QR-код.

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

Именно поэтому существуют отдельные руководства как добавить ссылку в био Instagram и TikTok link-in-bio - препятствие создаёт платформа, а не ваше форматирование.

Сделайте кликабельную ссылку достойной клика

Когда ссылка уже работает, есть два улучшения. Сократите её, чтобы она была чистой и удобной для нажатия, и брендируйте, чтобы ей доверяли. Короткую брендированную ссылку проще разместить в био, произнести вслух в видео или вставить в SMS, чем необработанный URL с query-строкой. Это также позволяет отслеживать клики и позже перенаправить назначение, не редактируя сам пост.

Если вы пишете HTML вручную, оставьте необработанный URL в href, а смысл пусть несёт анкорный текст. Если вставляете ссылки в подписи и био, опирайтесь на короткую брендированную ссылку и страницу био. Ссылка та же - просто размещена там, где по ней реально можно нажать.

Читайте серию статей-основ

Эта статья относится к кластеру tutorials. Статья-основа - что такое управление ссылками. Об основах сокращения ссылок рассказывает материал-компаньон как сократить URL.

Похожие материалы в блоге

• Что такое управление ссылками? Полная картина
• Как сократить URL: бесплатные, брендированные и массовые ссылки
• Как добавить ссылку в био Instagram
• TikTok link in bio: полная настройка