Сьогоднішній стан телефонних посилань

24

Від автора: в інтернеті є така річ, як телефонні посилання. Вони схожі на звичайні посилання, при натисканні на які відкриваються веб-сторінки, однак по кліку на телефонну посилання відбувається набір на пристрої, з якого можна здійснювати телефонні дзвінки. Дуже довго вони крутилися навколо нас, але досі я гублюся при їх вигляді. Приміром, багато пристрою автоматично розпізнають номери і роблять з них посилання. Проте так відбувається не завжди.

Частка трафіку на мобільних пристроях досить висока, так і додатків, здатних здійснювати телефонні дзвінки, на настільних комп’ютерах достатньо, тому нам варто трохи краще познайомитися з тим, що таке телефонні посилання.

Використання за замовчуванням

На сайті CSS-Tricks з 2011 року існує телефонна посилання:

1-562-867-5309

Текстова посилання також працює:

Click to Call!

tel: — не стільки функція, як протокол, майже так само як http: і mailto: протоколи для посилання . У специфікації з цього приводу нічого не сказано, хоча підтримує HTML5 обробники користувальницьких протоколів, що і дозволяє їх використовувати.

Вам, можливо, цікаво, чому tel: вважається значенням за замовчуванням, коли про нього в специфікації нічого не сказано. Даний стандарт був запропонований ще в далекому 2000 році, а пізніше він був прийнятий iOS, що де-факто забезпечило йому життєздатність 2007. Існують і інші телефонні протоколи (про них ми поговоримо пізніше), однак, враховуючи відносну популярність tel: зараз ми зосередимося саме на ньому.

Підтримка в браузерах

Ми знаємо, що tel: є обробником протоколу телефонних посилань без документації; а де немає документації, там є відмінності в поведінці в браузерах. Це не означає, що тег просто не буде розпізнаватися браузерами, вони можуть приймати різні рішення при натисканні на таке посилання. Наприклад, браузер може припустити, що потрібно запустити інший додаток і откроект віконце з вибором програми. Або ж посилання може просто не працювати.

Сьогоднішній стан телефонних посилань

Стилізація телефонних посилань

До телефонних посиланнями стилі додаються точно так само, як і до будь-яким іншим посиланням. А насправді ж стилі успадковуються від звичайних посилань:

a {
color: orange;
text-decoration: none;
}

Скажімо, ми хочемо стилізувати тільки телефонні посилання. Це можна зробити з допомогою псевдоселектора, який шукає текст «tel:» в URL:

a[href^=»tel:»] {
color: orange;
text-decoration: none;
}

На сайті Tuts+ є непоганий трюк з використанням псевдокласу ::before, який додає unicode символ телефону зліва від номера:

a[href^=»tel:»]:before {
content: «\260e»;
margin-right: 0.5 em;
}

Інші телефонні посилання

Вірите чи ні, але tel: не єдиний спосіб запустити телефонний дзвінок за допомогою посилання. Ми можемо користуватися й іншими користувацькими обробниками телефонних протоколів.

Callto: те ж саме, що tel:, але використовується для дзвінка через Skype.

auto-detected: Безліч браузерів автоматично розпізнають телефонні номери в розмітці HTML і створюють посилання – не потрібно вносити зміни до розмітку. У iOS повністю підтримується автоматичне розпізнавання, хоча в Chrome для Android цього немає.

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

Fax: «Назад у майбутнє» з факсом. Не зовсім надійний.

Кращі практики

Забавно говорити про кращих практиках, коли про предмет розмови нічого не сказано в специфікації. У специфікації дійсно є коротке пояснення ідеї «click to call», але при роботі з телефонними номерами і посиланнями необхідно пам’ятати про декілька речей.

Враховуйте контекст

Телефонна посилання може бути відмінним «закликом до дії», особливо на мобільних пристроях, де мінімізована кількість дій між контентом і здійсненням виклику. Але в той же час на настільних комп’ютерах такі посилання тільки заважають, оскільки ви не зможете зробити дзвінок, якщо у вас не встановлено спеціальний додаток.

Один з виходів це створити спеціальний клас для телефонних посилань і намагатися ховати і показувати їх в залежності від браузера. Тут нам допоможе бібліотека Modernizr і медіа запити, хоча стовідсоткова точність не гарантована.

Використовуйте код країни

Код країни не обов’язковий, але він може бути вкрай корисний для сайтів з міжнародним трафіком. До коду країни можна додати знак +, але він теж не обов’язковий.

1-562-867-5309

SEO

SEO експерти могли би більше сказати по цій темі, ніж я, але у Google є спеціальний структурований формат даних для місцевого бізнесу, використовуючи який можна зробити посилання більш впізнаваними для пошукових роботів, що в свою чергу змінить форматування цих посилань на сторінках пошукової видачі і зробить їх більш функціональними. Dudley Storey зробив відмінний огляд з цим прикладом:

Beach Bunny Swimwear

Phone:

850-648-4200

Сьогоднішній стан телефонних посилань

З іншого боку можна додати rel=»nofollow», щоб посилання не індексувалися пошуковим движком. Так як роботи схильні до індексації всіх посилань, навіть тих, які нікуди не ведуть, це буде дуже корисна опція.

1-562-867-5309

Як вимкнути виявлення номери у iOS

Якщо ви хочете додати телефонні посилання в розмітку, ви, можливо, захочете знати, як відключити автовизначення телефонних номерів в iOS, щоб ця функція не переписувала стилі. Для відключення цієї функції, додайте код нижче в тег head: