Многие современные мобильные устройства достаточно хорошо распознают номера телефона в вашем HTML коде, делая его интерактивным, чтобы вы смогли напрямую позвонить по этому номеру — но это не всегда срабатывает!
Демо:

Что произойдет, если мобильный браузер или устройство не признает номер телефона, и не сделает звонок при клике на него? Возможно, номер был указан в неправильном формате или номер не распознается данной платформой, но в любом случае  — это Упущенная возможность. TEL: протокол позволит вам это исправить!

Сделайте номер телефона интерактивным

Это очень просто: поместите ваш номер телефона в якорь(тэг), но вместо HTTP-протокола * (или то, что вы обычно используете в якоре) используйте tel протокол. Таким образом, даже если вы использовали неузнаваемый шаблон, устройство всё равно будет знать, что ему надо делать:

Заказ на дом, звоните по телефону: 0953174562564

Теперь Айфоны, Андроиды и другие мобильные девайсы будут с легкостью распознавать номер и при нажатии на ссылку — предложат набрать этот номер. Но необходимо помнить следующие вещи:

• Нужно помнить, что для поддержки международных номеров нужно добавлять международный код(префикс), таким образом люди смогут позвонить из любой точки планеты.
• Если кликнуть по телефонной «ссылке» в браузере на настольном компьютере, то это приведет к вызову приложения, ассоциированного с телефоном — Google Voice или Microsoft Communicator, например.
• Можно указать номер факса, используя fax: протокол
• Есть воможность дозвона с паузой, к примеру при наборе экстеншена

Служба Поддержки:  323-579-8328 ext. 22

Skype

На данный момент скайп использует протокол callto, а не tel. Вообще-то можно это просто проигнорировать и использовать протокол tel везде, но если вы хотите точно укзать в коде, чтобы использовался скайп с браузера настольного компьютера и стандартное приложение из мобильного девайса, то в этом случае нам поможет PHP и скрипт определения мобильной платформы — Mobile Detect:

Позвонить на номер 579-827-0034

Немного мобильного SEO

Чтобы поисковики еще лучше понимали и индексировали ваш номер телефона, можно добавить немного microdata.

Стилизация телефонных ссылок

В качестве дополнения, давайте придадим нашему телефону более привлекательный вид при помощи CSS. Для этого мы будем использовать селектор, ориентируясь только на :before псевдо элемент ссылки, который содержит строку tel: в пределах их href атрибута:

a[href^="tel:"]:before {content: "\260E";
margin-right: 0.5em;
font-size:32px;
}

Этот маленький значок «^» означает то, что он ищет любые элементы, чьи href атрибуты начинаются со строки tel: . Также мы разместили здесь маленький Unicode телефон иконку  \ 260E; , так что нам даже не нужно использовать WebFont значки или дополнительные картинки.