Link telefoniczny w HTML: klikalny numer i meta format-detection

Numer telefonu na stronie stawia dwa przeciwstawne pytania. Pierwsze: jak zrobić go klikalnym, żeby odwiedzający na telefonie zadzwonił jednym gestem? Drugie: jak powstrzymać niektóre przeglądarki przed samodzielną zamianą go w link, ze stylem, nad którym nie masz kontroli? Odpowiedzią na pierwsze jest link tel:, na drugie znacznik meta format-detection, pierwotny temat tego artykułu. Poniżej oba, w kolejności, w jakiej się ich potrzebuje.

Tworzenie klikalnego linku telefonicznego

Schemat URL tel:, opisany w RFC 3966, mówi przeglądarce, że kliknięcie ma wybrać numer. Na smartfonie otwiera się aplikacja Telefon z wpisanym numerem; na komputerze system proponuje aplikację do połączeń, jeśli jakąś ma (FaceTime, Teams, Skype), a jeśli nie ma, nie dzieje się nic.

<a href="tel:+33612345678">06 12 34 56 78</a>

Trzy zasady linku, który zadziała wszędzie:

• Format międzynarodowy w href: +33, a po nim numer bez początkowego zera. Numer krajowy nie zostanie poprawnie wybrany z zagranicy ani z części aplikacji.
• Żadnych spacji ani kropek w href. RFC dopuszcza myślniki i kropki jako separatory wizualne, ale nie wszystkie urządzenia je tolerują: najbezpieczniejszy jest ciąg samych cyfr. Czytelne formatowanie (06 12 34 56 78) trafia do tekstu linku.
• Numer wprost w tekście. Sama ikona nie pomoże ani osobie czytającej stronę na komputerze bez telefonii, ani czytnikowi ekranu.

Dla numeru z wewnętrznym RFC przewiduje parametr ext: tel:+33123456789;ext=204. Obsługa w aplikacjach bywa różna; podaj numer wewnętrzny również w tekście.

Dobre praktyki wyświetlania

<p>
  Service client :
  <a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
  (du lundi au vendredi, 9 h à 18 h)
</p>

/* Na dużym ekranie, gdzie bezpośrednie połączenie jest mało prawdopodobne, można zneutralizować wygląd linku */
@media (min-width: 64rem) {
  a.tel {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}

Reguła CSS to wybór redakcyjny, a nie obowiązek: komputer z aplikacją do połączeń zadzwoni bez problemu. Wiele serwisów zostawia link aktywny wszędzie.

Link SMS i link WhatsApp

Ta sama zasada dotyczy wiadomości. Schemat sms: otwiera aplikację do wiadomości, a parametr body wypełnia z góry ich treść (zakoduj spacje i znaki specjalne).

<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>

WhatsApp udostępnia link uniwersalny wa.me, a po nim numer międzynarodowy bez + i bez zer:

<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>

Na telefonie otwiera aplikację, na komputerze WhatsApp Web. Otwarcie linków sms: i wa.me zależy od zainstalowanych aplikacji: zawsze podawaj obok numer wprost.

Jak zablokować automatyczne wykrywanie numerów

To problem odwrotny i pierwotny temat tego artykułu. Niektóre środowiska wypatrują ciągów cyfr przypominających numer telefonu i same zamieniają je w linki tel:, podkreślone i kolorowe, choć twój HTML o to nie prosił. Numer katalogowy produktu, kod pocztowy z numerem ulicy albo identyfikator potrafią w ten sposób stać się klikalnymi „numerami” i rozbić układ strony.

Kto dziś co wykrywa:

• Safari na iPhonie i iPadzie: wykrywanie domyślnie włączone na wszystkich stronach.
• Widoki WebView w aplikacjach mobilnych (i część przeglądarek na Androidzie): zachowanie zmienne, często aktywne.
• Klienty poczty: Apple Mail i aplikacja Mail w iOS wykrywają w e-mailach HTML numery, daty i adresy.
• Dawny Microsoft Edge (silnik EdgeHTML, 2015-2020) powiązany ze Skype’em zamieniał numery w Windows 10: to właśnie ten przypadek opisywała pierwsza wersja artykułu. Dzisiejszy Edge oparty na Chromium już tego nie robi, podobnie jak Chrome i Firefox.

Znacznik, który wyłącza to zachowanie, umieszcza się w sekcji head:

<head>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no">
  …
</head>

Od tej chwili przeglądarka nie tworzy już sama żadnego linku telefonicznego na stronie, a klikalne pozostają wyłącznie twoje jawne linki tel:. To zalecane połączenie: automatyczne wykrywanie wyłączone, a każdy numer, który ma być klikalny, oznaczony ręcznie i w poprawnym formacie międzynarodowym. Zachowujesz kontrolę nad stylem i unikasz fałszywych trafień.

W e-mailu HTML

Najczęstszym przypadkiem nie jest już dziś strona, tylko e-mail: numer zamówienia albo kwota zamienia się w niebieski link w Apple Mail. Ten sam znacznik w sekcji head wiadomości załatwia sprawę. Dla klientów poczty, które go ignorują, rozpowszechniona sztuczka polega na owinięciu numeru linkiem w kolorze tekstu, co ustala styl, zamiast zostawiać go programowi.

<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>

Dostępność i dane strukturalne

Dwa dodatki, każdy za jedną linijkę:

• Atrybut aria-label potrafi uczytelnić numer czytnikom ekranu, które czasem odczytują go mało naturalnie, w rodzaju „zero sześć dwanaście…”: <a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>.
• Na stronie firmowej właściwość telephone w danych Schema.org (Organization albo LocalBusiness) podaje wyszukiwarkom numer w formacie międzynarodowym, niezależnie od tego, jak jest wyświetlany: "telephone": "+33123456789".

Ściągawka

Link telefoniczny to szczególny przypadek znacznika a; pozostałe atrybuty i schematy URL opisuje 20 znaczników HTML5, które warto znać.