Зачем настраивать click-to-call для телефонов
Click-to-call - это ссылка с протоколом tel:, которая позволяет мобильному пользователю позвонить одним нажатием. Без click-to-call пользователь видит номер телефона как обычный текст, вынужден запоминать его, переключаться в приложение для звонков, набирать вручную. В реальности никто этого не делает - пользователь просто уходит на сайт конкурента, где позвонить можно одним тапом.
Для коммерческих сайтов с мобильным трафиком 60-70% click-to-call - это прямой конверсионный элемент. По моему опыту, после внедрения click-to-call на сайте стоматологии количество звонков с мобильных выросло на 40%. Это не SEO-фактор напрямую, но влияет на конверсию, а конверсия - конечная цель всей оптимизации.
Для Яндекса click-to-call также имеет значение: наличие кликабельного телефона - один из коммерческих факторов ранжирования, влияющих на оценку качества сайта.
Пошаговая инструкция
Шаг 1. Добавьте ссылку tel: на номер телефона
Базовая реализация - оберните номер телефона в ссылку с протоколом tel::
<a href="tel:+74951234567">+7 (495) 123-45-67</a>Правила формата:
- В href - номер без пробелов, скобок и тире:
tel:+74951234567. Международный формат с +7. - В тексте ссылки - номер в привычном для пользователя формате: +7 (495) 123-45-67 или +7-495-123-45-67.
- Не используйте 8 в href.
tel:84951234567может некорректно обрабатываться на устройствах вне России. Всегда +7.
Если у компании несколько номеров - каждый делайте кликабельным. Если номер городской и мобильный - оба:
<a href="tel:+74951234567">+7 (495) 123-45-67</a> (городской)
<a href="tel:+79161234567">+7 (916) 123-45-67</a> (мобильный)Шаг 2. Разместите click-to-call в ключевых точках
Телефон с click-to-call должен быть доступен с любой страницы и в ключевых точках принятия решения:
- Шапка сайта (header). Телефон в шапке - стандарт для коммерческих сайтов. На мобильных иконка телефона или кнопка «Позвонить» рядом с бургер-меню.
- Мобильное меню. Внутри выдвижной панели меню - номер с click-to-call. Пользователь открыл меню, увидел телефон, нажал.
- Футер. Контактная информация в подвале - обязательно с click-to-call.
- Страницы услуг. В блоке CTA на странице услуги: «Звоните: +7 (495) 123-45-67». Кликабельно.
- Страница контактов. Очевидное место - но удивительно часто телефон на странице контактов не кликабелен.
Шаг 3. Стилизуйте для мобильных
На десктопе click-to-call не нужен - пользователь не будет звонить с компьютера. Есть два подхода:
Подход 1: кликабелен везде. На десктопе ссылка tel: всё равно работает - откроет Skype, FaceTime или другое приложение. Если это допустимо - оставляйте ссылку на всех устройствах. Простой подход.
Подход 2: кликабелен только на мобильных. На десктопе телефон отображается как обычный текст, на мобильных - как ссылка:
<!-- HTML -->
<span class="phone-desktop">+7 (495) 123-45-67</span>
<a class="phone-mobile" href="tel:+74951234567">+7 (495) 123-45-67</a>
<!-- CSS -->
<style>
.phone-mobile { display: none; }
@media (max-width: 768px) {
.phone-desktop { display: none; }
.phone-mobile { display: inline; }
}
</style>Для кнопки звонка в шапке на мобильных - используйте иконку телефона с достаточным touch target:
<a href="tel:+74951234567" class="header-call-btn"
aria-label="Позвонить: +7 495 123-45-67">
<svg>...иконка телефона...</svg>
</a>
<style>
.header-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #0066cc;
color: #fff;
}
@media (min-width: 769px) {
.header-call-btn { display: none; }
}
</style>Шаг 4. Добавьте Schema telephone
В LocalBusiness или Organization Schema укажите телефон в международном формате:
"telephone": "+7-495-123-45-67"Это помогает поисковой системе корректно отображать телефон в карточке организации, в расширенных сниппетах и в результатах на картах. Телефон в Schema должен совпадать с телефоном на сайте.
Шаг 5. Настройте отслеживание звонков в Яндекс Метрике
Клик по ссылке tel: - это конверсионное действие. Отслеживайте его как цель в Яндекс Метрике:
Через JavaScript-событие:
document.querySelectorAll('a[href^="tel:"]').forEach(function(el) {
el.addEventListener('click', function() {
// Яндекс Метрика
if (typeof ym !== 'undefined') {
ym(XXXXXX, 'reachGoal', 'phone_click');
}
});
});Затем в Яндекс Метрике создайте цель: Настройки → Цели → Добавить цель → JavaScript-событие → Идентификатор: phone_click.
Теперь вы видите: сколько пользователей кликают по телефону, с каких страниц, с каких устройств. Это ценные данные для оптимизации.
Шаг 6. Добавьте плавающую кнопку звонка (опционально)
Для сайтов с высокой долей мобильного трафика и звонков как основного канала обращений - рассмотрите фиксированную кнопку звонка в нижней части экрана:
<a href="tel:+74951234567" class="floating-call"
aria-label="Позвонить">
<svg>...иконка телефона...</svg>
</a>
<style>
.floating-call {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #28a745;
color: #fff;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 1000;
}
@media (max-width: 768px) {
.floating-call { display: flex; }
}
</style>Не злоупотребляйте: если на экране одновременно плавающий чат, плавающий callback-виджет и плавающая кнопка звонка - это перебор. Оставьте один основной CTA.
Шаг 7. Проверьте работоспособность
Протестируйте click-to-call на реальных устройствах:
- Android - нажатие открывает приложение «Телефон» с набранным номером.
- iPhone - нажатие показывает диалог «Позвонить +7…» → «Вызов» / «Отмена».
- Проверьте, что номер набирается корректно - с кодом страны, без лишних символов.
- Если номеров несколько - каждый проверьте отдельно.
Типичные ошибки
- Телефон как обычный текст на мобильных. Номер виден, но не кликабелен. Пользователь не может позвонить одним тапом. Это самая частая ошибка - особенно на сайтах, где телефон выводится через шорткод или виджет, не оборачивающий его в ссылку
tel:. - Номер в href начинается с 8.
tel:84951234567- может не работать на устройствах с иностранными настройками. Всегда используйте международный формат:tel:+74951234567. - Пробелы и скобки в href.
tel:+7 (495) 123-45-67- некоторые устройства не распознают такой формат. В href только цифры и +:tel:+74951234567. - Отсутствие отслеживания. Click-to-call есть, но клики не отслеживаются. Вы не знаете, сколько звонков генерирует сайт. Настройте цель в Яндекс Метрике.
- Маленькая кнопка звонка. Иконка телефона 24x24px - пользователь промахивается. Минимум 48x48px для touch target.
- Click-to-call скрыт на мобильных. На десктопе телефон в шапке есть, а в мобильной версии - нет (скрыт через
display: none). Мобильный пользователь - основной источник звонков. Телефон должен быть доступен. - Несовпадение телефона в Schema и на сайте. В LocalBusiness Schema один номер, на сайте - другой. Это нарушение NAP-консистентности.
Что проверить в итоге
- Все номера телефонов на сайте обёрнуты в ссылку
tel:с номером в международном формате. - В href номер без пробелов, скобок и тире - только +7 и цифры.
- Click-to-call размещён в шапке, меню, футере, на страницах услуг и контактов.
- На мобильных телефон доступен - не скрыт CSS-правилами.
- Touch target кнопки/ссылки звонка не менее 48x48px.
- Добавлен aria-label для иконок звонка без видимого текста.
- Телефон в Schema (telephone) совпадает с телефоном на сайте.
- Клики по tel:-ссылкам отслеживаются как цель в Яндекс Метрике.
- Click-to-call протестирован на реальных устройствах (Android, iPhone) - номер набирается корректно.
- Нет перегрузки плавающими элементами - один основной CTA, не три.
