Externe Links kennzeichnen Anleitung
Wir erklären Dir, wie Du externe Links optisch hervorhebst.
Dir ist aufgefallen, dass externe Links auf Deiner Seite nicht automatisch als solche gekennzeichnet werden? Das ist richtig. Und dann ist Dir bestimmt auch aufgefallen, dass große Verlage und Webseiten externe Links aber immer als solche markieren? Auch das ist richtig. Wir zeigen Dir, wie das ziemlich schnell funktioniert und wieso Du dafür eher kein WordPress Plugin brauchst.
Wieso sollte ich externe Links hervorheben?
Besucher sollen sich auf Deiner Seite schnell zurechtfinden – das ist die kurze Antwort. Es ist ja so: Die User vertrauen Seiten eher, die eine angenehme, einladende Struktur haben, die sofort und einfach zu verstehe ist. Menü-Icons, „Speichern“ Icons usw. – all das ist fest in den Köpfen der User verankert – so auch das „externe Links“ Symbol.
Außerdem hast Du auch viele interne Links auf Deiner Seite, um den LinkJuice Deiner Seite auch für die Unterseiten zu nutzen. Der „LinkJuice“ Link aus dem vorherigen Satz leitet Dich innerhalb dieser Seite auf den entsprechenden Artikel – es ist kein externer Inhalt, sondern ein eigener Artikel, der Dir das Potential interner Links näherbringt. Externe Links jedoch werden auf nahezu allen großen Portalen und Webseiten als solche gekennzeichnet. Das schafft Vertrauen!
Externe Links in WordPress und Co. hervorheben
Hier haben wir eine kurze Anleitung für Dich, wie Du externe Links schnell und einfach als solche markierst. Hierzu musst Du lediglich den zusätzlichen CSS-Code eingeben und den Platzhalter „bemerkenswert-seo.de“ zwei Mal mit Deiner jeweiligen Domain ersetzen.
Einzige Bedingung: In diesem Beispiel muss FontAwesome bei Dir in Benutzung sein. Wenn Du kein FontAwesome nutzt, haben wir anschließend eine Alternative für Dich.
Code mit FontAwesome:
/* Externer Link mit FontAwesome */
.entry-content a[href^="http://"]:not([href*="bemerkenswert-seo.de"]):after,
.entry-content a[href^="https://"]:not([href*="bemerkenswert-seo.de"]):after {
font: normal 9px/1 'FontAwesome';
color: #334979;
content: "\f08e";
padding-left:7px;
font-size: 1em;
}
Mit FontAwesome sieht das Ergebnis dann so aus:
Du kannst das Attribut „Color“ auch rausnehmen – dann nimmt Dein Template die Standardfarbe.
Code ohne FontAwesome (HTML Zeichen):
/* Externer Link mit HTML Pfeil */
.entry-content a[href^="http://"]:not([href*="bemerkenswert-seo.de"]):after,
.entry-content a[href^="https://"]:not([href*="bemerkenswert-seo.de"]):after {
font: normal 18px/1 'Arial';
content: "➚";
color: #0A25CD;
padding-left:7px;
font-size: 1em;
}
Ohne FontAwesome würde das dann so aussehen:
Du kannst mit den Farbwerten natürlich problemlos herumspielen und auch einen anderen Icon einsetzen, sofern Du einen besser geeigneten HTML-Icon findest. Bedenke aber, dass nicht alle Icons in allen Browsern korrekt dargestellt werden können, was auch ggf. für den von uns gewählten Icon gilt.
WordPress Plugin für externe Links
Du willst doch lieber ein WordPress Plugin für Deine externen Links? Und das trotz dieser super mega tollen Anleitung? Kein Problem, wir haben hier ein Plugin gefunden:
Das Plugin hört auf den sperrigen Namen External Links – nofollow, noopener & new window und hat den Vorteil, dass Du zum Beispiel auch die „NoFollows“ setzen kannst.
Laut Hersteller hat das Plugin folgende Vorteile:
- Externe und interne Links verwalten
- Links in neuem Fenster oder Tab öffnen
- Follow oder Nofollow hinzufügen (für SEO)
- Noopener und Noreferrer hinzufügen (zur Sicherheit)
- Hinzufügen von ugc (User Generated Content) und gesponserten Werten zu rel (Google-Ankündigung)
- Linksymbole hinzufügen (FontAwesome und Dashicons)
- Setzen Sie andere Attribute wie Titel und CSS-Klassen
- Komplette Seite scannen (oder nur Beiträge, Kommentare, Widgets)
- SEO-freundlich
Das Plugin wurde, als wir den Artikel geschrieben habe, gerade vor einer Woche geupdated. Schau bitte nach, ob das aktuell immer noch der Fall ist, bzw. ob die Kommentare immer noch so positiv sind, wie aktuell.
