Zurück zum Blog
telefonnummer klickbar website8. August 202612 Min.

Telefonnummer auf der Website klickbar machen

Telefonnummer auf der Website klickbar machen ! Mit dem Finger tippt jemand auf eine anklickbare Telefonnummer auf dem Smartphone.

Teilen:

Telefonnummer auf der Website klickbar machen

Mit dem Finger tippt jemand auf eine anklickbare Telefonnummer auf dem Smartphone.

Eine klickbare Telefonnummer braucht genau eine Zeile HTML. Wer auf Smartphone-Nutzungsraten in Deutschland schaut, versteht warum: Der Großteil des Traffics kommt heute vom Mobilgerät, und ein Nutzer, der anrufen will, wird nicht manuell tippen. Er tippt auf die Nummer. Passiert nichts, ist er weg.

Das Grundprinzip:

<a href="tel:+49XXXXXXXXX">+49 XXX XXXXXXX</a>

href enthält die Nummer im E.164-Format (führendes +, Ländercode, keine Leerzeichen), der sichtbare Linktext zeigt die Nummer so, wie Menschen sie lesen.

Drei Regeln, die sofort gelten:

  • E.164 im href: +49 statt 0, keine Leerzeichen, keine Klammern, keine Bindestriche im href-Wert.
  • Lesbarer Linktext: Die Nummer im Tag darf Leerzeichen und Formatierung enthalten, z. B. +49 30 123456.
  • ARIA-Label ergänzen, wenn der Linktext nicht selbsterklärend ist: aria-label="Jetzt anrufen: +49 30 123456" hilft Screenreadern und entspricht dem RFC 3966-Standard.

Profi-Tipp: Füge data-event="phone_click" direkt ins <a>-Tag ein. Das erleichtert später das Einrichten von Google Tag Manager-Triggern erheblich.

Wichtige Erkenntnisse

Eine klickbare Telefonnummer mit E.164-Format im href, sichtbarem Linktext und mobilem CTA-Design ist der direkteste Weg zu mehr Anrufen über die Website.

Thema Details
E.164-Format im href tel:+49... ohne Leerzeichen verwenden; führende 0 der Vorwahl entfällt.
Automatische Erkennung steuern <meta name="format-detection" content="telephone=no"> bei Seiten mit vielen Zahlen setzen.
Touch-Zielgröße Mindestens 44 × 48 px für den Klickbereich; Sticky-Footer steigerte Anrufe in einem Praxisfall um 46 %.
Tracking einrichten GTM-Trigger auf a[href^="tel:"] setzen, GA4-Event phone_click senden, auf echtem Gerät testen.
Netivoo Setzt tel:-Links, Sticky-Call-Bar und Tracking-Setup für Handwerksbetriebe in etwa 7 Tagen um.

Inhaltsverzeichnis

Der Kern ist simpel, die Fehler stecken im Detail. Drei Varianten, die in der Praxis vorkommen:

Reiner Textlink:

<a href="tel:+4930123456">+49 30 123456</a>

Button mit tel:-Href:

<a href="tel:+4930123456" class="call-button" aria-label="Jetzt anrufen">
  📞 Jetzt anrufen
</a>

Icon plus Nummer nebeneinander:

<a href="tel:+4930123456" aria-label="Telefon: +49 30 123456">
  <svg aria-hidden="true"><!-- Icon --></svg>
  +49 30 123456
</a>

Typische Fehler, die den Link zerstören:

  • Leerzeichen im href: href="tel:+49 30 123456" funktioniert auf manchen Geräten nicht zuverlässig.
  • Falsches Protokoll: href="phone:..." oder href="call:..." sind keine gültigen URI-Schemata.
  • Lokale Schreibweise ohne Ländercode: href="tel:030123456" schlägt bei internationalen Anrufern und Roaming-Nutzern fehl.
  • Nummer als reiner Text ohne <a>-Tag: Sieht aus wie ein Link, ist keiner.

Profi-Tipp: Setze aria-label immer dann, wenn der sichtbare Linktext nur ein Icon oder das Wort „Anrufen“ enthält. Screenreader lesen sonst nichts Sinnvolles vor. Für Click-Tracking empfiehlt sich zusätzlich ein data--Attribut direkt am Tag.

Warum E.164-Format im href unverzichtbar ist

RFC 3966 definiert das tel:-URI-Schema und empfiehlt ausdrücklich das globale E.164-Format für den href-Wert. Einfacher: immer +49... verwenden.

Die Regeln für E.164 im href:

  • Führendes + gefolgt vom Ländercode (Deutschland: 49, Österreich: 43, Schweiz: 41).
  • Führende 0 der Ortsvorwahl entfällt: aus 030 wird 30.
  • Keine Leerzeichen, Klammern oder Bindestriche im href-Wert.
  • Maximal 15 Ziffern gesamt (Ländercode + Teilnehmernummer).

Die Front-End Checklist zeigt konkret, wie korrekte und fehlerhafte href-Werte aussehen, und weist darauf hin, dass E.164 auch für strukturierte Daten (schema.org/LocalBusiness) der richtige Standard ist.

Lokale Schreibweise (sichtbar) href (E.164-Format) Gültig?
030 123456 tel:+4930123456 ✓
0221 987654 tel:+49221987654 ✓
+43 1 234567 tel:+431234567 ✓
030 123456 tel:030123456 ✗
+49 30 123456 tel:+49 30 123456 ✗ (Leerzeichen)

Der sichtbare Linktext darf und sollte die Nummer leserfreundlich formatiert zeigen. Nur der href-Wert muss sauber sein.

Wie steuern Sie die automatische Nummernerkennung im Browser?

Mobile Browser, besonders iOS Safari, erkennen Zeichenfolgen, die wie Telefonnummern aussehen, und verlinken sie automatisch. Das klingt praktisch, erzeugt aber Probleme: Artikelnummern, Postleitzahlen oder Datumsangaben werden plötzlich als anklickbare Rufnummern dargestellt.

Web manuelles tel:-Tagging für konsistente Nutzererfahrung und Designkontrolle, weil Browserverhalten bei automatischer Erkennung zu stark variiert.

Zwei Meta-Tags steuern das Verhalten:

  • Automatische Erkennung erlauben (Standard): <meta name="format-detection" content="telephone=yes"> — meist unnötig, weil das der Standardwert ist.
  • Automatische Erkennung deaktivieren: <meta name="format-detection" content="telephone=no"> — sinnvoll, wenn viele Zahlen auf der Seite stehen (Preislisten, Kataloge, technische Tabellen).

Wann welche Variante?

  • Seiten mit wenigen, klar als Rufnummern erkennbaren Zahlen: automatische Erkennung lassen, manuell taggen für Kontrolle.
  • Seiten mit vielen Zahlen (Shops, Kataloge): telephone=no setzen und alle echten Rufnummern manuell mit tel: auszeichnen.
  • Immer manuell taggen, wenn das Design des Links kontrolliert werden soll (Farbe, Größe, Icon).

Gutenberg-Editor

  1. Absatz oder Schaltfläche markieren, die die Nummer enthält.
  2. Text markieren, dann das Link-Symbol in der Toolbar anklicken.
  3. Im Linkfeld eingeben: tel:+4930123456 (ohne Anführungszeichen).
  4. Bestätigen. WordPress speichert den href korrekt.

Alternativ: Einen „Benutzerdefinierter HTML“-Block einfügen und den vollständigen <a href="tel:...">...</a>-Code direkt eingeben. Das gibt volle Kontrolle über ARIA-Attribute und CSS-Klassen.

Elementor und andere Page-Builder

  1. Button- oder Text-Widget auswählen.
  2. Im Feld „Link“ oder „URL“ den Wert tel:+4930123456 eintragen.
  3. Kein https:// davor, kein Leerzeichen.

Für Header und Footer gilt: Änderungen direkt im Theme-Header können bei Updates überschrieben werden. Ein Child-Theme schützt davor. Wer keins anlegen will, nutzt einen Plugin-basierten Header-Builder oder das jeweilige Theme-eigene Header-Modul.

Plugins und dynamische Felder

Das WordPress-Plugin Call Now Button erzeugt eine Sticky-Call-Bar ohne Programmieraufwand, konfigurierbar über das Backend. Für Websites mit mehreren Standorten und unterschiedlichen Nummern bieten Page-Builder wie Elementor Pro dynamische Felder, die Nummern aus Custom Fields ziehen. Dabei darauf achten, dass das Feld den href-Wert im E.164-Format ausgibt, nicht die formatierte Anzeigeversion.

