Links setzen

Durch das Einfügen von Links verknüpfen Sie die Seiten Ihres Webauftritts untereinander oder mit anderen Webauftritten. Links zeigen den Besucher an, dass zu einem Thema oder Stichwort weitere Informationen an anderer Stelle zu finden sind. Sie können mit TYPO3 an verschiedenen Stellen Links auf Seiten oder Dateien Ihrer oder externer Webauftritte sowie klickbare E-Mail-Adressen anlegen.

Aus Sicht der Barrierefreieheit und Suchmaschinenoptimierung ist es sehr wichtig, die Art des Links richtig zu bestimmen (interner Link, externer Link, File oder E-Mail).

Automatische Verlinkung im RTE

Der Rich Text Editor erzeugt bei Eingabe eines Textes, der grob einer Internet- oder Email-Adresse ähnelt, automatisch einen entsprechenden Link. Falls das im Einzelfall nicht sinnvoll ist, können Sie den Link mit Remove link entfernen.

Aussagekräftige Linktexte verfassen

Verlinken Sie immer aussagekräftige Begriffe oder Wortgruppen. Gut geeignet ist der Titel des verlinkten Dokumentes oder der verlinkten Website. Ziel und Zweck eines Links müssen immer aus dem Linktext selbst ersichtlich sein.

In den folgenden beiden Beispiele ist der verlinkte Text jeweils mit eckigen Klammern markiert.

Falsch: Weitere Informationen finden sie [hier].
Richtig: Weitere Informationen zum [Dialogorientierten Serviceverfahren – DoSV].

Falsch: [Weitere Informationen]
Richtig: Für weitere Informationen gehen Sie zur Seite [Bachelorstudiengang Schritt für Schritt].

Vermeiden Sie nur Worte wie „hier“ oder „mehr“ zu verlinken. Screenreader-Nutzer lassen sich oft nur die Linktexte vorlesen. Ohne aussagekräftigen Text, müssen sie sich zusätzlich den umliegenden Text vorlesen lassen. Ganz besonders schwierig wird es, wenn mehrere Links hintereinander einfach nur mit „Hier“ bezeichnet wurden.

Aussagekräftige Linktexte verbessern die Benutzbarkeit ihrer Website für alle Nutzer und die Indizierung durch Suchmaschinen wie Google. Der Linktext wird von der Suchmaschine bei der Bewertung des verlinkten Inhalts als Keyword (Schlagwort) behandelt.

"Link Browser" aufrufen

Dieser Dialog erscheint in einem Pop-up-Fenster. Je nach Kontext kann er etwas anders aussehen. Die Felder für zusätzliche Link-Parameter sind manchmal oben und manchmal unten, und nicht immer sind alle, der im Folgenden beschriebenen, Reiter vorhanden.

… im Rich-Text Editor (RTE)

Um einen Textabschnitt im RTE zu verlinken, gehen Sie wie folgt vor:

  • Markieren Sie den Text, der anklickbar werden soll
  • Klicken Sie auf das Symbol Link (Bild 1)

Um einen vorhandenen Link zu bearbeiten oder zu entfernen, platzieren Sie den Cursor in den Link und klicken dasselbe Icon.

Zusätzlich gibt es die schnellere Möglichkeit mit dem "Unlink"-Button, der einen gesetzten Link sofort entfernt.

… bei Überschriften und Bildern

Sie können Überschriften und Bilder mit einem Link versehen. Den Link-Dialog rufen Sie mit dem Symbol ganz rechts neben dem jeweiligen Link-Feld auf (Bild 2 und 3).

Achten Sie auf einen aussagekräftigen Linktext bei Bildern. Nutzen sie die Alternativtext-Funktion des Bildes für aussagekräftige Linktexte.

Links als Nutzer erkennen

Pfeile bei verlinkten Bildern

Als Seitenbesucher möchten man möglichst schnell erkennen, welche Elemente verlinkt sind. Aus diesem Grund werden Links im Fließtext unterstrichen und Bilder mit einer Verlinkung erhalten ein kleines Pfeil-Symbol.

