Kategorien
Optimierung Gestaltung Rechtliches

Verwendung von Links: eine Strategie

Der wichtigste Grund dafür, dass aus den zunächst militärischen und dann universitären Anfängen des Internet dieses gewaltige, weltumspannende Netz von Webseiten geworden ist, in dem wir alle uns mittlerweile bewegen ist: die Vernetzung! – Vernetzung entsteht aus Links, also durch Verweisen von der einen auf die andere Seite. Links sind das Salz im riesigen Suppenkessel des Internet.

Hier erfährst Du, was Du bei der Auswahl von Links berücksichtigen solltest; und wie Du Links setzt, damit Deine Besucher den Überblick behalten; und wie Du Links so gestalten kannst, dass Deine Besucher vor dem Klick wissen, wohin sie gelangen werden.

Wenn Du selbst eine Website betreibst, wirst Du zwei unterschiedliche Arten von Links selbst verwenden:

  • Interne Links, mit denen Du von einer Deiner Seiten auf eine andere Deiner eigenen Seiten verweist.
  • Externe Links, die von Deiner Seite auf fremde Inhalte verweisen.

Dass man vorsichtig sein muss mit der Verlinkung von fremden Webseiten, sollte jedem Betreiber von internetten Inhalten klar sein.¹ Und dass man sich längst nicht mehr von der eigenen Haftung für Links freikaufen kann, indem man in seinem Impressum einen pauschalen Haftungsausschluss einbindet, habe ich bereits in meinem Text über die Impressumspflicht angesprochen. Überlege deshalb sorgfältig, auf welche Webseiten Du verweisen möchtest. (Und lies im Zweifel auch den Fußnotentext.¹)

Intern vs. extern

Im Standardfall wird eine Internetseite, auf der Besucher auf einen Link klicken, durch die Seite ersetzt, auf die der Link verweist. Also auf die Zielseite des Links. Die ursprüngliche Seite verschwindet (in der Chronik des Browsers), statt dessen wird die neue Seite angezeigt.

Das kann dazu führen, dass ein Besucher, der sich über mehrere Links von Deiner Seite über verschiedene Zwischenstationen irgendwo hingeklickt hat, danach nur noch schwer auf Deine Seite zurückfindet. Selbst dann, wenn er genau das möchte: zurück zu Deinem Angebot zu kommen.

Solange Dein Besucher sich nur innerhalb der verschiedenen Seiten Deiner Internetpräsenz bewegt, wird er sich wahrscheinlich über ein Seitenmenü orientieren können. Aber sobald er Dein Angebot verlässt, ist natürlich Dein Seitenmenü nicht mehr vorhanden.

Aus diesem Grund ist die Mehrheit der Websitebetreiber dazu übergegangen, zwar Links innerhalb der eigenen Website immer im gleichen Browserfenster aufzurufen. Links auf externe Inhalte hingegen werden in neuen Browserfenstern oder Browsertabs geöffnet. So wie ich das hier auch mache: Externe Links öffnen sich in neuen Tabs, interne ersetzen die aktuelle Seite.

Nicht zuletzt weil sich diese Praxis mittlerweile eingebürgert hat und sich viele versierte Internetbenutzer daran gewöhnt haben, möchte ich Dich dazu ermutigen, diesem Quasistandard ebenfalls zu folgen.

Wie geht das?

Dazu bedarf es lediglich einer gewissen Disziplin beim Setzen von Links. Wenn Du einen Link einrichtest – Markieren der Wörter oder Bilder, von denen aus das Ziel angesteuert werden soll; Klick auf das Linksymbol im Word­Press-Text­edi­tor; einfügen des Ziels –, dann kannst Du dabei auch auswählen, ob der Link in einem neuen Fenster geöffnet werden soll.

Wenn Dir das nicht gelingen sollte, kannst Du diese Zielangabe alternativ auch über die HTML-An­sicht Deines Inhalts einfügen. Wechsle dazu auf die HTML-An­sicht und suche dort den Link: <a href="https://meinziel.de">Zielseite</a>
Diesem Code fügst Du eine Zielangabe hinzu:

<a target="_blank" href="https://meinziel.de">Zielseite</a>
***

Wenn Du jetzt noch wissen willst, wie Du externe Links kennzeichnest, damit Deine Besucher erkennen können, wo sie landen werden, – so wie ich es auf dieser Seite mache –, lies weiter. Andernfalls bist Du mit dem Thema „Strategie bei der Verwendung von Links“ durch.


Externe Links automatisch kennzeichnen

Natürlich kannst Du bei jedem Deiner externen Links nicht nur die Zielangabe „im neuen Tab“ machen sondern auch noch über die Tastatur ein Sonderzeichen ans Ende des Links setzen, damit Deine Besucher sofort wissen: Dieser Link öffnet ein neues Browserfenster!

Als Hinweiszeichen bieten sich etwa » an, oder , oder ein anderes Zeichen, für das ein sogenannter HTML-En­ti­tä­ten­code existiert. Damit kannst Du Links erzeugen, die dann etwa so aussehen:

(Der HTML-En­ti­tä­ten­code für » lautet &raquo;, der für ist &#10138;. Den Code Deiner Wahl musst Du über die HTML-An­sicht Deines Textes ans Ende des Links stellen.)

Okay, aber steht da nicht „automatisch“ in der Überschrift? – Ja, denn Du kannst solche HTML-Zei­chen auch automatisch über die Layoutsprache CSS einfügen lassen, immer wenn sich einer Deiner Links im neuen Fenster oder Tab öffnet.

Das geht am schnellsten, wenn Du unter Design > Customizer > Zusätzliches CSS etwa folgenden CSS-Code einträgst:

/* Externe Links kennzeichnen: */
.entry-content a[target="_blank"]:after {
	content: " ➚";
	font-size: 1em;
	color: grey;
}

In diesem Beispiel werden alle Links, die sich in neuen Fenstern oder Tabs öffnen und die sich im Fließtext Deines Word­Press-Bei­trags befinden – also nicht in Überschriften, Menüs, Seitenleisten oder im Fußbereich Deiner Seiten –, am Ende automatisch mit dem Zeichen gekennzeichnet.

Das sieht dann also auf Deinen Webseiten in etwa so aus:

Du sparst Dir mit den CSS-Anweisungen also das lästige manuelle Hinzufügen eines Symbols am Ende jedes externen Links.

Falls Du diese Kennzeichnung auch in anderen Bereichen Deiner Webseiten ergänzen lassen möchtest, dann solltest Du .entry-content durch einen anderen Geltungsbereich ersetzen.

***

Kennzeichnung mit anderen Elementen

In den oben stehenden Beispielen habe ich Kennzeichnungselemente verwendet, für die sogenannte HTML-En­ti­tä­ten existieren, die in den allermeisten gängigen Schriftarten verfügbar sind. Wenn Du kein HTML-Stan­dard­zei­chen findest, das Dir zusagt, kannst Du alternativ auch andere Sonderzeichen verwenden, die Du in speziellen Zeichensätzen findest. Und wenn Du völlig frei in der Gestaltung Deines Wunsch-Kenn­zeich­nungs­ele­ments sein willst, kannst Du auch beliebige Grafiken verwenden, die Du nötigenfalls selbst gestaltest.

Und das geht dann so:

Sonderzeichen aus speziellen Zeichensätzen

Ich verwende auf diesen Seiten als Kennzeichnungselement das Zeichen . Dieses Zeichen findest Du zum Beispiel in der Schriftart Fork Awesome Icons, die erst in Deine Seiten integriert werden muss, bevor Du Sonderzeichen daraus verwenden kannst. Wie diese Integration abläuft, habe ich in einem separaten Text beschrieben.

Es ist wichtig, dass Du die Anleitung zur Integration der Schriftart genau einhältst und den Erfolg auch wie beschrieben überprüfst. Sonst wird das Folgende nicht funktionieren. Aber sobald eine passende Schriftart erfolgreich in Deine Website integriert ist, kannst Du das Zeichen Deiner Wahl per CSS als Link-Kenn­zeich­nung einbinden:

/* Externe Links kennzeichnen: */
.entry-content a[target="_blank"]:after {
	color: grey;
	font-family: ForkAwesome;
	font-style: normal;
	font-size: 13px; /* an Deine Schriftgröße anpassen! */
	content: " \f08e";
}

Hinweis: Wenn an irgendeiner Stelle der Schriftartenintegration oder der CSS-Einbindung ein Fehler gemacht wird, wirst Du nicht das Ergebnis erhalten, das Du Dir wünscht. Leider ohne jede Fehlermeldung. Denn Fehler im CSS-Code erzeugen keinerlei Fehlermeldungen, so dass Du keinen Hinweis darauf erhältst, an welcher Stelle ein Problem auftritt.

***
Selbstgestaltete Grafikelemente

Ich gebe zu: Die Kennzeichnung mit Sonderzeichen aus speziellen Zeichensätzen ist nicht ganz ohne. Insbesondere Neulinge werden dabei zu kämpfen haben. Denn ein einziger kleiner Fehler im CSS-Code lässt Dich schnell im Dunklen tappen.

Einfacher ist die Kennzeichnung mit (selbstgestalteten) Grafikelementen. Das läuft dann wie folgt ab:

  1. Du gestaltest oder besorgst Dir eine kleine Grafik, die Du als Kennzeichnung hinter Deinen externen Links anzeigen lassen willst. Zum Beispiel so etwas: Externer Link
    (Bevor Du in Gewissenskonflikte gerätst: Diese Beispielgrafik habe ich selbst gestaltet, die Urheberrechte liegen bei mir. Aber ich schenke sie Dir, wenn Du sie haben willst. Nur zu.)
  2. Du lädst die Grafik in Deine WordPress-Installation hoch. Entweder per Word­Press-Me­dien­up­load oder per FTP in ein Verzeichnis Deiner Wahl.
  3. Du integrierst die Grafik per CSS in Deine Webseiten:
/* Externe Links kennzeichnen: */
.entry-content a[target="_blank"]:after {
	margin-left: 4px; /* Abstand zum Linktext */
	content: "";
	display: inline-block;
	width: 12px; /* Anzeigebreite der Grafik */
	height: 12px; /* Anzeigehöhe der Grafik */
	background: url( "/wp-content/uploads/2023/05/2023-03-24-Externer-Link-32x32-1.png"
) no-repeat 0 0;
	background-size: 12px 12px; /* Anzeigebreite und -höhe der Grafik */
}

Der Background-URL muss natürlich an die Adresse Deiner Grafik angepasst werden. Das würde dann auf den Webseiten so aussehen:

Ja, das ist technisch sicher einfacher als die Kennzeichnung mit Sonderzeichen aus irgendwelchen Schriftarten. Aber es gibt dabei leider ein paar Wermutstropfen:

  1. Grafiken benötigen mehr Zeit zum Laden als Sonderzeichen. Auch wenn sie noch so klein sind. Deshalb wird Deine Seite beim Einsatz einer Grafik ein kleines bisschen langsamer. Das lässt sich allerdings verkraften.
  2. Grafiken sind unveränderbar. Soll heißen: Wenn Du ein blaues Grafiksymbol verwendest, wird es immer blau sein. (Sonderzeichen hingegen lassen sich farblich ganz einfach an das Farbschema Deiner Website anpassen.)
  3. Die Qualität der Anzeige von Grafiken ist abhängig vom Hintergrund. Eine Grafik, die für helle Hintergründe gestaltet wurde, kann vor dunklen Hintergründen an den Rändern merkwürdig aussehen.

Du musst selbst entscheiden, wieviel Aufwand Du in ein derart winziges Detail Deiner Seitengestaltung stecken willst.

***

Schritt für Schritt: Der oben stehende Text ist ein Ratschlag, der an 12.Stelle der logischen Reihenfolge bei der Einrichtung einer Word­Press-In­stal­la­tion steht. Die komplette Reihenfolge zweckmäßiger Aktionen findest Du in meinem Inhaltsverzeichnis. Wenn Du wissen möchtest, welche Schritte direkt vor oder nach diesem Ratschlag sinnvoll sind, findest Du hier Vorgänger- und Nachfolgebeitrag:


Fußnote:

¹Verlinken auf rechtswidrige Inhalte kann dazu führen, dass der Verlinkende haftbar gemacht wird. Sofern dem Anbieter beim Setzen des Links bekannt und ersichtlich ist, dass er auf eindeutig verbotenen Content verlinkt, ist er auch rechtlich dafür verantwortlich – unter Umständen sogar nach den Vorgaben des Strafrechts. Ich kann und darf keine Rechtsberatung anbieten, aber doch ein paar Beispiele dafür, welche Inhalte von den Strafverfolgungsbehörden als rechtswidrig eingestuft werden:

  • Aufforderung und Anleitung zu Straftaten
  • Beleidigungen und Herabwürdigung, Rufschädigung, üble Nachrede, Verleumdung
  • Botschaften und Vertreter verfassungswidriger Organisationen
  • Ethnische Diskriminierung und Rassismus
  • Gewaltdarstellung, Gewaltverherrlichung, Gewaltverharmlosung im Sinne des Jugendschutzes und des Schutzes der Menschenwürde
  • Glückspiel, auch dann, wenn unklar ist, ob der Anbieter eine entsprechende Lizenz besitzt
  • Hasspostings und Hetze
  • Leugnen des Holocaust und Verherrlichung des Naziregimes
  • Pornografie
  • Verkauf von nicht zugelassenen Medikamenten
  • Verunglimpfung des Staates, seiner Symbole oder seiner Verfassungsorgane

Bedenke dies unbedingt, bevor Du Links auf Webseiten anderer in Deine eigenen Seiten einbindest. Und hole im Zweifel unbedingt die Expertise eines juristischen Beraters ein.

Von Ulf Brossmann

Betreiber von und Autor der Beiträge auf WordPress fassbar. Eine Kurzbiografie von Ulf findest Du am unteren Ende der Seite über diese Website. Hier folgen nun alle Artikel, die Ulf bisher verfasst hat, in umgekehrt chronologischer Reihenfolge, also der neuste zuoberst:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert