Der TYPO3 link Tag

Die Bestandteile (target, class, title etc.) des link Tags in Inhaltselementen und Flexible Content Elements von TYPO3.

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.

Genereller Aufbau des TYPO3 link Tags

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

<link Ziel target class "title">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.

Ziel eines Links

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, wie im Folgenden erklärt wird.

Link auf eine interne Seite

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.

Interner Link in TYPO3
# Link auf die Seite mit UID 42 erzeugen
<link 42>Linktext</link>

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.

Link auf einen Anker innerhalb der Seite

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.

Direkter Link auf einen Anker (Sprunglink)
# Link auf 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.

Link auf eine externe Website

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 in TYPO3
# Externer Link auf 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.

Link auf eine E-Mail-Adresse

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

Link auf E-Mail in TYPO3
# Link auf 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

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.

Link mit und ohne Linktext
# "Unsere Produkte" als Linktext für Seite 42
<link 42>Unsere Produkte</link>
 
# Kein Linktext:
# Seitentitel der verlinkten Seite wird eingetragen
<link 42></link>

Das target Attribut

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

Mögliche Werte des target Attributs

  • page — Standard für interne Links in TYPO3
  • _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
Beispiele: target-Attribut
# Interne Seite mit UID 42 in neuem Browserfenster öffnen
<link 42 _blank>Linktext</link>

# Öffnet die Startseite des T3N-Magazins in einem Popup-Fenster der Größe 550x700 Pixel
<link http://t3n.de 550x700>T3N</link>

Das class Attribut

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.

Beispiele: class-Attribut
# Formatiere Ankertext mit CSS-Klasse "highlight" und setze Link auf Seite 42, geöffnet in Popup (250x400 Pixel)
<link 42 250x400 highlight>Linktext</link>

# Formatiere Ankertext mit CSS-Klasse "external" und setze Link zu typo3.org, Standard-target "_blank"
<link http://typo3.org - external>Linktext</link>

Das title Attribut

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 des title-Attributs muß in doppelten Anführungszeichen geschrieben werden.

Beispiele: title-Attribut
# "Mehr Informationen" als title-Attribut in Link zu Seite 42, geöffnet in neuem Browserfenster, CSS-Klasse "moreinfo":
<link 42 _blank moreinfo "Mehr Informationen">Linktext</link>

# "Webworker News" als title-Attribut in Link zu t3n.de, Standard-target "_blank", keine CSS-Klasse
<link http://t3n.de - - "Webworker News">T3N</link>