Externe Links markieren – CSS Quick-Tip

Auf vielen Seiten hängt externen Links das Attribut target="_blank" an, was bewirkt, dass sich diese Links in einem neuen Fenster oder Tab öffnen. Bis heute ist diese Vorgehenweise von den einen bejubelt und von den anderen verpöhnt, denn es gibt sowohl Vor- als auch Nachteile.

In diesem Artikel will ich Dir deshalb eine schöne Alternative dazu präsentieren. Wir werden einfach alle externen Links visuell von den internen unterscheiden.

Zunächst ist vielleicht interessant, warum die Verwendung von target="_blank" so umstritten ist. Auf der einen Seite steht der klare Vorteil, dass der Nutzer so unsere Seite nicht so schnell verlässt. Wenn ein Besucher auf einen externen Link klickt und ihm der externe Inhalt gefällt, ist die Wahrscheinlichkeit, dass er zurück auf unsere Seite kommt, sehr gering. Wurde die externe Seite jedoch in einem neuen Fenster geöffnet, kehrt der Nutzer automatisch wieder auf unsere Seite zurück, wenn er die externe Seite schließt.

Allerdings dürfen wir hier die Nachteile nicht vergessen! In den Augen vieler ist die Nutzung von target="_blank" eine direkte Manipulation des Nutzers, denn er kann hier nicht selbstständig entscheiden, ob er den Link in einem neuen Fenster öffnen möchte oder nicht. Außerdem kommt noch erschwerend hinzu, dass weniger erfahrene Internetnutzer eventuell gar nicht mit dem Browsen in mehreren Tabs oder Fenstern vertraut sind. Wenn sie dann auf einen Link mit target="_blank" klicken, funktioniert aus ihrer Sicht der Zurück-Button des Browsers nicht und sie wissen eventuell nicht, wie sie auf Deine Seite zurück kommen.

Ich will mich hier gar nicht direkt positionieren, denn mir passiert es oft genug, dass ich trotzdem wieder ein target="_blank" platziere. Ich möchte Dir lediglich eine gute Alternative hierzu bieten. Warum markieren wir nicht einfach alle externen Links und lassen den Besucher selbst entscheiden, ob er unsere Seite verlassen will oder nicht.

Das beste daran ist, dass wir diese Kennzeichnung nur einmal im CSS-Code vornehmen müssen, unsere Links bleiben dabei unberührt. Wir müssen uns in Zukunft also keine Gedanken mehr um die Auszeichnung externer Links machen.

Nun aber endlich zum CSS-Code:

a[href^="http:"]:after, a[href^="https:"]:after
{
	content: url(../images/external.png);
	vertical-align: bottom;
	padding-left: 3px;
}

a[href^="https://advitum.de"]:after, a[href^="https://advitum.de"]:after
{
	content: "";
	padding: 0px;
}

In der ersten Anweisung hängen wir allen Links, deren URL mit http: oder mit https: anfängt, eine kleine Grafik an, das kann im Grunde irgendein kleines Icon sein, das dem Nutzer begreiflich macht, dass dieser Link zu einer externen Seite führt. Die meisten Links, die mit http: oder https: beginnen, sind externe Links, allerdings könnte es ja auch passieren, dass wir einen internen Link auch als absoluten Link mit http: und Domain eintragen. Das passiert zum Beispiel häufig, wenn wir ein Content-Management-System gebrauchen. Deshalb wird im zweiten Schritt bei allen Links, die mit unserer eigenen Domain (in meinem Fall natürlich advitum.de) anfangen, das Icon wieder entfernt.

Schon sind wir fertig. Alle externen Links tragen nun das kleine Icon. Natürlich muss die Unterscheidung nicht unbedingt über ein Icon erfolgen, eine andere Schriftfarbe o.Ä. könnte auch schon funktionieren, was sich genau so leicht umsetzten ließe, wie das kleine Icon im obrigen Beispiel.

Ich hoffe, dieses kleine Tutorial hat Dir etwas geholfen, denn nun kannst Du selbst entscheiden, wie Du auf deiner Seite vorgehen willst. Ich wünsche Dir viel Spaß beim Pflegen Deiner eigenen Internetseite!