Как сделать ссылку на телефон на сайте: полное руководство по tel:, WhatsApp и доступности

Кликабельный номер телефона — это ссылка с протоколом tel:, которая открывает приложение для звонков с уже набранным номером. Посетителю не придётся копировать или запоминать цифры. В руководстве разберём четыре задачи: создание ссылки, подключение мессенджеров, настройку аналитики и доступность номера.

Кратко

• Базовый синтаксис. Используйте код <a href="tel:+74951234567">+7 (495) 123-45-67</a>. В href оставляйте только цифры и знак +, сохраняя привычное оформление видимого номера.
• Единый формат. Указывайте номер в международном формате E.164 (+7...). Такая запись корректно работает у посетителей из разных стран и считывается поисковыми системами.
• Мессенджеры. Вместе с tel: используют другие способы связи: ссылки на WhatsApp (https://wa.me/...) и Telegram (https://t.me/...), а также SMS (sms:...). На компьютере пользователь сможет выбрать доступный вариант.
• Доступность. Программы чтения с экрана распознают tel: как ссылку без дополнительных атрибутов, а для номера с добавочным кодом стоит прописать понятный aria-label.
• Аналитика. Клики по номеру можно отслеживать как события в Google Analytics и Яндекс Метрике. Полную картину звонков показывает отслеживание звонков.
• Тестирование. Перед публикацией проверьте ссылку на устройствах разных типов: iPhone, Android-смартфоне, компьютере и планшете. Сравните, как она работает на каждой платформе.

Что такое кликабельный номер телефона и зачем он нужен на сайте?

Кликабельный номер — интерактивная ссылка с протоколом tel:. После нажатия устройство открывает приложение для звонков с уже набранным номером. Посетителю не приходится запоминать или переписывать цифры.

Представьте пользователя, который листает сайт на смартфоне и замечает номер. Одного касания хватает для перехода к звонку. Ручной набор исключён, поэтому риск ошибки в цифрах ниже. Короткий путь повышает вероятность обращения.

Технология работает на мобильных устройствах и компьютерах. На компьютере ссылка tel: открывает установленные VoIP-приложения: Skype, WhatsApp, SIP-клиенты или FaceTime на macOS. Стандарт RFC 3966 описывает формат телефонных ссылок.

Кликабельный номер упрощает звонок:

• Скорость. Для перехода к звонку клиенту хватает одного нажатия.
• Удобство. Копировать номер или вводить его вручную не приходится.
• Меньше препятствий. Ссылка tel: сокращает путь от интереса к звонку, а лишние действия могут остановить часть аудитории.

Как правильно написать HTML-код для кликабельного номера телефона?

Чтобы номер телефона стал кликабельным, его оформляют как HTML-ссылку с протоколом tel::

<a href="tel:+79991111111">+7 (999) 111-11-11</a>

Здесь href="tel:+79991111111" содержит номер, который получит приложение для звонков после нажатия на ссылку. Сам пользователь увидит на странице привычную запись: +7 (999) 111-11-11.

В href номер указывают в международном формате E.164: знак +, код страны и цифры — без пробелов, скобок и дефисов. Для российского номера используется код +7:

• правильно: tel:+79991111111;
• неправильно: tel:+7 999 1111111;
• неправильно: tel:+7(999)1111111;
• неправильно: tel:+7-999-111-11-11;
• нежелательно: tel:89991111111.

При этом видимый номер можно оформлять как удобно пользователю: добавлять пробелы, скобки и дефисы. Например:

<a href="tel:+79991111111">+7 (999) 111-11-11</a>

Формат телефонных ссылок описан в RFC 3966. Для современных сайтов используют протокол tel:. Устаревшие варианты callto:, wtai: и fax: применять не стоит.

Перед публикацией проверьте ссылку на смартфоне: после нажатия должно открыться приложение для звонков с уже набранным номером +7 999 111-11-11.

Как добавить добавочный номер в ссылку tel:?

Добавочный номер можно указать прямо в телефонной ссылке. Один из вариантов — поставить после основного номера запятые, а затем добавить номер сотрудника или отдела:

<a href="tel:+74951234567,,101">+7 (495) 123-45-67, доб. 101</a>

При нажатии смартфон сначала набирает основной номер, а затем после паузы передаёт цифры добавочного. Если телефонной системе требуется больше времени для ответа, паузу можно увеличить, добавив несколько запятых:

tel:+74951234567,,,,101

Количество пауз лучше подбирать при тестировании: обработка таких ссылок зависит от устройства и приложения для звонков.

Если перед добавочным нужно выбрать пункт голосового меню, в ссылку можно последовательно указать нужные цифры и паузы. Например:

tel:+74951234567,,,1,,,101

Здесь сначала набирается основной номер, затем после паузы передаётся 1 для выбора пункта меню, а после следующей паузы — добавочный 101.

Стандарт RFC 3966 предусматривает другой способ записи добавочного номера — параметр ;ext=:

tel:+74951234567;ext=101

Однако в статье указано, что такой вариант поддерживают не все устройства. Автоматическая передача добавочного номера с помощью пауз также может работать по-разному, особенно на компьютерах и планшетах без SIM-карты.

Поэтому перед публикацией проверьте ссылку на реальных устройствах: основной номер должен набираться правильно, а добавочный — передаваться только после соединения.

Как сделать кликабельную ссылку на WhatsApp, Telegram или SMS?

Ссылки на мессенджеры используют отдельные схемы и URL, которые можно разместить рядом с tel: или вместо него. У каждого сервиса свой синтаксис и сценарий применения.

WhatsApp. Для WhatsApp используют шаблон https://wa.me/79001234567. Номер указывают без служебных символов: плюса, скобок и пробелов. Для готового сообщения добавляют параметр ?text=, например https://wa.me/79001234567?text=Здравствуйте. Текст лучше обработать через encodeURIComponent(), чтобы кириллица отображалась корректно.

Telegram. Для Telegram есть два варианта. Ссылка компании с публичным никнеймом выглядит как https://t.me/username. Чат по номеру открывают через адрес https://t.me/+79001234567, где телефон указан в международном формате. Протокол tg://resolve?domain=username тоже работает, однако ссылка с https:// подходит и для устройств без установленного приложения.

SMS. Ссылка sms:+79001234567?body=Текст открывает приложение «Сообщения» с заполненным текстом. Клиент может написать в удобное время и обойтись без разговора. Такой формат работает на iOS и Android.

Когда мессенджер удобнее tel:? На компьютере WhatsApp и Telegram открываются в веб-версии или приложении. Текстовый канал также подходит клиенту, которому нужно отправить скриншот ошибки или номер заказа.

Сравнение протоколов

Конфликт с JavaScript-виджетами. Некоторые чаты и виджеты обратного звонка перехватывают клики по tel: и ссылкам на мессенджеры, например Calltouch, Callibri и JivoSite.

Откройте сайт в режиме инкогнито и нажмите на ссылку WhatsApp или Telegram. Если открывается виджет, его скрипт перехватывает нажатие. Проблему устраняют в настройках виджета. Ещё один вариант — кнопка с прямым URL.

WhatsApp и Telegram подходят для компьютеров и текстовых обращений, поскольку tel: в таких случаях неудобен. Размещайте ссылки на них рядом с номером телефона.

Как добавить кликабельный номер телефона в конструкторе сайтов?

Во многих конструкторах, включая Tilda и Wix, HTML-код ссылки можно добавить вручную через блок «Код» или «HTML-вставка». Часто код не требуется. Платформы умеют превращать обычный текст в ссылку для звонка.

Настройте номер так:

1. Введите номер в текстовый блок.
2. Выделите его и нажмите на панели инструментов значок добавления ссылки.
3. В поле «Укажите ссылку» напишите tel: и сразу после двоеточия укажите номер в международном формате без пробелов и дефисов, например tel:+74951234567.
4. Сохраните изменения и опубликуйте страницу. При нажатии на номер с мобильного устройства откроется приложение для вызова.

В Tilda ссылка работает в любом текстовом блоке. Порядок такой: выделите номер, нажмите на значок ссылки в левом верхнем углу и вставьте tel:+7XXXXXXXXXX. Для кнопки добавьте стандартный блок Button и укажите тот же адрес tel: в поле «Ссылка для кнопки». При нестандартной вёрстке используйте Zero Block и разместите внутри HTML-элемент с кодом <a href="tel:+74951234567">Позвонить</a>.

В Wix после выделения номера нажмите «Добавить ссылку», затем выберите тип «Телефон». Платформа автоматически подставит префикс tel:. Если встроенный мастер не срабатывает, добавьте блок Embed HTML и вставьте код ссылки вручную. В Readymag для этой задачи используют Embed-блок, где HTML-ссылка отображается как обычный текст или кнопка.

Некоторые конструкторы запрещают редактировать HTML внутри стандартных блоков. Если инструмент не поддерживает поле для ссылки с префиксом tel: и блок для вставки кода, можно использовать JavaScript. Скрипт добавит ссылку после загрузки страницы, однако Googlebot может не обнаружить такой номер при сканировании. Перед публикацией проверьте отображение страницы через Google Search Console.

Адреса для мессенджеров: для WhatsApp — https://wa.me/79001234567, для Telegram — https://t.me/+79001234567. Такая ссылка ведёт в чат. Она работает на компьютере и мобильных устройствах.

В большинстве конструкторов достаточно вставить tel:+7... в поле ссылки. При отсутствии такой функции используйте HTML-блок или ссылку на мессенджер.

Как сделать телефонную ссылку доступной для программ чтения с экрана?

Пользователь программы чтения с экрана должен понимать, что ссылка ведёт к звонку, и слышать номер в понятной форме. Поэтому номер лучше показывать на странице полностью, например +7 (800) 555-12-12, а в самой ссылке использовать стандартный формат tel:.

Для обычного номера дополнительный атрибут aria-label, как правило, не требуется. Ссылка может выглядеть так:

<a href="tel:+78005551212">8 (800) 555-12-12</a>

Дополнительное текстовое описание может понадобиться в более сложных случаях:

• Добавочный номер. Если ссылка содержит основной и добавочный номера, в aria-label их можно явно разделить. Например:

  <a href="tel:+74951234567,,101" aria-label="+7 495 123-45-67, добавочный 101">
    +7 (495) 123-45-67, доб. 101
  </a>

• TTY и сервисные номера. Для номеров телетайпа и других нестандартных форматов может потребоваться пояснение, чтобы программа чтения с экрана правильно передала их назначение.
• Нестандартная запись номера. Если визуальное оформление мешает корректному озвучиванию, в aria-label можно отдельно указать номер в форме, удобной для чтения.

В руководстве VA.gov для таких случаев используется запись с точками между группами цифр. Например:

<a href="tel:+18005551212" aria-label="8. 0. 0. 5. 5. 5. 1. 2. 1. 2.">
  8 (800) 555-12-12
</a>

Точки создают паузы при озвучивании и помогают программе чтения с экрана произнести номер последовательно, а не воспринимать его как одно большое число.

Дополнительно можно использовать CSS-свойство speak-as: digits, которое указывает произносить содержимое по цифрам. Его поддержка нестабильна, поэтому полагаться только на это свойство не стоит.

Для обычного телефонного номера достаточно корректной ссылки tel: и понятного отображения номера на странице. aria-label имеет смысл добавлять там, где без него номер или его назначение могут быть озвучены неправильно.

Как телефонные ссылки работают на разных устройствах и браузерах?

Ссылка tel: открывает звонилку на смартфоне и VoIP-приложение на компьютере. Принцип работы общий, хотя каждая платформа обрабатывает переход по-своему.

В таблице собраны результаты тестов на актуальных версиях ОС и браузеров:

С добавочными номерами и паузами чаще возникают сбои. iOS обрабатывает конструкцию tel:+74951234567,101 без замечаний. Смартфон выполняет три действия: набирает основной номер, выдерживает секундную паузу и отправляет DTMF-тон добавочного.

Android поддерживает тот же синтаксис, однако часть прошивок игнорирует запятую и завершает набор на основном номере. Приложения для компьютеров чаще всего не распознают добавочные.

Всегда оформляйте номер как ссылку tel: и сохраняйте её в версии для компьютеров сайта. Пользователи звонят с ноутбуков через мессенджеры и корпоративную телефонию. Нерабочая ссылка отсекает этот поток обращений.

Проблема с меню на iPhone

Если tel: находится внутри выпадающего меню на основе маркированного списка, одиночное нажатие может не сработать. Пользователю приходится делать долгое нажатие. Вне меню проблема не воспроизводится. Вынесите номер из выпадающего списка либо продублируйте его в статичном блоке.

На мобильных устройствах tel: работает стабильно. На компьютерах ссылку обрабатывают VoIP-приложения. Добавочные номера и паузы тестируйте отдельно на реальных устройствах.

Как отслеживать клики по телефонной ссылке?

Нажатия на номер можно фиксировать в системах аналитики. Для этого к телефонной ссылке добавляют обработчик onclick, который при нажатии отправляет событие в Google Analytics или Яндекс Метрику.

Например, ссылка с отслеживанием события может выглядеть так:

<a href="tel:+74951234567"
   onclick="gtag('event', 'phone_click'); ym(XXXXXX, 'reachGoal', 'phone_click');">
  +7 (495) 123-45-67
</a>

Здесь tel:+74951234567 отвечает за звонок, а onclick — за передачу информации о нажатии в систему аналитики. Вместо XXXXXX указывают идентификатор счётчика Яндекс Метрики.

Такой способ учитывает именно нажатия на ссылку, а не состоявшиеся звонки. Если посетитель скопирует номер +7 (495) 123-45-67 и наберёт его вручную, событие не отправится. Аналитика также не покажет, состоялся ли звонок после нажатия.

Для учёта самих звонков используют специальные системы отслеживания. Например, Calltouch или Callibri могут подменять номер в зависимости от источника перехода и связывать звонок с конкретным визитом на сайт.

Перед настройкой аналитики проверьте, не перехватывает ли нажатие JavaScript-виджет обратного звонка. Возможна ситуация, когда событие попадёт в аналитику, но приложение для звонков у пользователя не откроется. Поэтому после настройки стоит сделать тестовый звонок с реального устройства.

Для оценки количества нажатий на номер достаточно события onclick. Если нужно анализировать состоявшиеся звонки и источники обращений, потребуется отдельная система отслеживания звонков.

Безопасно ли использовать телефонные ссылки на сайте?

Телефонные ссылки безопасны. Только после клика пользователя браузер передаёт номер операционной системе, и дальнейшее действие проходит через системный интерфейс. Самостоятельно совершить вызов сайт не может. Звонок пользователь подтверждает в приложении или системном диалоге.

После клика система ищет на устройстве приложение для звонков. На смартфоне открывается стандартная звонилка с уже набранным номером. Компьютер может предложить доступные программы: Skype, FaceTime, корпоративный SIP-клиент или мессенджер. Если подходящего приложения нет, вызов не состоится.

Не пытайтесь обходить системное подтверждение с помощью скриптов. Такое поведение нарушает политику безопасности браузеров и подрывает доверие пользователя. Страница также может попасть под блокировку.

Ссылка tel: лишь передаёт номер системному приложению. Звонок запускает пользователь через системный интерфейс.

Как проверить, что телефонная ссылка работает правильно?

Проверяйте ссылку tel: на реальных устройствах. Ошибка в разметке или конфликт с виджетом могут лишить посетителя возможности позвонить, хотя визуально номер выглядит корректно.

Ниже приведён контрольный список из семи пунктов. Пройдите его перед публикацией.

1. Проверьте href. В атрибуте должны быть только цифры и знак + в начале. Уберите лишние символы: пробелы, скобки и дефисы. Корректный вариант выглядит так: tel:+74951234567. Запись tel:+7 (495) 123-45-67 будет ошибочной.
2. Сверьте видимый текст. Внутри тега <a> номер можно оформить с помощью следующих символов: пробелов, скобок или дефисов. При этом он должен совпадать с номером в href.
3. Откройте страницу на мобильных устройствах. Проверьте ссылку на iPhone в Safari и на Android-смартфоне в Chrome. После нажатия должен открыться номеронабиратель с уже подставленным номером.
4. Проведите тест на компьютере. На компьютере нажмите на ссылку. Должно запуститься одно из настроенных приложений для звонков: FaceTime на macOS, «Ваш телефон» на Windows или мессенджер.
5. Отдельно протестируйте планшет. На iPad без SIM-карты ссылка tel: открывает FaceTime. При отсутствии приложения для звонков система покажет ошибку. Убедитесь, что в вашем сценарии она не появляется.
6. Добавочные номера и паузы. Если используется конструкция tel:+74951234567,,101, нажмите на ссылку. После соединения с основным номером смартфон должен передать DTMF-тоны добавочного.
7. Проверка индексации. В Google Search Console вставьте URL страницы в инструмент проверки. Откройте отрендеренный HTML и найдите ссылку tel: в коде. Она должна присутствовать в HTML без дополнительной загрузки через JavaScript.

Проблема с меню на iPhone. Для ссылки tel: внутри выпадающего меню на iPhone может потребоваться долгое нажатие. Короткое нажатие в таком сценарии порой не срабатывает. Проверьте меню отдельно. При необходимости вынесите номер за пределы выпадающего блока.

Убедитесь, что JavaScript-виджеты не перехватывают клики. Временно отключите чаты и формы обратного звонка, затем нажмите на номер. Если после отключения звонок проходит, проверьте настройки виджета и разрешите обычные переходы по ссылкам tel:.

Тестируйте ссылку после изменений на странице: в меню, виджетах и разметке. Добавочные номера требуют отдельной проверки после соединения.

Первые шаги: с чего начать внедрение телефонных ссылок на сайте?

Внедряйте ссылки tel: поэтапно:

1. Аудит. Соберите все места, где встречается номер телефона: шапку, нижнюю часть сайта, страницу контактов, карточки товаров и всплывающие окна. Зафиксируйте текущее написание каждого номера. Например, в шапке может стоять +7 (495) 123-45-67. В нижней части сайта тот же номер иногда указан как 8-495-123-45-67, что усложняет проверку данных и может запутать пользователя.
2. Внедрение. Замените текстовые номера ссылками с href в формате E.164. В адресе оставьте знак + в начале и цифры, например tel:+74951234567. Если браузер ошибочно распознаёт цены или даты как телефоны, отключите автоопределение с помощью метатега <meta name="format-detection" content="telephone=no">.
3. Мессенджеры. Разместите рядом с телефоном ссылки на WhatsApp и Telegram, если посетители используют эти сервисы. Для WhatsApp подойдёт шаблон https://wa.me/74951234567, для Telegram — https://t.me/username. На компьютере tel: иногда не запускает приложение для звонков. В такой ситуации мессенджеры дают альтернативный способ связи.
4. Доступность. Проверьте, как номер озвучивается программой чтения с экрана. Программа чтения с экрана должна распознать ссылку tel: и обозначить её как телефонную. Для номера с добавочным прослушайте объявление целиком. Если цифры звучат неразборчиво, добавьте aria-label с паузами между группами, например 8 0 0. 5 5 5. 1 2 1 2.
5. Аналитика. Настройте отслеживание кликов по ссылкам tel: через Google Analytics или Яндекс Метрику. Событие покажет количество нажатий по номеру. Для подсчёта состоявшихся звонков потребуется отслеживание звонков, поскольку часть пользователей закрывает экран до начала вызова. При большом числе кликов и малом количестве звонков проверьте JavaScript-виджет обратного звонка, который может перехватывать обычные переходы.
6. Тестирование. Проверьте ссылки на реальных устройствах: iPhone с iOS 18, Android с Chrome, в Chrome для компьютеров и Safari, на планшете без SIM-карты. На iPad ссылка может открыть FaceTime. Android-планшет предложит совместимое приложение. Такое поведение считается штатным.

Коротко о главном

• Базовая ссылка. Используйте код <a href="tel:+74951234567">+7 (495) 123-45-67</a>. В href оставляйте знак + и цифры, а на странице оформляйте номер в любом формате.
• Добавочные номера. Для пауз ставьте запятые: tel:+74951234567,,101. Этот способ надёжнее параметра ;ext=, хотя ссылку стоит проверить на реальных устройствах.
• Мессенджеры. Для них нужны отдельные ссылки: WhatsApp — https://wa.me/..., Telegram — https://t.me/..., SMS — sms:.... Они дополняют tel: и подходят для версии для компьютеров сайта.
• Доступность. Для обычного номера можно обойтись без aria-label. У добавочных номеров и TTY этот атрибут нужен, хотя программы чтения с экрана корректно озвучивают ссылки tel: и без него.
• SEO. Приведите все href к формату E.164. Добавьте микроразметку LocalBusiness и отключите автоопределение через format-detection.
• Аналитика. Событие onclick показывает нижнюю границу числа кликов. Для точных данных используйте отслеживание звонков и проверьте, не блокируют ли виджеты обычные переходы.
• Тестирование. Перед публикацией проверьте ссылки на реальных устройствах: iPhone, Android-смартфоне, компьютере и планшете.