Der TYPO3 link Tag

Dieses Tutorial beschreibt die Bestandteile des TYPO3 link Tags bei der Verwendung in Inhaltselementen und FCEs.

Möchte man innerhalb eines Inhaltselements einen Link (HTML a href Tag) zu einer URL setzen, gibt es in TYPO3 einen eigenen Tag namens link. Damit lassen sich sowohl Links zu einer internen Seite als auch zu einer externen URL oder einer E-Mail-Adresse setzen.

Der generelle Aufbau des link-Tags (für alle drei Varianten) ist folgender:

<link Ziel target-Attribut CSS-Klasse title-Attribut>Linktext</link>

Dadurch wird ein a href-Tag dieser Form erzeugt:

<a href="(umgewandelte) Ziel-URL" class="CSS-Klasse" target="target-Attribut" title="title-Attribut">Linktext</a>

Ein link-Tag kann in innerhalb von Standard-Inhaltselementen (Text, Text mit Bild etc.) oder auch Flexible Content Elements vorkommen. Er wird analog zu anderen Tags der Beschreibungssprache HTML durch einen eindeutigen Bezeichner (hier: "<link") eingeleitet und mit einem weiteren Bezeichner (hier: "</link>") abgeschlossen. Die einzelnen Bestandteile werden nun beschrieben.

Das Ziel eines Links ist der einzige Parameter, der in einem link-Tag angegeben werden muss, alle anderen (target, class und title) sind optional. Je nach Typ des Links (intern, extern, E-Mail) wird als Linkziel etwas anderes angegeben:

Um einen Link auf eine andere Seite innerhalb des TYPO3-Systems zu setzen, gibt man die eindeutige ID (uid) der Zielseite an. TYPO3 wandelt diese uid anschließend in eine gültige URL um. Dabei spielt es keine Rolle, ob SimulateStaticDocuments, realurl oder keines von beiden verwendet wird.

Diese Angabe erzeugt einen Link auf die Seite mit der UID 42:
 
<link 42>Linktext</link>

Es ist wichtig, für interne Links immer die eindeutige ID zu verwenden, da sich diese niemals ändert. Das hat den Vorteil, dass sich nach einer Änderung des Alias oder Seitentitels der Zielseite automatisch alle Links auf diese Seite ändern.

Die ID einer Seite wird angezeigt, wenn man mit der Maus über das Seitensymbol im Seitenbaum fährt - oder ganz praktisch: UIDs im TYPO3 Seitenbaum anzeigen.

