Телефонные ссылки
Роман Маркелов
Ведущий front-end разработчик
Задать вопрос
На сайтах уже длительное время используются телефонные ссылки – ссылки, вызывающие номер телефона, если устройство поддерживает такую возможность. Тем не менее, они до сих пор вызывают путаницу, например, устройство автоматически распознает телефонные номера и создает ссылки, но это срабатывает не каждый раз.
На сегодняшний день на мобильных устройствах и десктопах есть достаточное количество трафика для звонков, поэтому о телефонных ссылках нужно знать как можно больше и активно их использовать.
Раскройте все тонкости по использованию ссылок с телефонным протоколом с нашей помощью.
Использование по умолчанию
У нас есть сниппет для телефонных ссылок который был опубликован на css-tricks.com в 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>
Он также работает и для текстовой ссылки:
<a href="tel:1-562-867-5309">Нажмите для вызова!</a>
tel: это не столько функция, сколько протокол, как и http: и mailto: — протоколы для свойств тега <a>.
В спецификации об этом ничего не сказано, хотя HTML5 обеспечивает поддержку пользовательских обработчиков протоколов, если такой протокол допускается для использования устройством.
Протокол tel: используется по умолчанию, при том, что его официальная спецификация отсутствует. Он был предложен в стандартизацию еще в 2000 году и позже принят IOS, что делает его де-факто стандартизированным примерно в 2007. Есть и другие телефонные протоколы (которые рассмотрим чуть позже), но мы будем концентрироваться на
Поддержка браузеров
Из-за того, что у tel:, как у обработчика ссылок, нет официальной спецификации, то и все браузеры ведут себя с ним по-разному. Например, один браузер решит, что необходимо открыть приложение и вызовет диалоговое окно с запросом, какие приложения использовать. В других случаях tel: может быть проигнорирован вовсе.
|
Браузер |
Ссылка ли это? |
При нажатии на эту ссылку. |
|---|---|---|
|
Android |
да |
Запускает приложение телефона |
|
BlackBerry 9900 |
да |
Инициирует телефонный звонок |
|
Chrome |
да |
Вызывается диалоговое окно, подтверждающие использование другого приложения |
|
Edge |
да |
Вызывается диалоговое окно, подтверждающие использование другого приложения |
|
Internet Explorer 11 |
да |
Вызывается диалоговое окно, подтверждающие использование другого приложения |
|
Internet Explorer 11 Mobile |
да |
Инициирует телефонный звонок |
|
iOS |
да |
Вызываются параметры для вызова, сообщение, скопировать или добавить номер в приложение Контакты |
|
Opera (OSX) |
да |
Вызывается диалоговое окно, подтверждающие использование другого приложения |
|
Opera (Windows) |
да |
Вызывается диалоговое окно с сообщением об ошибке, которая не признает протокол |
|
Safari |
да |
Запуск FaceTime |
Стилизация телефонных ссылок
Стилизация телефонных номеров такая же, как и любых других ссылок.
Альтернатива телефонным ссылкам
tel: это не единственный способ инициировать телефонный звонок с помощью ссылки. Существует несколько других обработчиков на основе протокола телефона:
- callto: точно такой же как
tel:, но используется для инициирования вызовов через приложение Skype. - auto-detected: многие браузеры автоматически определяют телефонный номер в формате HTML и создают телефонную ссылку, поэтому нет необходимости менять стили ссылки. Например, iOS создаст такую ссылку, но результат будет заметно отличаться от Chrome на Android.
- fax: возвращайтесь в будущее с факсами. Опять же, реализовано не во всех браузерах и не надежно.
Рассмотрим контекст
Телефонная ссылка может выступать как отличный призыв к действию, особенно на мобильных телефонах. Но в то же время, на десктопе телефонная ссылка может рассматриваться как препятствие, где телефонный звонок невозможен, если не установлена специальная программа.
Одна из идей – создать отдельный класс для телефонных ссылок и показывать её или скрывать в зависимости от того, какой браузер используется. Modernizr и медиа-запросы в таком случае весьма удобны, но пока еще неточны.
Использование кодов стран
Код страны не обязателен, но может быть полезен для сайтов с международным трафиком. Коду страны может предшествовать +, но это тоже необязательно.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>
Поисковая оптимизация
SEO-специалисты могли бы добавить больше по оптимизации телефонной ссылки чем я. Впрочем, Google предлагает структурированный формат данных для местных предприятий и его использование сделает телефонную ссылку более узнаваемой для поисковых роботов, форматируя их на страницах так, что номер становится более действенным.
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h2 itemprop="name">Beach Bunny Swimwear</h2>
Phone:
<span itemprop="telephone">
<a href="tel:+18506484200">
850-648-4200
</a>
</span>
</div>
С другой стороны, если нужно, чтобы поисковые системы не следовали за телефонными ссылками, вы можете добавить rel="nofollow", тем самым препятствуя их индексации. Для ссылки, которая не обозначена как призыв к действию — это хорошая идея, так как веб-сканеры не попытаются пройти по ссылке «в никуда».
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>
Отключение обнаружения номера в IOS
Если вы планируете добавить телефонные ссылки в верстку сайта, то можете рассмотреть возможность отключить авто определение телефонных номеров в IOS.
<meta name="format-detection" content="telephone=no">
Дальнейшее чтение
- Быстрый Совет: Сделать что-нибудь с телефонными номерами Tuts +
- Добавление телефонных номеров на веб-страницу с HTML5 и микроданными Dudley Storey
- Оригинальный проект предложения 2806, который был устаревшим Предложение 3966
- Apple, URL Схемы Справка
Оригинальная статья: The Current State of Telephone Links
Ставим правильные ссылки на телефонные номера — WordPressify
2 Ссылки
Многие бизнес-сайты показывают телефонные номера, чтобы их клиенты могли связаться с ними. В эпоху популярности настольных компьютеров пользователи записывали телефонный номер на бумажку и звонили с отдельного устройства.
-
1.
Как работают кликабельные ссылки-
1.1.
Добавление на сайт -
1.2.
Добавочный номер -
1.3.
Код страны -
1.4.
Микроразметка под SEO
-
-
Ссылки
Сейчас же, пользователи сёрфят в интернете и звонят с одного и того же устройства. Это открывает возможность добавить ссылку на звонок — создать HTML-номер телефона, по которому можно кликать.
Как работают кликабельные ссылки
Сделать номер телефона кликабельным легко с помощью HTML5, который включает в себя специализированный протокол tel:.
Браузеры по-разному интерпретируют этот протокол. Некоторые открывают номернабиратель вашего телефона и добавляют номер на дисплей, ожидая, пока вы нажмете кнопку вызова. Другие сразу делают звонок, а третьи спрашивают что делать.
При клике по такой ссылке на десктопе с установленным приложением Skype (или аналогичным) браузер запросит у вас подтверждение на открытие внешней программы.
Добавление на сайт
Вставьте следующий код в нужное место вашего сайта для показа кликабельной ссылки на телефон:
<a href="tel:123-456-7890">123-456-7890</a>
Если вместо телефона вы хотите видеть ссылку с текстом «Позвонить», то код будет таким:
<a href="tel:123-456-7890">Позвонить</a>
При щелчке на такую ссылку откроется номернабиратель вашего устройства (планшет, телефон).
Добавочный номер
Многие телефоны имеют добавочные номера, чтобы их указать, необходимо использовать разделитель
<a href="tel:123-456-7890p123">Позвонить</a>
Если добавочный номер нужно вводить в тональном режиме, используйте разделитель w вместо p.
Код страны
Коды стран могут быть добавлены в телефонный номер при помощи символа + перед самим номером.
Например, для России (+7) это будет выглядеть так:
<a href="tel:+7-456-7890">123-456-7890</a>
Микроразметка под SEO
Одна из самых приятных плюшек, когда при поиске местных компаний Google в результатах поиска выдает номер телефона, по которому можно кликнуть.
Решается этот вопрос при помощи микроданных и микроформатов. Добавив пару дополнительных тегов в разметку вашего сайта, вы получите кликабельный номер в SERP. Пользователи будут несказанно рады:
<div itemscope itemtype="https://schema.org/LocalBusiness">
<h2 itemprop="name">Рога и Копыта</h2>
Телефон: <span itemprop="telephone"><a href="tel:+7123456890">+7 (234) 567-890</a></span>
</div>
Ссылки
- Telephone Links: How to Add “Call-able” Links & CTA’s to Your Website
«Всё будет WordPress»
Источник: https://www.kobzarev.com/programming/call-link-html-phone-number/
Понравилось это:
Нравится Загрузка.
..
Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.
новый код – Добавление телефонных номеров на веб-страницы с помощью HTML5 и микроданных
Традиционно телефонные номера размещались на веб-страницах в виде простой последовательности цифр, неотличимой от любого другого содержимого. Когда мобильные пользователи посещают сайты, они ожидают, что номера телефонов будут полезны, что приведет к прямому контакту.
Мы достигаем этого двумя способами: добавляем ссылку с протоколом tel и вставляем микроданные.
Есть также несколько соображений, которые мы должны сделать для настольных приложений, особенно для Skype и Internet Explorer.
Связывание телефонных номеров для мобильных устройств и телефонных приложений
Подобно добавлению ссылки mailto: вокруг адресов электронной почты на странице, телефонные номера связываются с помощью протокола tel :
Чтобы сделать заказ, позвоните по 317-456-2564
iPhone, Android и другие мобильные устройства теперь распознают номер телефона; переход по ссылке инициирует телефонный звонок.
Есть несколько вещей, о которых следует знать:
- Помните, что все веб-страницы являются международными; цифры, перечисленные после
tel, должны включать префикс международного набора, чтобы номер можно было использовать из любого места. - Если страница просматривается в настольном браузере, щелчок по номеру вызовет соответствующее приложение телефонии, такое как Skype, Google Voice или Microsoft Communicator, точно так же, как использование протокола
mailto:в ссылке вызовет приложение электронной почты. - Визуальные разделители не являются обязательными в спецификации, за исключением 9Символ 0005 + перед международным телефонным кодом.
Не путайте значение тел с тем, как набирается номер на телефоне: в большинстве телефонных систем перед международным кодом при наборе номера требуется 00 , но это не включено в значение тел . Например, чтобы указать номер телефона в Новой Зеландии:
Позвоните по телефону 445-2663 в Окленде, чтобы забронировать рейс.
В телефонный номер можно вставлять паузы для добавления добавочного номера:
Позвоните в службу поддержки по телефону 323-579-8328 доб. 22
( p определяет односекундную паузу; w означает «ожидание гудка»)
Точно таким же образом можно указать номера факсов, используя протокол факс: .
Добавление микроданных
Возможно, вы захотите обогатить свою разметку, добавив микроданные, что позволит поисковым системам лучше понять тот факт, что цифры на странице на самом деле являются номером телефона:
org/LocalBusiness">
Купальные костюмы Beach Bunny
Телефон: 850-648-4200
tel.attrs.placeholder»>
ⓘ
заполнитель = строка NEW
#