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

28

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

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

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

На сайті 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: