Telefon-Links auf der Website:
Der Einsteiger Guide

Klickbare Telefonnummern sind benutzerfreundlich. Mit nur einem Klick öffnet sich deine Telefon App, nicht nur vom Smartphone aus. Die Technik dahinter ist denkbar einfach und funktioniert komplett ohne Plugin auf jeder Website.

Die Vorteile eine Telefonnummer zu verlinken liegen ganz klar auf der Hand:

  • Zahlendreher? Nein danke.
  • Kein lästiges Abtippen der Nummer nötig.
  • Anrufer erreichen dich direkt, ohne ein Formular auszufüllen.

Den letzten Punkt könntest du auch als Grund anführen, um eine Nummer bewusst nicht zu verlinken oder sogar zu verstecken.

Grundlagen

Hinter der klickbaren Telefonnummer steckt ein normaler Link, den du in jedem Editor verwenden kannst. Anstelle einer Website trägst du deine Telefonnummer ein.

Normaler Link:

<a href="https://wp-styles.de">Ein normaler Link</a>

Telefon Link:

<a href="tel:+49-1234-56-78-9">(01234) 56 79 9</a>

Die ganze Magie geschieht über das Protokoll. Für Websites schreibst du für gewöhnlich ein http:// oder https:// vor die Domain. Eine Telefonnummer beginnt mit einem tel:.

Nicht jede Telefonnummer kann verlinkt werden

Die Nummer selbst muss dem „international dialing format“ entsprechen. Das hört sich kompliziert an, ist aber ganz einfach.

Falsch:

  • +49 1234 56 78 9
  • (01234) 56 78 9
  • 0123456789

Richtig:

  • +49-1234-56-78-9
  • +491234-56-78-9
  • +49123456789

Deine Telefonnummer muss immer mit der Ländervorwahl starten und darf bis auf das Plus (+) und Minus (-) Zeichen keine Sonderzeichen enthalten. Klammern sind also tabu!

Die Minus-Zeichen verbessern die Lesbarkeit für dich als Content-Manager. Solltest du sie nicht benötigen, lass sie weg.

Die Beschriftung des Links ist wichtig

Einleitend habe ich erwähnt, dass kein lästiges Abtippen der Nummer nötig sei. Trotzdem möchten viele Nutzer vorab die Nummer sehen, die gleich in ihrer Telefon App erscheinen wird. Tu ihnen diesen Gefallen und schreibe die Telefonnummer zusätzlich aus.

Schlecht:

<a href="tel:+49-1234-56-78-90">Rufen Sie uns an</a>

Gut:

<a href="tel:+49-1234-56-78-9">(01234) 56 79 9</a>

Das Aussehen des Links ändern

Mit CSS kannst du das Aussehen von Elementen auf deiner Website verändern. Telefon Links sind “normale” Links. Sie verfügen nur über ein anderes Protokoll. Daher können sie auch wie gewohnt verändert werden.

a {
  color: red;
}

Möchtest du nur die Telefon-Links verändern, kannst du den CSS Selektor auf das href-Attribut des Links beschränken.

a[href^=’tel:’] {
  color: green;
}

Wenn du dich jetzt fragst, wann man so einen Selektor schreiben würde, habe ich direkt das perfekte Beispiel für dich.

Telefon Symbol vor der Nummer einfügen

Um ein Icon automatisch vor deinen Telefon Links einzufügen, habe ich den Telefon Selektor aus dem vorherigen Abschnitt als Basis verwendet.

a[href^=’tel:’]::before {
  content: ‘\260e’;
  margin-right: 0.5rem;
}
  • Der Selektor wurde um das Pseudoelement ::before erweitert. So fügen wir ein beliebig formatierbares Element vor das Link Element an.
  • Dieses Element verfügt über den Inhalt (content) mit dem Wert \260e, was einem Telefon Icon entspricht. Mehr dazu folgt gleich.
  • Damit das Icon nicht direkt an der Nummer klebt, wird etwas Platz dazwischen geschaffen (margin-right).

Das Ergebnis wird dann in etwa so aussehen:
☎ (01234) 56 79 90

Sollte dir das Icon nicht gefallen kann ich dich beruhigen. Unabhängig von deinem Content Management System oder Theme stehen dir folgende Motive immer zur Verfügung:

  • ☎ \260e
  • ☏ \260f
  • ✆ \2706

Wenn du eine andere Icon-Bibliotheken nutzen möchtest, wie z.B. Font Awesome, ist das aber auch kein Problem. Die meisten Anbieter haben eigene Dokumentationen für CSS Pseudoelemente.

Häufig gestellte Fragen

Erkennen Browser Telefonnummern automatisch?

Jain. Mobile Browser können Telefonnummern automatisch erkennen.

  • Safari für iOS wandelt die Nummer direkt in einen Link um.
  • Chrome für Android ermöglicht ebenfalls direkte Anrufe, fügt aber kein Link Element in deine Website ein. Somit werden auch keine von dir für Links vorgesehene CSS Styles angewandt.

Kann ich die automatische Erkennung deaktivieren?

Ja, die automatische Erkennung von Telefonnummern kann über ein meta Tag deaktiviert werden.

<meta name="format-detection" content="telephone=no">

Mehr dazu erfährst du in der Web Fundamentials Dokumentation von Google.


Auf welchen Geräten soll meine Website einen Telefon-Link anbieten?

Auf allen Geräten. Denn die meisten können damit umgehen.

  • Smartphones unterstützen das tel: Protokoll und verfügen über eigene Telefon Apps.
  • Desktop Geräte unterstützen das Protokoll ebenfalls und können mit VoIP Telefonen oder Smartphones gekoppelt werden.

Muss ich Telefon-Links im neuen Tab öffnen?

Nein, auch wenn es eine Art externer Link ist, müssen Telefonnummern nicht im neuen Tab geöffnet werden. Ein Klick auf den Link öffnet eine andere Applikation.


Gibt es noch andere Protokolle für Telefon-Links?

Ja, es gibt auch andere Protokolle, mit denen ein Link Telefonnummern anders behandelt. In der freien Wildbahn sieht man diese aber kaum. Das führt dazu, dass von tel: abweichende Protokolle deine Besucher irritieren können.

  • callto: Verhält sich wie das tel Protokoll, öffnet aber Drittanbieter Apps, wie z.B. Skype.
  • fax: Seit 2004 veraltet, bitte nicht mehr verwenden (RFC 3966).
  • mms / sms: Öffnet deine Nachrichten App und trägt direkt den Empfänger ein. Manche Browser unterstützen außerdem von dir vorformulierte Nachrichtentexte als Platzhalter.

Teile diesen Beitrag