Wie gestalten Sie klickbare Telefonnummern barrierefrei und nutzerfreundlich?

Die Technik sitzt. Aber ob jemand tatsächlich anruft, hängt stark vom Design ab. Think With Google zeigt, dass Click-to-Call-Buttons die Hürde für mobile Nutzer spürbar senken und direkte Anrufe wahrscheinlicher machen als Kontaktformulare.

Grundregeln für Touch-Ziele und Kontrast:

  • Mindestgröße des Klickbereichs: 44 × 44 px (Apple-Empfehlung) bis 48 × 48 px (Google Material Design).
  • Farbkontrast zwischen Text und Hintergrund: mindestens 4,5:1 nach WCAG 2.1 AA.
  • Ein Telefon-Icon neben der Nummer erhöht die Erkennbarkeit, muss aber aria-hidden="true" tragen, damit Screenreader es nicht vorlesen.

Vergleich: Inline-Link, Button, Sticky-Footer

Variante Vorteile Nachteile Einsatzszenario
Inline-Textlink Unauffällig, passt in Fließtext Kleiner Klickbereich, leicht übersehen Impressum, Kontaktseite
Button (CTA) Großer Klickbereich, auffällig Braucht Platz im Layout Header, Kontaktbereich
Sticky Footer Immer sichtbar, hohe Klickrate Überdeckt Inhalte auf kleinen Screens Mobile-first-Seiten, Dienstleister

Ein einfaches CSS-Snippet für einen mobilen Call-Button:

.call-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00c2cb;
  color: #fff;
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 1.1rem;
  text-decoration: none;
  min-height: 48px;
}

Ein Praxisbeispiel von Pipelineon zeigt, dass eine Sticky-Call-Bar in einem gemessenen Fall 46 % mehr Anrufe erzeugte als ein statisch platzierter Button. Platzierung schlägt Farbe.

Ohne Tracking weiß niemand, ob der Button funktioniert. Google Tag Manager macht die Messung unkompliziert.

  • GTM-Trigger erstellen: Trigger-Typ „Klick auf alle Elemente“, Bedingung: Click URL beginnt mit tel:. Alternativ CSS-Selektor a[href^="tel:"] als Element-Sichtbarkeits-Trigger.
  • GA4-Event senden: Tag-Typ „Google Analytics: GA4-Ereignis“, Ereignisname z. B. phone_click, Parameter phone_number mit dem Wert {{Click URL}}.
  • Testen: GTM-Vorschaumodus aktivieren, auf dem echten Mobilgerät klicken, Event in GA4 Echtzeit-Bericht prüfen.
// Alternativ: direktes GA4-Event ohne GTM
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
  link.addEventListener('click', () => {
    gtag('event', 'phone_click', {
      phone_number: link.href
    });
  });
});

Dynamische Rufnummern (Dynamic Number Insertion, DNI) ermöglichen es, pro Traffic-Quelle eine andere Nummer anzuzeigen und so Anrufe direkt einer Kampagne zuzuordnen. Der Nachteil: NAP-Konsistenz (Name, Adresse, Telefon) für lokales SEO leidet, wenn zu viele verschiedene Nummern im Umlauf sind.

Adblocker können clientseitiges Tracking blockieren. Wer Anruf-Attribution als kritische Kennzahl betrachtet, sollte serverseitiges Tagging als Absicherung einrichten.

Wann lohnen sich QR-Code, SIP-URI oder Click-to-Chat?

Der tel:-Link ist die universelle Basisschnittstelle. Ergänzungen machen Sinn, ersetzen ihn aber nicht.

  • QR-Code: Ideal für Printmaterialien, Schaufenster oder Fahrzeugbeschriftung. Der QR-Code kodiert einfach tel:+4930123456. Wer einen QR-Code generiert, sollte einen Dienst mit eigenem Tracking-Link verwenden, um Scans zu messen.
  • SIP/VoIP-URIs: sip:name@domain.example funktioniert in VoIP-Umgebungen und Unternehmenstelefonie. Für öffentliche Websites wenig sinnvoll, weil die meisten Besucher keinen SIP-Client installiert haben. tel: bleibt die bessere Wahl.
  • Click-to-Chat (WhatsApp, Chat-Widget): Sinnvoll für Nutzer, die nicht sofort sprechen wollen. Ein WhatsApp-Link hat das Format https://wa.me/4930123456. Kein Ersatz für tel:, aber eine gute Ergänzung auf der Kontaktseite.

