Eine klickbare Telefonnummer direkt im Joomla-Hauptmenü gehört zu den unauffälligsten und gleichzeitig wirksamsten Conversion-Hebeln auf einer KMU-Webseite. Wer mit dem Smartphone surft und im Menü die Telefonnummer sieht, tippt sie einmal an und ist im Anruf - ohne die Kontakt-Unterseite suchen zu müssen, ohne Copy-and-Paste, ohne Frust. Diese Anleitung zeigt dir, wie du das in Joomla 4 und Joomla 5 in unter fünf Minuten umsetzt und welche Details dabei wirklich zählen.
Der Artikel hier ist seit 2017 online und wurde 2026 grundsaniert. Damals ging es um Joomla 3, die Bedienlogik der neueren Versionen ist ähnlich, aber die UI hat sich an einigen Stellen verändert. Hinzu kommen heute Themen, die 2017 noch keine Rolle spielten: das tel-Schema gemäß RFC 3966, sauberes Conversion-Tracking, eine WhatsApp-Click-to-Chat-Variante und ein paar Worte zur Barrierefreiheit.
Warum eine klickbare Nummer im Menü?
Untersuchungen rund um lokale Webseiten zeigen seit Jahren das gleiche Muster: Besucher, die per Smartphone kommen, wollen schnell eine Aktion ausführen - meistens Anrufen oder eine Wegbeschreibung öffnen. Wenn deine Kontaktdaten erst über den Footer, eine Untermenü-Ebene oder ein Kontaktformular zu erreichen sind, verlierst du genau die Conversions, die du am dringendsten brauchst. Eine Telefonnummer im Hauptmenü ist auf jedem Endgerät sofort sichtbar und auf dem Handy nur einen Tap entfernt.
Dazu kommt: die Nummer im Menü signalisiert auch dem Schnell-Scanner, dass du erreichbar bist. Selbst wer nicht sofort anruft, behält die Information im Kopf. Bei Handwerker-Webseiten, Arztpraxen, Restaurants und kleinen Beratungs-Anbietern macht das oft den Unterschied zwischen "wirkt seriös" und "wirkt halb verlassen".
Schritt für Schritt: Menüpunkt in Joomla anlegen
Voraussetzung ist ein bestehendes Hauptmenü und Admin-Zugriff. Die folgenden Schritte gelten für Joomla 4 und Joomla 5 - in Joomla 3 funktioniert es analog, die Beschriftungen heißen nur teilweise anders.
- Im Administrationsbereich auf Menüs › Hauptmenü wechseln und über den Button Neu einen neuen Menüpunkt anlegen.
- Als Titel trägst du den sichtbaren Text ein. Sinnvolle Varianten: die Nummer im üblichen Lesemuster wie 0345 12345 67, oder ein klarerer Call-to-Action wie Jetzt anrufen oder 0345 12345 67 anrufen. Beide Varianten haben ihre Berechtigung - die Nummer schafft Vertrauen, der CTA erhöht die Klickrate.
- Beim Menüpunkt-Typ wählst du Systemlink › Externe URL. Joomla nimmt damit den Wert aus dem Link-Feld ungefiltert in die Ausgabe.
- Im Feld Link trägst du die Telefonnummer im tel-Schema ein, ohne Leerzeichen und ohne Sonderzeichen:
tel:+491234567890. Detail-Erklärung dazu im nächsten Abschnitt. - Optional: unter Linkattribute kannst du eine eigene CSS-Klasse setzen, zum Beispiel
menu-tel. Diese Klasse lässt sich im Template gezielt formatieren oder mit einem Icon versehen. - Menüpunkt speichern, Cache leeren über System › Cache leeren, fertig.
Beim nächsten Aufruf der Webseite taucht der Eintrag im Menü auf. Auf einem iPhone, Android-Smartphone oder einem Mac mit FaceTime startet ein Tap auf den Eintrag direkt den Wählvorgang. Auf Desktop-Rechnern öffnet sich je nach Setup Skype, Microsoft Teams oder ein Software-Telefon. Wer nichts davon installiert hat, sieht eine Browser-Nachfrage zur App-Auswahl - das ist Browser-Verhalten und kein Joomla-Bug.
Das tel-Schema korrekt aufbauen
Die Notation hinter dem tel-Doppelpunkt folgt RFC 3966 und orientiert sich an der internationalen Telefon-Norm E.164. Drei Regeln genügen für die Praxis:
- Plus und Landesvorwahl statt führender Null: aus 0345 12345 67 wird +493451234567. Das macht die Nummer wählbar, egal aus welchem Land der Besucher kommt.
- Keine Leerzeichen, keine Trennzeichen: Bindestriche, Klammern, Schrägstriche - alles raus aus dem href. Die anzeigende Beschriftung darf weiter Leerzeichen enthalten, der Link nicht.
- Durchwahlen direkt anhängen: wenn deine Telefonanlage die Durchwahl im DTMF-Code annimmt, kannst du sie ebenfalls einfach ohne Trenner anhängen. Manche Telefonanlagen verlangen ein Komma als Pause vor der Durchwahl, das geht mit
tel:+493451234567,123.
Im fertigen Quellcode sieht das dann so aus:
<a href="tel:+493451234567" class="menu-tel">
0345 12345 67
</a>
Das Trennzeichen im sichtbaren Text dient der Lesbarkeit, der href bleibt sauber für den Browser. Genau diese Trennung ist der Punkt, an dem viele Anfänger stolpern.
Telefon-Icon ergänzen
Ein kleines Hörer-Symbol vor dem Text macht den Eintrag visuell zur Aktion. Zwei Wege, die beide ohne Bilddatei auskommen:
Variante 1 - FontAwesome: wenn dein Template ohnehin FontAwesome lädt (in vielen Joomla-Templates Standard), reicht ein Span mit Klasse fa-solid fa-phone im Template-Override oder direkt im Menü-Titel. Beachte: Joomla 4 und 5 nutzen FontAwesome 5/6, die Klassen heißen fa-solid statt früher fas.
Variante 2 - Inline-SVG per CSS: wenn du kein FontAwesome haben willst, blendet dieses CSS ein kleines Telefon-Icon vor dem Menüpunkt mit der Klasse menu-tel ein. Der SVG-Code steckt direkt im CSS, keine Extra-Datei nötig:
.menu-tel::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
margin-right: 0.4em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21c.28-.27.36-.66.25-1.01A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21c.28-.27.36-.66.25-1.01A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
}
Das CSS gehört in dein Template-Custom-CSS (in Joomla unter System › Templates › user.css oder template-spezifisch). Die Farbe übernimmt das Icon automatisch von der Schriftfarbe des Menüs.
Conversion-Tracking für Anrufe
Wenn du Google Analytics 4 oder Matomo nutzt, lässt sich der Telefon-Klick als Conversion-Event tracken. Damit weißt du, wie viele Anrufe deine Webseite tatsächlich auslöst:
<a href="tel:+493451234567"
class="menu-tel"
onclick="gtag('event','call_click',{event_category:'contact'});">
0345 12345 67
</a>
Bei Matomo entsprechend mit _paq.push(['trackEvent','contact','call_click']); im onclick-Attribut. Die Event-Konfiguration im jeweiligen Tool sollte den Event dann als Conversion zählen.
WhatsApp als Alternative
Bei jüngeren Zielgruppen oder international ausgerichteten Webseiten ist WhatsApp oft die bessere Schwelle zur Kommunikation. Das funktioniert nach demselben Schema wie der tel-Link, nur mit der WhatsApp-Click-to-Chat-URL:
<a href="https://wa.me/493451234567" target="_blank" rel="noopener">
WhatsApp-Nachricht senden
</a>
Wichtig: die Nummer ohne Plus und ohne Leerzeichen. Du kannst optional einen vorgefüllten Text mit ?text=Hallo anhängen, dann öffnet sich der Chat mit einem Standard-Text. Praktisch für Themen-Beratungen, Reservierungen oder Service-Anfragen.
Barrierefreiheit und Lesbarkeit
Drei Kleinigkeiten machen den Eintrag wirklich barrierearm:
- aria-label für Screenreader:
aria-label="0345 12345 67 anrufen". Damit kündigt der Screenreader die Aktion korrekt an. - Sichtbarer Hinweistext bei reinem Icon: wenn du nur das Hörer-Symbol nutzt und keinen Text, brauchst du zusätzlich ein
visually-hidden-Span mit der Nummer. Sonst wissen Tastatur-Nutzer nicht, was gleich passieren wird. - Ausreichender Klickbereich auf Touchgeräten: mindestens 44x44 Pixel laut WCAG. Bei Menüs mit kleiner Schrift hilft
padding: 0.6em 0.8em;auf dem Eintrag.
FAQ
Funktioniert der tel-Link auch unter Joomla 3 noch?
Ja. Joomla 3 hat denselben Mechanismus über Menüpunkt-Typ Externe URL. Die Bedien-Beschriftungen heißen teilweise anders, aber Funktionalität und Resultat sind identisch.
Was tun, wenn der Link nicht klickbar wird?
Drei häufige Ursachen: Joomla hat den Cache nicht geleert (zuerst System-Cache leeren), das Template hat einen URL-Sanitizer der tel-Links als unsicher behandelt (selten, aber kommt vor) oder du hast Sonderzeichen im Link drin, die der Browser nicht akzeptiert. Quelltext in den Entwicklertools des Browsers prüfen.
Brauche ich für mehrere Telefonnummern mehrere Menüpunkte?
Ja. Pro tel-Link einen Menüpunkt. Bei Filialstrukturen lohnen eher Untermenüs nach Standort oder eine eigene Kontakt-Unterseite mit der Liste aller Nummern.
Funktioniert das auch im Footer oder in der Seitenleiste?
Ja. Der tel-Link funktioniert überall im HTML. In Joomla kannst du ihn als Menü-Eintrag in jedem beliebigen Menü unterbringen oder direkt in einem Custom-HTML-Modul setzen.
Ist tel: oder callto: besser?
Eindeutig tel:. Das callto:-Schema war eine Skype-spezifische Notation und wird heute nur noch von wenigen Anwendungen verstanden. Tel: ist der offizielle Standard nach RFC 3966 und funktioniert mit allen modernen Smartphones und Desktop-Telefonie-Apps.
Wie tracke ich Anrufe pro Quelle?
Pro Marketing-Kanal eine eigene Rufnummer einrichten (Call-Tracking-Anbieter wie matelso, AnyTrack oder die deutsche Lösung von 1plus bieten dynamisches Number-Insertion). Die Nummer wird beim Aufruf der Seite kanalabhängig getauscht, der Anruf landet trotzdem bei dir. Aufwändig, lohnt sich aber ab gewissen Werbe-Budgets schnell.
Quellen
Verwandte Artikel
- Joomla index.php aus URLs entfernen - der Klassiker bei jeder neuen Joomla-Installation
- Redirect-Checker - falls dein tel-Link versehentlich umgeleitet wird
- Meta-Tag-Checker - prüft auch, ob das tel-Link-Markup im HTML landet
Kommentararchiv 1
Ein Leser hat sich 2017 bedankt und nach der korrekten Schreibweise bei Rufnummern mit Durchwahl gefragt. Die Antwort ist heute dieselbe: alles in einer Zeile, ohne Leerzeichen, ohne Sonderzeichen, Durchwahl direkt anhängen.