|), z. B. rel|noopener noreferrer oder rel|nofollow.
Kürzlich kam eine super relevante Frage auf: Wie fügt man in Elementor eigentlich Custom Link Attributes wie rel="noopener noreferrer" korrekt hinzu? Viele scheitern hier, weil sie die Standard-HTML-Syntax rel="..." verwenden, die von Elementor ignoriert wird. In diesem Beitrag zeige ich dir die einfache Methode, mit der du jedes beliebige Link-Attribut korrekt einfügst und erkläre, warum das so wichtig ist.
Wofür braucht man Custom Link Attributes?
Individuelle Link-Attribute erlauben es dir, einem Link zusätzliche Informationen oder Funktionen mitzugeben, die über das reine Linkziel (href) hinausgehen.
Häufige Anwendungsfälle sind:
- Sicherheit: Wichtige Attribute wie
rel="noopener"schützen deine Website und deine Besucher. - SEO: Attribute wie
rel="nofollow"oderrel="sponsored"geben Suchmaschinen klare Anweisungen zum Umgang mit dem Link. - Tracking & Analyse: Mit
data-*-Attributen kannst du Klicks präzise nachverfolgen (z. B. für Google Analytics oder Matomo). - Styling & Funktionalität: Sie können als Haken für spezielles CSS-Styling oder JavaScript-Interaktionen dienen.
Praxisbeispiel: Das Sicherheitsattribut rel="noopener"
Das wichtigste Attribut, das du kennen musst, ist rel="noopener noreferrer". Es schließt eine kritische Sicherheitslücke, die beim Öffnen von Links in einem neuen Tab (target="_blank") entsteht – bekannt als „Tabnabbing“.
Ohne diesen Schutz kann die neu geöffnete Website im Hintergrund auf deine Seite zugreifen und sie manipulieren (z. B. in eine Phishing-Seite verwandeln). Das noopener-Attribut kappt diese Verbindung und schützt so deine Seite und das Vertrauen deiner Nutzer.
Anleitung: Custom Link Attributes in Elementor hinzufügen
Die korrekte Eingabe in Elementor erfolgt immer nach dem Schema schlüssel|wert. Der senkrechte Strich (|) ist dabei der entscheidende Trenner.
Falsch: rel="noopener noreferrer"
Richtig: rel|noopener noreferrer
Schritt-für-Schritt-Anleitung
- Wähle in Elementor das gewünschte Widget aus (z. B. Button, Text-Link).
- Klicke in den Link-Optionen auf das Zahnrad-Symbol, um die erweiterten Einstellungen zu öffnen.
- Trage in das Feld „Individuelle Attribute“ dein gewünschtes Attribut im
schlüssel|wert-Format ein.
SCREENSHOT: Elementor Link-Optionen mit korrekt ausgefülltem Attribut-Feld
Weitere Beispiele für die Eingabe:
- Für einen Nofollow-Link:
rel|nofollow - Für Tracking:
data-event|promo-click - Mehrere Attribute: Trenne mehrere Attribute einfach mit einem Komma (
,).
Hier findest du den Originalbeitrag von Elementor zu benutzerdefinierten Attributen für Linkelemente eines Widgets.
Welchen Einfluss haben saubere Attribute auf mein SEO?
Auch wenn ein einzelnes Attribut selten ein direkter Rankingfaktor ist, senden saubere technische Einstellungen klare Qualitätssignale an Google und unterstützen dein SEO indirekt:
- Sicherheit & Vertrauen (Trust): Korrekt gesetzte Sicherheitsattribute wie
noopenerschützen deine Nutzer. Eine sichre und vertrauenswürdige Seite ist eine wichtige Grundlage für gutes E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness). - Crawl-Anweisungen: Attribute wie
nofollowodersponsoredhelfen Google, die Linkstruktur deiner Seite korrekt zu interpretieren. - Datenbasierte Strategie: Tracking-Attribute liefern dir wertvolle Daten über das Nutzerverhalten, auf deren Basis du deine SEO-Strategie optimieren kannst.
Fazit
Das Hinzufügen von Custom Link Attributes in Elementor ist verblüffend einfach, wenn man den Trick mit dem senkrechten Strich kennt. Diese Funktion gibt dir die nötige Flexibilität für professionelle Sicherheitsstandards, detailliertes Tracking und saubere OnPage-SEO. Es ist ein kleines Detail mit großer Wirkung für die technische Qualität deiner Website.
Deine nächsten Schritte:
Prüfe deine wichtigsten externen Links: Öffnen sie sich in einem neuen Tab? Falls ja, füge jetzt das rel|noopener noreferrer Attribut hinzu. Überlege danach, wo dir benutzerdefinierte Tracking-Attribute helfen könnten, das Nutzerverhalten besser zu verstehen.