Möchte man direkt auf einen Anker verlinken. der innerhalb der Zielseite definiert ist, so gibt man den eindeutigen Bezeichner des Ankers (bzw. Inhaltselements) direkt hinter der UID an und trennt beide Angaben durch ein Hash-Zeichen (#, Doppelkreuz). Bei einem Sprunglink auf die selbe Seite lassen Sie einfach die ID der Seite weg.

Die ID eines Inhaltselements wird angezeigt, wenn man mit der Maus über das Symbol des Elements, z.B. im TYPO3 Listenmodul fährt.

Verlinkung auf den Anker "4711" in der Seite mit UID 42:
 
<link 42#4711>Linktext</link>

Wird das optionale target-Attribut nicht angegeben, so setzt TYPO3 das in Ihrem TypoScript-Template definierte Link-target. So können Sie in TypoScript das target="page" bei Links entfernen.

Gibt man keinen Linktext an, so wird als Linktext im erzeugten Link der Titel der Zielseite verwendet.

Ist die Zielseite nicht erreichbar (versteckt, gelöscht, zugriffsgeschützt), so wird nur der angegebene Linktext ohne Link ausgegeben.

Einen Link zu einer externen Website setzt man durch die Angabe ihrer kompletten URL. Dazu gehört auch das http://, welches TYPO3 zur Identifikation eines externen Links dient.

Externer Link auf den TYPO3 Webkatalog (typolink.org):
 
<link http://typolink.org>TYPO3 Webkatalog</link>

Gibt man nicht explizit ein target-Attribut an, so wird im erzeugten Link das Standard-Target für externe Links (target="_blank") eingetragen.

Gibt man keinen Linktext an, so wird als Linktext im erzeugten Link die URL der externen Website verwendet.

Einen Link auf eine E-Mail setzt man durch die Angabe der E-Mail-Adresse. TYPO3 identifiziert eine E-Mail-Adresse durch das @-Zeichen.

Verlinkung der E-Mail-Adresse info@example.com:
 
<link info@example.com>Linktext</link>

Ist die automatische Verschlüsselung von E-Mail-Adressen (mit der TypoScript-Angabe spamProtectEmailAddresses) aktiviert, so wird die E-Mail-Adresse über JavaScript verschlüsselt, um ihr Auslesen durch so genannte Spambots zu verhindern.

Gibt man keinen Linktext an, so wird als Linktext im erzeugten Link die E-Mail-Adresse verwendet.

Der Linktext (also der Text, der vom link-Tag umschlossen ist) ist ein wichtiger Bestandteil des gesamten Links und darf nicht unterbewertet werden. Dies gilt vor allem hinsichtlich einer guten Suchmaschinenoptimierung. Aber auch für die Benutzerfreundlichkeit spielen gut gewählte Linktexte eine Rolle, da sie das Verständnis und die Orientierung der Website-Besucher verbessern können.
Wird nicht explizit ein Linktext angegeben, so trägt TYPO3 in den erzeugten Link je nach Linktyp (intern, extern, E-Mail) automatisch einen Linktext ein.

Verwendung des Linktextes "Unsere Produkte"
im Link zur internen Seite mit der UID 42:
 
<link 42>Unsere Produkte</link>

Link zum TYPO3 Webkatalog mit leerem Linktext
(wird automatisch ersetzt durch die angegebene URL):
 
<link http://typolink.org></link>

Mit dem optionalen Attribut target kann das Zielfenster angegeben werden, in dem sich die verlinkte Seite (intern oder extern) öffnen soll.

• page: Standard für interne Links in TYPO3 (target="page" entfernen)
• _blank: Standard für externe Links in TYPO3
• _top: Auf oberster Fensterebene (z.B. ausserhalb von HTML-Frames) öffnen
• 120x300: In einem Popup-Fenster bestimmter Größe öffnen (hier: 120 Pixel breit und 300 Pixel hoch)
• - (Bindestrich): Muss angegeben werden, wenn das Standard-target verwendet soll und mindestens einer der nachfolgenden Attribute (class oder title) gesetzt werden soll

Öffnen der internen Seite mit UID 42 in einem neuen Browserfenster:
 
<link 42 _blank>Linktext</link>

Öffnen der Startseite des TYPO3 Webkatalogs mittels JavaScript
in einem Popup-Fenster der Größe 550x700 Pixel:
 
<link http://typolink.org 550x700>Linktext</link>

Im optionalen Attribut class kann man den Namen einer CSS-Klasse angeben, um das Aussehen des Links zu verändern. Die angegebenen Klassenbezeichner müssen natürlich zuvor in einem Stylesheet definiert worden sein.

Verwendung der CSS-Klasse 'highlight' in einem internen Link zur
Seite 42, geöffnet in einem Popup der Größe 250x400 Pixel:
 
<link 42 250x400 highlight>Linktext</link>

Verwendung der CSS-Klasse 'external' in einem Link zur
Startseite des TYPO3 Webkatalogs, Standard-target "_blank":
 
<link http://typolink.org - external>Linktext</link>

Mit dem optionalen Attribut title lässt sich ein Text angeben, der als title-Attribut in einem a href-Link verwendet wird. Dieser Text wird als Tooltip im Browser angezeigt, wenn man mit der Maus über den Link fährt. Ausserdem kann dieser Text eine zusätzliche Information für Suchmaschinen bedeuten.

Der Text dieses Attributs muss in doppelten Anführungszeichen geschrieben werden!

Verwendung des Textes "Mehr Informationen" als title-Attribut
eines Links auf die interne Seite 42, geöffnet in einem neuen
Browserfenster, keine CSS-Klasse:
 
<link 42 _blank - "Mehr Informationen">Linktext</link>

Verwendung des Textes "TYPO3 Agenturen und Freelancer" als
title-Attribut eines Links auf die Website typolink.org,
Standard-target "_blank", keine CSS-Klasse, kein Ankertext:
 
<link http://typolink.org - - "TYPO3 Agenturen und Freelancer"></link>