Telefonnummer verlinken in HTML: tel-Link und format-detection

Eine Telefonnummer auf einer Webseite wirft zwei gegenläufige Fragen auf. Die erste: wie wird sie klickbar, damit ein Besucher am Smartphone den Anruf mit einer Geste startet? Die zweite: wie hindert man manche Browser daran, sie von sich aus in einen Link zu verwandeln, in einem Stil, den du nicht kontrollierst? Die Antwort auf die erste ist der Link tel:, die Antwort auf die zweite das Meta-Tag meta format-detection, das ursprüngliche Thema dieses Artikels. Hier sind beide, in der Reihenfolge, in der man sie braucht.

Einen klickbaren Telefonlink erstellen

Das URL-Schema tel:, festgelegt in RFC 3966, sagt dem Browser, dass ein Klick eine Nummer wählen soll. Auf dem Smartphone öffnet sich die Telefon-App mit vorausgefüllter Nummer; auf einem Rechner schlägt das System eine Telefonie-Anwendung vor, sofern eine vorhanden ist (FaceTime, Teams, Skype), sonst passiert nichts.

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

Drei Regeln für einen Link, der überall funktioniert:

• Internationales Format im href: +33 gefolgt von der Nummer ohne die führende 0. Eine nationale Schreibweise wird aus dem Ausland und aus manchen Anwendungen heraus nicht korrekt gewählt.
• Keine Leerzeichen und keine Punkte im href. Die RFC erlaubt Bindestriche und Punkte als optische Trenner, aber nicht jedes Gerät verträgt sie: am sichersten ist eine reine Ziffernfolge. Die lesbare Formatierung (06 12 34 56 78) gehört in den Linktext.
• Die Nummer im Klartext im Linktext. Ein bloßes Icon nützt weder jemandem, der die Seite an einem Rechner ohne Telefonie liest, noch einem Screenreader.

Für eine Nummer mit Durchwahl sieht die RFC den Parameter ext vor: tel:+33123456789;ext=204. Die Unterstützung durch die Anwendungen ist uneinheitlich; nenne die Durchwahl deshalb auch im Text.

Gute Praxis bei der Darstellung

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

/* Auf großen Bildschirmen, wo ein direkter Anruf unwahrscheinlich ist, lässt sich das Aussehen des Links neutralisieren */
@media (min-width: 64rem) {
  a.tel {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}

Die CSS-Regel ist eine redaktionelle Entscheidung, keine Pflicht: ein Rechner mit Telefonie-Anwendung kann durchaus anrufen. Viele Websites lassen den Link überall aktiv.

SMS-Link und WhatsApp-Link

Dasselbe Prinzip gilt für Nachrichten. Das Schema sms: öffnet die Nachrichten-App; der Parameter body füllt den Text vor (Leerzeichen und Sonderzeichen kodieren).

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

WhatsApp bietet einen universellen Link, wa.me, gefolgt von der internationalen Nummer ohne + und ohne Nullen:

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

Auf dem Smartphone öffnet er die App, am Rechner WhatsApp Web. Ob sich sms:– und wa.me-Links öffnen, hängt von den installierten Anwendungen ab: schreib die Nummer immer im Klartext daneben.

Die automatische Nummernerkennung unterbinden

Das ist das umgekehrte Problem und das ursprüngliche Thema dieses Artikels. Manche Umgebungen erkennen Ziffernfolgen, die nach einer Telefonnummer aussehen, und verwandeln sie von sich aus in tel:-Links, unterstrichen und eingefärbt, ohne dass dein HTML darum gebeten hätte. Eine Produktreferenz, eine Postleitzahl mit Hausnummer oder eine Kennung wird so zur klickbaren „Nummer“ und zerschießt dein Layout.

Wer heute was erkennt:

• Safari auf iPhone und iPad: Erkennung standardmäßig auf allen Seiten aktiv.
• Die WebViews mobiler Anwendungen (und einige Android-Browser): unterschiedliches Verhalten, oft aktiv.
• Die E-Mail-Programme: Apple Mail und die Mail-App unter iOS erkennen Nummern, Daten und Adressen in HTML-E-Mails.
• Der alte Microsoft Edge (Engine EdgeHTML, 2015-2020) verwandelte zusammen mit Skype die Nummern unter Windows 10: das war der Fall, den die erste Fassung dieses Artikels beschrieb. Der heutige Edge auf Chromium-Basis tut das am Desktop nicht mehr, ebenso wenig wie Chrome oder Firefox.

Das Meta-Tag, das dieses Verhalten abschaltet, gehört in den head:

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

Von da an legt der Browser auf der Seite keinen Telefonlink mehr von selbst an, und nur deine ausdrücklichen tel:-Links bleiben klickbar. Das ist die empfohlene Kombination: automatische Erkennung abgeschaltet und jede Nummer, die klickbar sein soll, von Hand ausgezeichnet, im richtigen internationalen Format. Du behältst die Kontrolle über den Stil und vermeidest Fehltreffer.

In einer HTML-E-Mail

Der häufigste Fall ist heute nicht mehr die Webseite, sondern die E-Mail: eine Bestellnummer oder ein Betrag wird in Apple Mail zum blauen Link. Dasselbe Meta-Tag im head der Nachricht löst das Problem. Für Programme, die es ignorieren, ist ein verbreiteter Kniff, die Nummer in einen Link in Textfarbe zu packen: so liegt der Stil fest, statt dem Programm überlassen zu bleiben.

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

Barrierefreiheit und strukturierte Daten

Zwei Ergänzungen, die je eine Zeile kosten:

• Ein aria-label kann die Nummer für Screenreader verständlicher machen, die sie manchmal wenig natürlich als „null sechs zwölf …“ vorlesen: <a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>.
• Auf einer Unternehmensseite gibt die Eigenschaft telephone der Schema.org-Auszeichnung (Organization oder LocalBusiness) den Suchmaschinen die Nummer im internationalen Format, unabhängig von der Anzeige: "telephone": "+33123456789".

Überblick

Der Telefonlink ist ein Sonderfall des a-Tags; die übrigen Attribute und URL-Schemata stehen ausführlich in 20 HTML5-Tags, die du kennen solltest.