Desktop-Nutzer ohne Telefonfunktion sehen beim Klick auf einen tel:-Link je nach Betriebssystem unterschiedliches Verhalten: Windows öffnet oft Skype oder die Telefon-App, macOS FaceTime. Wer das steuern will, kann per JavaScript prüfen, ob ein Mobilgerät vorliegt, und Desktop-Nutzern stattdessen einen Hinweistext oder ein Formular zeigen.

Checkliste: So testen Sie die Implementierung auf allen Geräten

  1. iPhone Safari: Nummer antippen. Erwartet: Systemdialog „Anruf starten?“ erscheint. Kein Dialog? href-Format prüfen.
  2. Android Chrome: Gleiches Verhalten wie iOS, aber ohne Bestätigungsdialog auf manchen Geräten. Direktanruf möglich.
  3. Desktop Chrome/Firefox: Klick öffnet je nach installierter App Skype, Teams oder eine Fehlermeldung. Das ist normales Verhalten.
  4. Desktop Safari (macOS): FaceTime öffnet sich, sofern eingerichtet. Kein Handlungsbedarf.
  5. DOM-Inspektion: Im Browser-Devtools das <a>-Element auswählen, href-Attribut prüfen. Kein Leerzeichen, kein falsches Protokoll.
  6. Regex-Validierung des href: Muster ^tel:\+[1-9]\d{1,14}$ sollte matchen.
  7. GTM-Vorschau: Klick auslösen, im GTM-Vorschaufenster prüfen, ob der Trigger feuert.
  8. GA4-Echtzeit: Event phone_click erscheint innerhalb von Sekunden.
  9. Fallback-Text für Desktop: Wenn kein Anrufgerät verfügbar ist, sollte die Seite einen alternativen Kontaktweg zeigen (Formular, E-Mail).

Welche Sicherheits- und Datenschutzrisiken gibt es bei öffentlichen Rufnummern?

Telefonnummern auf Websites sind öffentlich und werden gescrapt. Das lässt sich nicht vollständig verhindern, aber eingrenzen.

  • Automatisches Wählen durch Skripte: RFC 3966 schreibt vor, dass Anwendungen vor dem Auslösen eines Anrufs eine Nutzerbestätigung einholen müssen. Kein JavaScript sollte window.location = "tel:..." ohne Nutzerinteraktion setzen.
  • Scraping: Wer die Nummer nur für menschliche Besucher sichtbar machen will, kann sie per CSS oder JavaScript aus Teilen zusammensetzen. Für die meisten Handwerksbetriebe ist das Aufwand ohne nennenswerten Nutzen.
  • Spam-Calls: Eine öffentlich gelistete Nummer erhält früher oder später Spam. Praktisch: eine separate Nummer für die Website, die sich von der internen Hauptnummer unterscheidet.
  • Strukturierte Daten: Die Nummer in schema.org/LocalBusiness (JSON-LD) sollte identisch mit der sichtbaren Nummer sein. Abweichungen verwirren Google und können das lokale Ranking beeinflussen.
  • Datenschutz: Die Veröffentlichung einer Geschäftsnummer ist rechtlich unproblematisch. Wer Fragen zur Datenschutzerklärung hat, findet auf der Netivoo-Datenschutzseite einen Ausgangspunkt. Dieser Artikel gibt keine Rechtsberatung.

Profi-Tipp: Nutze für die Website eine Nummer, die im Call-Tracking-System als „Website-Eingang“ markiert ist. So lassen sich Spam-Calls von echten Anfragen trennen, ohne die Hauptnummer zu gefährden.

Warum klickbare Nummern auf jeder Handwerker-Website Standard sein sollten

Wer Websites für Elektriker, Dachdecker oder SHK-Betriebe baut, weiß: Der häufigste Conversion-Pfad ist nicht das Formular. Er ist der Anruf. Ein Interessent, der auf dem Smartphone nach einem Notdienst sucht, will nicht scrollen, nicht tippen, nicht warten. Er will eine Nummer sehen und antippen.

