Wer am Smartphone die Nummer eines Unternehmens nicht direkt antippen kann, wischt oft schon zum nächsten Anbieter weiter. Eine klickbare Rufnummer ist daher kein optisches Extra, sondern Pflicht für jede mobile Seite. So binden Sie sie technisch sauber ein und vermeiden die typischen Stolperfallen.
Klickbare Telefonnummer auf der Website mit HTML Telefon Link einbinden
Ein HTML Telefon Link verwandelt eine reine Textnummer in einen klickbaren Anruf-Auslöser. Hinter dem unscheinbaren tel-Attribut steckt mehr Technik, als viele Webseitenbetreiber vermuten. Bei VASTCOB sehen wir in Audits immer wieder, dass selbst gut gepflegte WordPress-Seiten die Telefonnummer nur als Fließtext ausgeben. Damit verschenken Sie wertvolle Leads, gerade wenn 60 bis 80 Prozent Ihres Traffics vom Smartphone kommen. In diesem Ratgeber zeigen wir, wie Sie eine klickbare Telefonnummer richtig codieren, sie in WordPress, Elementor und Jimdo einbauen und das Tracking sauber aufsetzen.
Was ein HTML Telefon Link ist und wofür er gebraucht wird
Ein HTML Telefon Link ist ein normaler a-Link, der statt einer Webadresse das tel-Protokoll im href-Attribut nutzt. Klickt ein Nutzer auf der mobilen Seite darauf, öffnet das Smartphone direkt die Anrufmaske mit der hinterlegten Nummer. Auf dem Desktop reagieren Browser je nach installierter Software, etwa mit Skype, Teams, FaceTime oder einer Auswahl-Abfrage.
Aufbau und Funktion des tel Protokolls
Der Aufbau folgt einem einfachen Schema. Das href-Attribut beginnt mit tel und enthält danach die Rufnummer im internationalen Format ohne Leerzeichen, Klammern oder Bindestriche. Der sichtbare Linktext zwischen den a-Tags lässt sich frei wählen und unterscheidet sich oft bewusst von der reinen Ziffernfolge, etwa wenn dort die Aufforderung „Jetzt anrufen“ steht.
Unterschied zur reinen Textanzeige einer Rufnummer
Eine ungelinkte Textnummer wirkt für moderne Browser wie unverdaulicher Fließtext. Manche Mobile-Browser markieren die Ziffernfolge zwar automatisch als anrufbar, das passiert jedoch unzuverlässig und nur bei klar erkennbaren Mustern. Wer auf diesen Automatismus baut, überlässt eine der wichtigsten Conversion-Aktionen der Erkennungslogik des Endgeräts.
Warum klickbare Telefonnummern auf mobilen Websites Pflicht sind
Smartphones sind für viele Branchen längst der erste Kontaktpunkt zur eigenen Website. Wer mobil eine Dienstleistung sucht, will mit einem Daumen-Tipp den Anbieter erreichen, nicht erst die Nummer markieren, kopieren und in eine Telefon-App einfügen. Genau hier entscheidet sich, ob aus einem Besuch eine Anfrage wird.
Nutzererwartung auf Smartphones
Die Erwartung an klickbare Kontaktwege ist auf dem Smartphone heute Standard. E-Mail-Adressen werden mit mailto ausgestattet, Adressen verlinken auf Google Maps, und eine Rufnummer löst per Tipp den Anruf aus. Fehlt eine dieser Funktionen, wirkt die Seite veraltet und der Nutzer verliert Vertrauen in die Professionalität des Anbieters.
Auswirkung auf Conversion-Rate und Lead-Generierung
In unseren Conversion-Audits gehört das Nachrüsten klickbarer Telefonnummern zu den günstigsten Maßnahmen mit messbarem Effekt. Gerade in beratungsintensiven Branchen, etwa bei Anwälten, Handwerkern oder im B2B-Vertrieb, steigt die Anzahl der Anrufanfragen sichtbar an. Eine durchdachte Conversion Optimierung beginnt deshalb oft mit solchen vermeintlich kleinen Detailmaßnahmen.
So erstellen Sie einen HTML Telefon Link Schritt für Schritt
Die technische Umsetzung eines HTML Telefon Link benötigt keine spezielle Software. Sie braucht lediglich Zugriff auf den HTML-Quelltext der Seite oder ein Eingabefeld im verwendeten Editor. Wer die folgenden drei Punkte beachtet, kommt sicher zum Ziel.
Grundsyntax und Pflichtbestandteile
Der einfachste Aufbau besteht aus dem a-Tag, dem href-Wert mit tel-Prefix und dem sichtbaren Linktext. Ein funktionierendes Beispiel sieht folgendermaßen aus.
Sichtbar/er werden bei Google & Social Media?
In einem kostenlosen Strategiegespräch für datenbasiertes Online-Marketing, decken wir Ihre ungenutzten Potenziale auf, überprüfen ggf. vorhandene Anzeigenkonten, schauen uns das SEO-Ranking und die Sichtbarkeit an und prüfen was zu Ihrem Budget die passende Strategie ist und welche aktiven Maßnahmen zu mehr Anfragen oder Verkäufen führen.
✅ Mehr Sichtbarkeit & Wahrnehmung durch gezielte Platzierung
✅ Mehr Besucher > Interessenten > Kunden > Umsatz
✅ Mit SEA skalierbar Zielgruppe ansprechen
✅ Mit SEO nachhaltig agieren und wachsen
🫵 Maximale Erfolge mit unserer Hybrid-Strategie
💪 Mehr als 15 Jahre Erfahrung branchenübergreifend in über 1.000+ Projekten nachweisbar!
<a href="tel:+498231795335">+49 8231 795335</a>
Im Linktext können Sie die Nummer mit Leerzeichen formatieren, im href-Wert nicht. Diese Trennung ist der häufigste Fallstrick bei manueller Eingabe.
Internationales Format mit Ländervorwahl
Verwenden Sie die Nummer im E.164-Format mit führendem Pluszeichen und Ländervorwahl. So funktioniert der Link weltweit, auch wenn der Nutzer aus dem Ausland anruft oder in einem Roaming-Netz steckt. Die deutsche Vorwahl 49 ersetzt dabei die landesinterne Null der Ortsvorwahl.
Häufige Formatierungsfehler
Folgende Tabelle zeigt typische Fehler in der Praxis und erklärt jeweils den Grund.
| Eingabe im href | Funktioniert | Grund |
|---|---|---|
| tel:+498231795335 | Ja | Korrektes E.164-Format ohne Sonderzeichen |
| tel:08231795335 | Eingeschränkt | Funktioniert nur national, scheitert bei Roaming |
| tel:+49 (0)8231 795335 | Nein | Leerzeichen und Klammern blockieren das Protokoll |
| tel: +498231795335 | Nein | Leerzeichen direkt nach tel zerstört den Link |
| telefon:+498231795335 | Nein | Falsches Protokoll, wird nicht interpretiert |
Klickbare Rufnummer in WordPress einbinden
WordPress bietet mehrere Wege, eine klickbare Telefonnummer einzubauen. Welcher Weg der richtige ist, hängt vom Editor, vom verwendeten Theme und vom Ort der Nummer ab.
Im Block Editor (Gutenberg) per Custom HTML Block
Im Block Editor fügen Sie einen „Eigenes HTML“ Block ein und tippen den Link wie in Abschnitt drei gezeigt. Alternativ markieren Sie im Absatz-Block den gewünschten Text, klicken auf das Link-Symbol und tragen tel mit Pluszeichen und Nummer im Link-Feld ein. Beide Wege funktionieren zuverlässig ab WordPress 5.0.
Im klassischen Editor und im Theme Footer
Wer noch mit dem klassischen Editor arbeitet, wechselt auf den Text-Tab und fügt das a-Element manuell ein. Für eine in jeder Unterseite sichtbare Nummer, etwa im Header oder Footer, bearbeiten Sie die header.php oder footer.php Ihres Themes. Nutzen Sie dafür immer ein Child-Theme, sonst überschreibt das nächste Theme-Update Ihre Änderungen.
Über Shortcode oder Page Builder Widget
Viele Themes und Plugins bieten fertige Shortcodes für Kontaktinformationen, die das tel-Protokoll bereits korrekt einbinden. Falls Sie ein solches Plugin im Einsatz haben, lohnt sich der Blick in die Dokumentation. Bei individuellen Anpassungen unterstützen wir Sie als WordPress Agentur auch bei der Theme-Erweiterung und bei der sauberen Integration in bestehende Templates.
Telefon Link in Elementor, Jimdo und anderen Page Buildern
Page Builder vereinfachen den Einbau einer klickbaren Rufnummer, weil Sie das tel-Schema direkt in das Link-Feld eines Button- oder Text-Widgets eintragen. Der HTML-Code bleibt dabei im Hintergrund und der Builder kümmert sich um die korrekte Ausgabe.
Elementor Button Widget mit tel als Link
In Elementor ziehen Sie ein Button- oder Text-Widget an die gewünschte Stelle, klicken im Link-Feld auf das Schraubschlüssel-Symbol und tragen dort tel mit Pluszeichen, Ländervorwahl und Nummer ein. Das Pluszeichen wird sauber übernommen, auch wenn die Vorschau im Editor den Link nicht aktiv testen kann. Klick-Tracking lässt sich über das Feld für Custom Attributes vorbereiten.
Jimdo Telefonnummer klickbar machen
In Jimdo fügen Sie ein Schaltflächen-Element ein, wählen die Option für einen externen Link und schreiben in das URL-Feld den vollständigen tel-Wert. Manche ältere Jimdo-Versionen blockieren das Protokoll automatisch und entfernen das Pluszeichen. In diesem Fall hilft ein HTML-Block mit handgeschriebenem a-Tag, der die Sperre umgeht.
Wix, Squarespace und Webflow
Wix, Squarespace und Webflow akzeptieren das tel-Schema im Link-Dialog jedes Buttons oder Textblocks. In Webflow können Sie den Link sogar in CMS-Sammlungen dynamisch befüllen. Drei Fehler tauchen bei Page Buildern besonders oft auf.
- Leerzeichen oder Klammern im href-Wert
- Fehlende Ländervorwahl bei internationalem Traffic
- Doppelter tel-Prefix durch Auto-Vervollständigung des Builders
Klickbares Anrufverhalten testen und Tracking einrichten
Ein Link, der nicht funktioniert, ist schlimmer als gar kein Link. Deshalb gehört der Funktionstest auf realen Geräten zu jeder Implementierung, ebenso wie ein sauberes Tracking-Setup für die spätere Auswertung.
Test auf Smartphone, Tablet und Desktop
Prüfen Sie den Link mindestens auf einem iPhone mit Safari, einem Android-Gerät mit Chrome und einem Desktop mit aktuellem Browser. Auf dem Desktop verhalten sich Browser unterschiedlich. Chrome fragt nach einer Standardanwendung, Firefox bietet eine Auswahl, und Safari leitet ohne Skype oder FaceTime ins Leere. Diese Unterschiede sind kein Fehler, sondern Erwartungswert moderner Browser-Architekturen.
Click to Call Tracking in Google Analytics 4
Wer den Erfolg messen will, setzt im Google Tag Manager einen Klick-Trigger auf alle Elemente mit dem CSS-Selektor a mit href-Beginn tel. Das daraus erzeugte GA4-Event, etwa unter dem Namen phone_click, lässt sich später als Conversion markieren. So fließt jeder Klick auf eine klickbare Telefonnummer in Ihre Reporting-Kette und liefert die Datenbasis für gezielte Optimierungen. In Kombination mit einem Server-Side-Tagging-Setup vermeiden Sie zudem Datenverluste durch Adblocker.
Barrierefreiheit, SEO und strukturierte Daten bei Telefon Links
Eine klickbare Telefonnummer trägt auch zur Barrierefreiheit bei, weil sie motorisch eingeschränkten Nutzern den Anruf erleichtert. Allerdings müssen einige Regeln eingehalten werden, damit der Link den geltenden Standards genügt und gleichzeitig SEO-Wert entfaltet.
Anforderungen aus WCAG und BFSG
Die WCAG 2.2 fordert für jeden Touch-Bereich eine Mindestgröße von 24 mal 24 Pixel. Reine Icon-Links ohne sichtbaren Text benötigen außerdem ein aria-label, das die Funktion beschreibt. Seit dem 28. Juni 2025 verpflichtet das BFSG viele Unternehmen, ihre Websites barrierefrei zu gestalten. Wer seine Barrierefreiheit der Website prüfen lässt, sichert sich gegen Abmahnungen ab. Die rechtlichen Hintergründe zum BFSG helfen außerdem, den eigenen Status realistisch einzuschätzen.
Folgende Punkte sind bei klickbaren Telefonnummern unverzichtbar.
- Sichtbarer Text neben dem Icon oder klar als Telefonnummer erkennbarer Linktext
- Mindestens 24 mal 24 Pixel Touch-Fläche für ein präzises Antippen
- Ausreichender Kontrast zwischen Linktext und Hintergrund nach WCAG-Vorgaben
- Sichtbarer Fokus-Rahmen bei Tastatur-Navigation
Strukturierte Daten mit Schema.org
Suchmaschinen interpretieren eine Telefonnummer besser, wenn sie in strukturierten Daten ausgezeichnet ist. Über den Schema-Typ ContactPoint mit der Eigenschaft telephone signalisieren Sie Google und KI-Suchen, wie diese Nummer verwendet wird. Eingebettet als JSON-LD im Header der Seite ist die Auszeichnung nicht sichtbar, hilft aber bei Featured Snippets und Knowledge Panels.
Wann sich die Umsetzung durch eine WordPress Agentur lohnt
Eine einzelne klickbare Telefonnummer einbinden Sie in fünf Minuten selbst. Sobald jedoch wachsende Ansprüche an Tracking, Multi-Site oder Performance hinzukommen, lohnt sich externe Unterstützung mit Branchenerfahrung.
Typische Fälle für externe Unterstützung
Sobald mehrere Filialen, internationale Vorwahlen oder dynamische Rufnummern für Call-Tracking-Anbieter wie Matelso oder Phonalytics ins Spiel kommen, steigt die Komplexität deutlich. Auch ein BFSG-konformes Frontend, ein Multi-Site-Setup mit unterschiedlichen Landesnummern oder die Integration in ein CRM gehen über das hinaus, was Page Builder von Haus aus leisten.
Was eine Agentur konkret übernimmt
Wir kümmern uns in solchen Projekten um das saubere HTML-Markup, das Setup im Tag Manager, die GA4-Konfiguration und die Schema-Auszeichnung. Wenn Sie Telefon-Tracking in Ihre Landingpages und die gesamte Conversion-Messung integrieren wollen, unterstützen wir Sie mit der Erfahrung aus über zehn Jahren Webentwicklung und einem nachgewiesenen Track Record bei Google Partner und SEO Top 100 Projekten.
Fazit zum HTML Telefon Link
Ein HTML Telefon Link ist eines der einfachsten Mittel, um aus Website-Besuchern Anrufer zu machen. Mit der richtigen Syntax, einem internationalen Format und einer dezenten Tracking-Lösung holen Sie aus jeder Kontaktseite mehr Anfragen heraus. Wer zusätzlich die Anforderungen aus WCAG und BFSG ernst nimmt, schafft eine Basis für barrierefreie Kommunikation und damit eine zukunftssichere Lösung. So wird aus einer technischen Detailfrage ein spürbarer Hebel für die eigene Lead-Generierung.