In Fällen, wo eine Verlinkung impliziert ist, z. B. bei Logos oder Icons, sind diese Pfeile überflüssig oder gar störend. Sie können die Überlagerung ausschalten, wenn Sie im Link-Dialog im Feld CSS-Class den Wert „no-hint“ (ohne die Anführungszeichen) eintragen.

Links in Übeschriften

Überschriften stechen an sich schon aus dem normalen Text hervor, da sie einen neuen Gedanken einleiten. Damit der Leser erkennt, dass sich auf der Überschrift ein Link mit weiteren Informationen befindet, werden sie mit einem Pfeil nach dem Text markiert. Als Beispiel finden Sie mit folgendem Link:

Weitere Informtionen zu Überschriften

Links löschen: „Remove Link“

Diese Auswahlmöglichkeit (Bild 4) erscheint nur, wenn Sie im RTE den Cursor in einen vorhandenen Link setzen und das Link-Icon klicken. Die Auswahl des Feldes entfernt den Link.

Der Rich Text Editor ist so konfiguriert, dass bei Eingabe eines Textes, der grob einer Internet- oder Email-Adresse ähnelt, automatisch ein entsprechender Link erzeugt wird. Falls das im Einzelfall nicht sinnvoll ist, können Sie den Link mit Remove link entfernen.

Link auf interne Seite: Reiter „Page“

In Bild 5 sehen Sie die Seiten Ihres TYPO3-Webauftritts in einer Baumstruktur. Die schwarzen Dreiecke blenden Unterseiten ein oder aus. Sie können die Zielseite durch Mausklick auswählen.

Oben gibt es Felder für zusätzliche Link-Parameter:

  • Target:
    Mit dem Dropdown-Menü rechts (Bild 5; rote Rahmen) beeinflussen Sie, wie ein Link geöffnet wird: Wenn Sie das Feld leer lassen oder "Top" auswählen, öffnet der Link im selben Fenster. Wenn Sie „New window“ wählen, öffnet sich die Seite in einem neuen Fenster bzw. Tab. Für Links auf interne Seiten ist dies jedoch etwas unsinnig.
    Ändern Sie die Standardeinstellung nur in dringenden Fällen. Das Erzwingen eines neuen Fensters/ Tabs wird von Nutzern als störend empfunden. Aus barrierefreier Sicht stellt das Öffen in einem neuen Fenster/Tab eine zusätzliche Hürde dar.
  • Title:
    Wir empfehlen das Feld Title frei zu lassen (Hintergrundwissen zum Feld Title). Die Verlinkungsfunktion von TYPO3 sorgt an dieser Stelle für einen aussagekräftigen Linkttext.

Link direkt zu einem Inhaltselement einer internen Seite

Sie können einen internen Link setzen, bei dem man direkt zu einem bestimmten Inhaltselement springt; der Browser scrollt sozusagen zu dem Zielelement. Dazu müssen Sie zunächst die Inhaltselemente der Zielseite einblenden, indem Sie auf den kleinen schwarzen Pfeil neben dem Titel klicken (Bild 5; grüne Rahmen). Anschließend klicken Sie auf das Zielelement. (Es kann sein, dass Sie scrollen müssen, um die Inhaltselemente zu sehen.)

Link auf interne Datei: Reiter „File“

Unter dem Reiter File können Sie eine Datei (Bild oder Download-Datei) auswählen, die sich in der Filelist Ihres Webauftritts befindet. Klicken Sie auf den entsprechenden Ordner und dann auf die gewünschte Datei. Oben gibt es Felder für zusätzliche Link-Parameter:

  • Target:
    Mit dem Dropdown-Menü rechts (vgl. Bild 5; rote Rahmen) beeinflussen Sie, wie ein Link geöffnet wird: Wenn Sie das Feld leer lassen oder "Top" auswählen, öffnet der Link im selben Fenster. Wenn Sie „New window“ wählen, öffnet sich die Seite in einem neuen Fenster bzw. Tab.
    Ändern Sie die Standardeinstellung nur in dringenden Fällen. Das Erzwingen eines neuen Fensters/ Tabs wird von Nutzern als störend empfunden. Aus barrierefreier Sicht stellt das Öffen in einem neuen Fenster/Tab eine zusätzliche Hürde dar.
  • CSS-Class:
    Mit dem Dropdown-Menü wählen Sie das Symbol aus, das hinter dem Link angezeigt wird, um zu verdeutlichen, um welche Art von Link es sich handelt. Für einen Link auf die Filelist ist nur "download" möglich.
  • Title:
    Wir empfehlen das Feld Title frei zu lassen (Hintergrundwissen zum Feld Title). Die Verlinkungsfunktion von TYPO3 sorgt an dieser Stelle für einen aussagekräftigen Linkttext.

Link auf andere Webauftritte: Reiter „External URL“

Im Reiter External URL legen Sie Links auf externe Webauftritte an. Die Adresse fügen Sie in das Feld URL ein. Die weiteren Parameter:

  • Target:
    Mit dem Dropdown-Menü rechts (vgl. Bild 5; rote Rahmen) beeinflussen Sie, wie ein Link geöffnet wird: Wenn Sie das Feld leer lassen oder "Top" auswählen, öffnet der Link im selben Fenster. Wenn Sie „New window“ wählen, öffnet sich die Seite in einem neuen Fenster bzw. Tab. Ändern Sie die Standardeinstellung nur in dringenden Fällen. Das Erzwingen eines neuen Fensters/ Tabs wird von Nutzern als störend empfunden. Aus barrierefreier Sicht stellt das Öffen in einem neuen Fenster/Tab eine zusätzliche Hürde dar.
  • CSS-Class:
    Mit dem Dropdown-Menü wählen Sie das Symbol aus, das hinter dem Link angezeigt wird, um zu verdeutlichen, um welche Art von Link es sich handelt. Für einen Link einer externen Seite ist nur "external-link" möglich.
  • Title:
    Wir empfehlen dringend das Feld Title frei zu lassen (Hintergrundwissen zum Feld Title). Die Verlinkungsfunktion von TYPO3 sorgt an dieser Stelle für einen aussagekräftigen Linkttext.

Vermeiden Sie es, neue Fenster zu öffnen!

Ein neues Fenster oder einen neuen Tab zu öffnen, nur weil der Link zu einem anderen Webauftritt führt, ist aus verschiedenen Gründen nicht zu empfehlen:

  • Zugänglichkeit: solche Links sind nicht barrierefrei
  • Usability: Verwirrt unerfahrene Benutzer, erst recht wenn die Zielseite ein ähnliches Layout wie Ihre hat (was bei TUM-Webauftritten häufig ist)
  • Höflichkeit: Es nervt erfahrene Benutzer

E-Mail-Link einfügen: Reiter „Email“

Mit diesem Reiter fügen Sie einen Link auf eine E-Mail-Adresse ein. Die Adresse geben Sie in das Feld Email address ein. Es gibt nur noch einen zusätzlichen Parameter:

  • Title:
    Wir empfehlen das Feld Title frei zu lassen (Hintergrundwissen zum Feld Title). Die Verlinkungsfunktion von TYPO3 sorgt an dieser Stelle für einen aussagekräftigen Linkttext.

Icons hinter Links setzen

Diese Einstellung wird vorgenommen, nachdem Sie eine Datei verlinkt haben. Markieren Sie den Link und wählen Sie in der Menüleiste des RTE das Feld "Formating Styles". Wenn eine Datei zum herunterladen oder ein Link eine Authentifizierung erfordert, wählen Sie Locked-URL. Das Symbol wird automatisch am Ende des Links angezeigt (Bild 9).

ACHTUNG: DAS SYMBOL FÜR LOCKED-URL WIRD NICHT MEHR AUTOMATISCH HINZUGEFÜGT.

Inhaltselemente, die automatische Verlinkungen erzeugen

Viele Inhaltselemente von TYPO3 erzeugen automatische Verlinkungen und können Ihnen so viel Arbeit abnehmen. Die Wichtigsten sind:

"To top"-Link

„To top“-Links sind Links, die zum Anfang der Seite führen. Das erspart das Zurückscrollen und ist vor allem bei längeren Seiten nützlich.

Seit TYPO3 8 sind „To top“-Links standardmäßig auf jeder Page eingebaut: Sobald Sie beginnen nach oben zu scrollen wird unten rechts ein Pfeil eingeblendet, der Sie wieder zum Anfang der Seite führt.

Probieren Sie es einfach aus.