Netivoo baut klickbare Rufnummern deshalb standardmäßig in jede Handwerker-Website ein, zusammen mit einer Sticky-Call-Bar für mobile Nutzer und einem sauber konfigurierten Tracking-Setup. Die Erfahrung aus der Arbeit mit lokalen Dienstleistern zeigt: Wer die Kontaktaufnahme auf einen Tap reduziert, bekommt mehr Anfragen. Nicht dramatisch mehr, aber messbar mehr. Und bei einem Handwerksbetrieb, der pro Auftrag dreistellige bis vierstellige Beträge umsetzt, zählt jede zusätzliche Anfrage.

Die technische Umsetzung ist der kleinste Teil. Was mehr Zeit kostet, ist die Entscheidung über Platzierung, Farbe, Text und Tracking. Genau da liegt der Unterschied zwischen einer Nummer, die irgendwo im Footer steht, und einer, die tatsächlich klingelt.

Warum klickbare Nummern auf jeder Handwerker-Website Standard sein sollten — overview diagram

Netivoo setzt Click-to-Call für Ihre Handwerker-Website um

Für Handwerksbetriebe, die eine mobiloptimierte Website mit funktionierendem Click-to-Call brauchen, übernimmt Netivoo die komplette Umsetzung: tel:-Link mit E.164, Sticky-Call-Bar für mobile Besucher, GTM-Tracking-Setup und barrierefreie Auszeichnung. Alles in einem Paket, fertig in etwa 7 Tagen.

Netivoo

Kein Rätselraten beim Code, kein Suchen nach dem richtigen Plugin. Wer als Elektriker, Dachdecker oder Tischler mehr Anrufe über die Website bekommen will, bekommt bei Netivoo eine fertige Handwerker-Website, die genau das liefert. Jetzt Anfrage stellen und in einer Woche online gehen.

Quellen

Für die Implementierung klickbarer Telefonnummern sind diese Quellen direkt relevant:

FAQ

Wie verlinke ich eine Telefonnummer auf einer Website?

Mit einem HTML-Anchor-Tag: <a href="tel:+49XXXXXXXXX">+49 XXX XXXXXXX</a>. Der href-Wert muss die Nummer im internationalen Format enthalten, der sichtbare Text darf lesbar formatiert sein.

Wie macht man eine Handynummer auf der Website anklickbar?

Dasselbe Prinzip wie beim Festnetz: href="tel:+49XXXXXXXXX" mit vollständiger Ländervorwahl und ohne Leerzeichen im href. Mobile Browser öffnen beim Antippen direkt den Wähler.

Ist es sicher, eine Telefonnummer auf einer Website anzugeben?

Für Geschäftsnummern ist das rechtlich unproblematisch. Das Risiko sind Spam-Calls durch automatisiertes Scraping. Eine separate Website-Nummer und kein automatisches Auslösen von Anrufen per JavaScript (wie RFC 3966 vorschreibt) reduzieren das Risiko spürbar.

Ja, aber das Verhalten hängt von installierten Apps ab. Windows öffnet oft Skype oder die Telefon-App, macOS FaceTime. Wer Desktop-Nutzern ohne Telefonfunktion einen Hinweis geben will, kann per JavaScript zwischen Mobilgerät und Desktop unterscheiden und entsprechend reagieren.

Wie tracke ich Klicks auf klickbare Telefonnummern?

Über Google Tag Manager: Trigger auf Click URL beginnt mit tel: erstellen, GA4-Event phone_click senden. Alternativ direkt per gtag('event', 'phone_click', ...) im JavaScript. Immer auf echtem Mobilgerät testen und im GA4-Echtzeit-Bericht prüfen.

Empfehlung

JH

Jonas Hoting

Webdesigner aus Oldenburg

Ich helfe Handwerksbetrieben in Oldenburg und dem Ammerland, online sichtbar zu werden. Mit modernem Webdesign und lokaler SEO-Optimierung.

Kostenloses Erstgespräch

Jetzt Handwerker-Website anfragen

Beschreib kurz deinen Betrieb und was du brauchst. Ich melde mich innerhalb von 1 Werktag bei dir – kostenlos und unverbindlich.

Oder direkt erreichen

0176 62011102
info@netivoo.de

Deine Daten werden vertraulich behandelt und nicht an Dritte weitergegeben.