Der aktuelle Stand von Telefon Links

Telefon-Links sind eine Sache. Ähnlich wie ein Ankerlink, den man antippt, um (wahrscheinlich) zu einer anderen Seite zu gelangen, sind dies Links, die man antippt, um eine Nummer auf einem telefonfähigen Gerät anzurufen. Sie existieren schon seit geraumer Zeit. Dennoch bereiten sie mir viel Verwirrung. Zum Beispiel erkennen viele Geräte Telefonnummern automatisch und erstellen die Links für uns, aber nicht immer.

Es gibt genügend Webverkehr auf Mobilgeräten und viele Desktop-Anwendungen, die Anrufe tätigen können, daher lohnt es sich, mehr über Telefon-Links zu erfahren.

Standardmäßige Verwendung

Wir haben einen Ausschnitt für Telefon-Links auf dieser Seite, der seit 2011 existiert

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Dies funktioniert auch bei Textlinks

<a href="tel:1-562-867-5309">Click to Call!</a>

tel: ist weniger ein Feature als ein Protokoll, ähnlich wie http: und mailto: Protokolle für die <a> Tag-Funktion sind. Die Spezifikation selbst sagt nichts dazu, obwohl HMTL5 Unterstützung für benutzerdefinierte Protokollhandler bot, die die Verwendung eines solchen Protokolls ermöglichen.

Sie fragen sich wahrscheinlich, warum tel: als Standardverwendung gelten kann, obwohl es keine offizielle Spezifikation dafür gibt. Das liegt daran, dass es bereits im Jahr 2000 als vorgeschlagener Standard vorgeschlagen und später von iOS übernommen wurde, was es um 2007 zum De-facto-Standard machte. Es gibt andere telefonbasierte Protokolle (auf die wir später eingehen werden), aber wir werden uns auf tel: konzentrieren, da es relativ prominent ist.

Browser-Unterstützung

Wir sehen tel: als Protokollhandler für Links ohne offizielle Dokumentation; und wo es keine Dokumentation gibt, sehen wir oft Unterschiede in der Browserunterstützung und im Verhalten. Das heißt nicht, dass Browser das <a>-Tag selbst nicht erkennen. Stattdessen können Browser unterschiedliche Entscheidungen treffen, was zu tun ist, wenn dieser Link geklickt wird. Zum Beispiel kann ein Browser davon ausgehen, dass eine andere App geöffnet werden muss, und einen Dialog auslösen, der fragt, welche App verwendet werden soll. In anderen Fällen wird der Link möglicherweise ganz ignoriert.

Browser	Verlinkt es?	Wenn geklickt wird…
Android	Ja	Startet die Telefon-App
BlackBerry 9900	Ja	Initiieret einen Anruf
Chrome	Ja	Löst einen Dialog aus, der die Verwendung einer anderen App bestätigt
Edge	Ja	Löst einen Dialog aus, der die Verwendung einer anderen App bestätigt
Internet Explorer 11	Ja	Löst einen Dialog aus, der die Verwendung einer anderen App bestätigt
Internet Explorer 11 Mobile	Ja	Initiieret einen Anruf
iOS	Ja	Löst Optionen aus, um anzurufen, eine Nachricht zu senden, die Nummer zu kopieren oder sie zu den Kontakten hinzuzufügen
Opera (OSX)	Ja	Löst einen Dialog aus, der die Verwendung einer anderen App bestätigt
Opera (Windows)	Ja	Löst einen Fehlerdialog aus, der das Protokoll nicht erkennt
Safari	Ja	Startet FaceTime

Styling von Telefon-Links

Das Styling von Telefonnummern ist wie bei jedem anderen Link. Tatsächlich erbt es das Standardstyling für Anker.

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

Nehmen wir an, wir möchten nur auf Telefon-Links anwenden. Das können wir mit einem Pseudoselektor tun, der nach dem tel:-Text in einer gegebenen URL sucht.

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

Tuts+ hat einen netten Trick mit dem Pseudoselektor ::before, um das Unicode-Telefonsymbol vor der angezeigten Nummer hinzuzufügen.

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

Alternative Telefon-bezogene Links

Ob Sie es glauben oder nicht, tel: ist nicht der einzige Weg, einen Anruf mit einem Link zu initiieren. Hier sind einige andere benutzerdefinierte telefonbezogene Protokollhandler, die uns zur Verfügung stehen.

• callto: Genau wie tel:, aber verwendet, um Anrufe über die Skype-App zu initiieren.
• Automatisch erkannt: Viele Browser erkennen Telefonnummern automatisch im HTML und verlinken sie für Sie – Sie müssen die Markierung nicht ändern. iOS tut dies zum Beispiel vollständig, obwohl dies bei Chrome auf Android nicht der Fall zu sein schien.
• sms: Überspringen Sie den Anruf und gehen Sie direkt zur Textnachricht. Dies scheint bei Browsern, einschließlich mobiler Browser, deutlich weniger unterstützt zu werden als tel:.
• fax: Zurück in die Zukunft mit Faxgeräten. Wiederum fleckige Zuverlässigkeit.

Bewährte Praktiken

Es ist irgendwie lustig, über Best Practices zu sprechen, wenn es um etwas ohne Spezifikationen geht. Die Spezifikation gibt eine kurze Meinung zur "Click-to-Call"-Idee ab, aber hier sind ein paar Dinge, die Sie bei der Arbeit mit Telefonnummern und Links beachten sollten.

Kontext berücksichtigen

Ein Telefon-Link kann ein hervorragender Call-to-Action sein, insbesondere auf Mobiltelefonen, wo er die Reibung zwischen Inhalt und Anruf reduziert. Gleichzeitig können Telefon-Links auf Desktop-Systemen als hinderlich angesehen werden, wenn ein Anruf nicht möglich wäre, weil das Gerät über keine unterstützende Anwendung verfügt.

Eine Idee wäre, eine spezielle Klasse für Telefon-Links zu erstellen und zu versuchen, sie basierend auf unserem Wissen über den Browser ein- oder auszublenden. Modernizr und Media Queries sind hier nützlich, aber insgesamt ungenau.

Länderkennzahlen verwenden

Eine Länderkennzahl ist nicht zwingend erforderlich, könnte aber eine nette Ergänzung für Websites mit internationalem Traffic sein. Länderkennzahlen können mit einem + vorangestellt werden, aber auch das ist nicht zwingend erforderlich.

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

Suchmaschinenoptimierung

SEO-Experten haben hier vielleicht mehr hinzuzufügen als ich, aber Google bietet ein strukturiertes Datenformat für lokale Unternehmen an, und dessen Verwendung macht Telefon-Links für Crawler erkennbarer und formatiert sie auf Suchergebnisseiten so, dass die Nummer viel besser nutzbar ist. Dudley Storey bietet einen ausgezeichneten Überblick mit dem folgenden Beispiel.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Beach Bunny Swimwear</h1>
  Phone: 
    <span itemprop="telephone">
      <a href="tel:+18506484200">
         850-648-4200
      </a>
    </span>
</div>

Auf der anderen Seite, wenn Sie möchten, dass Suchmaschinen Telefon-Links verfolgen, können Sie rel="nofollow" hinzufügen, um zu verhindern, dass Links verfolgt und indiziert werden. Dies könnte eine gute Idee für jeden Link sein, der nicht als Call-to-Action ausgewiesen ist, da Webcrawler dazu neigen würden, ihn ins Leere zu verfolgen.

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

Nummernerkennung in iOS deaktivieren

Wenn Sie Telefon-Links zu Ihrer Markierung hinzufügen möchten, sollten Sie auch in Erwägung ziehen, iOS daran zu hindern, Telefonnummern automatisch zu erkennen und Ihre Stile zu überschreiben. Fügen Sie das Folgende zum <head> des Dokuments hinzu, um dies zu deaktivieren.

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

Weitere Lektüre

• Quick Tip: Make Telephone Numbers Do Something von Tuts+
• Adding Phone Numbers To Web Pages With HTML5 and Microdata von Dudley Storey
• Original Draft Proposal 2806, das durch Proposal 3966 abgelöst wurde.
• Apple URL Scheme Reference