Automatische Kennzeichnung externer Links in Onlinedokumentation

Für Nutzer kann es hilfreich sein, schon im Voraus zu wissen, ob ein Link aus einer Dokumentation heraus auf eine externe Seite führt. Mit den Mitteln von CSS lässt sich eine Lösung implementieren, bei der alle externen Links automatisch ein spezielles Symbol erhalten.

Beispiel 1: Alle Links auf eine andere Domain erhalten ein Symbol

Im folgenden Beispiel erhalten Links dann ein Symbol, wenn Sie auf eine URL verweisen, die sich nicht auf der Domain indoition befinden:
 

Implementierung zu Beispiel 1

Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Beachten Sie dabei, dass Sie den Pfad auf das Symbol sowie in der ersten Zeile den Domain-Namen entsprechend anpassen müssen. Es reicht dabei, wenn Sie den Domain-Namen ohne Endung angeben, also beispielsweise mydomain statt mydomain.com.

a[href*="//"]:not([href*="YOUR-DOMAIN-NAME"])::after {
  content: "";
  background: url("YOUR-PATH/external-link-symbol.svg") no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
}

Die Symbole erscheinen dann automatisch bei allen betroffenen Links.

Beispiel 2: Alle Links, die ein neues Fenster oder Register öffnen, erhalten ein Symbol

Das folgende Beispiel verwendet eine etwas andere Logik als Beispiel 1 für die Entscheidung, ob das Symbol erscheint oder nicht. Hier erscheint das Symbol dann, wenn der Link ein neues Fenster oder eine neue Registerkarte öffnet (Link Target = _blank). Dies geschieht unabhängig davon, auf welchem Server die Zieladresse liegt.
 

Implementierung zu Beispiel 2

Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Beachten Sie dabei, dass Sie den Pfad auf das Symbol anpassen müssen.

a[target="_blank"]::after {
  content: "";
  background: url("YOUR-PATH/external-link-symbol.svg") no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
}

Die Symbole erscheinen dann automatisch bei allen betroffenen Links.

Beispiel 3: Variante mit Font Awesome Icon

Das folgende Beispiel verwendet dieselbe Logik wie Beispiel 2. Das Symbol erscheint also bei allen Links, die in einem neuen Fenster geöffnet werden, unabhängig davon, wo sich das jeweilige Linkziel befindet.

Anders als Beispiel 2 verwendet dieses Beispiel für das Symbol nicht eine SVG-Grafik, sondern ein Zeichen aus der Bibliothek Font Awesome. Dies hat den Vorteil, dass sich das Symbol automatisch an die jeweilige Textfarbe anpasst, wenn in Ihrer Onlinedokumentation Links in unterschiedlicher Farbe vorkommen.

Implementierung zu Beispiel 3

Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.a[target="_blank"]::after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75em;
  display: inline-block;
  text-decoration: none;
  padding-left: 0.3em;
} 

Beachten Sie, dass Sie zusätzlich noch Font Awesome in Ihre Onlinedokumentation einbinden müssen, sofern diese Bibliothek nicht bereits durch Ihr Redaktionssystem integriert wird.

Sonderfall: Extern verlinkte Bilder

Das Symbol für externe Links erscheint auch hinter einem Bild, falls das Bild mit einer externen Seite verlinkt ist. Dies ist natürlich unerwünscht.

Sollte Ihre Onlinedokumentation verlinkte Bilder enthalten, haben Sie folgende Möglichkeiten, um das Erscheinen des Symbols zu verhindern:

▪Statt das gesamte Bild zu verlinken, können Sie eine Image Map auf das Bild legen und innerhalb dieser Image Map verlinken. In diesem Fall erscheint das Symbol nicht.

▪Sie können das Bild in ein DIV-Element einschließen, für welches das Symbol deaktiviert wurde.

Beispiel:

Ergänzen Sie in Ihrem Stylesheet den zusätzlichen Style nolinkicons zum Deaktivieren des Symbols:

.nolinkicons a::after {
  content: '';
  display: none !important;
}

Setzen Sie alle Bilder (oder auch Texte), bei denen kein Symbol erscheinen soll, zwischen folgende zwei HTML-Schnipsel:

<div class="nolinkicons">

</div>

Alternativ können Sie dem Bild auch direkt die Klasse nolinkicons zuweisen, sofern Ihr Redaktionssystem dies zulässt. Oder Sie fügen generell allen Ihren Bild-Klassen die betreffenden CSS-Befehle hinzu.

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.