Ankerlinks
Ankerlinks sind Sprungmarken, die es Ihnen ermöglichen, innerhalb derselben Inhaltsseite Ihrer Website Links zu setzen oder direkt auf Seitenbereiche anderer Unterseiten zu verlinken. Hier erläutern wir Ihnen, wie Sie in toujou/TYPO3 Ankerlinks setzen.
Ankerlinks intern setzen Element-ID nutzen Beispielanwendung Elemente benennen Hinweise, Tipps & Tricks
Ankerlinks intern setzen
Linktext markieren
Um einen Ankerlink einzusetzen, gehen Sie zunächst genau wie beim Setzen »regulärer« Links vor:
- Markieren Sie den zu verlinkenden Text im Editor und klicken Sie auf den Link-Button oberhalb der Editormaske.
- Es öffnet sich wie gewohnt der Link-Browser, in dem Sie im Reiter Seite verbleiben.
- Wie Sie die Verlinkung in einem neuen Browser-Tab öffnen lassen, haben wir beim Link setzen im Tutorial zur Textbearbeitung erläutert.
Inhaltselement auswählen
- Klappen Sie zunächst, wenn nötig, die Zielseite im Seitenbaum auf.
- Um konkrete Inhaltselemente auszuwählen, klicken Sie auf den eingekästelten Pfeil unmittelbar links neben dem Page Icon Ihrer Zielseite.
- Es öffnet sich nun eine Listenansicht der auf der Zielseite befindlichen Inhaltselemente. Klicken Sie auf das gewünschte Element.
- Da Elemente nicht von Haus aus einen Namen tragen, haben wir hier für Sie erläutert, wie Sie den Namen eines Elements bearbeiten.
Hinweis zu übersetzten Ankerlinks: Wenn Sie mehrere Sprachen auf Ihrer Webpräsenz nutzen, können Sie im Backend einfach die entsprechende Seite übersetzen. Nutzen Sie die Copy-Funktion – und damit die freie Übersetzung – müssen Sie die übersetzten Elemente manuell anfassen. Mit der Translate-Funktion werden automatisch die Referenzen zum übersetzten Element gesetzt.
Alternative: Element-ID anfügen
Hinweis: Da die Element-ID als externer Link (im Link-Browser) manuell eingefügt werden müsste, raten wir für den Anwendungsfall einer internen Verlinkung von dieser Variante ab. Dies hängt mit Ihrer Seitenarchitektur und der Kommunikation über interne Verlinkungen an Suchmaschinen zusammen. Die Ermittlung einer ID hilft Ihnen jedoch beim Weiterleiten von präzisen Sprungmarken an Interessenten oder bei der Verwendung von Backlinks auf Ihre Seite.
ID ermitteln
- In TYPO3 setzen sich Ankerlinks für Inhaltsblöcke standardmäßig aus einem »c« (dargestellt als »#c«) und der eindeutigen ID des Content Elements zusammen.
- Mittels Mouseover über das Element-Icon ermitteln Sie die ID eines Inhaltselements.
Link-URL manuell erstellen
- Verlinkt werden würde auf o.g. Element demzufolge mit #c1000258, das der URL der Unterseite nach einem Schrägstrich manuell angefügt wird. In unserem Beispiel: showcase.toujou.de/wie/#c1000258.
- Im Bild sehen Sie die Frontendansicht des gesetzten Ankerlinks sowie (unten links) die Ziel-URL unseres Beispiel-Buttons, die per Mouseover erscheint.
Beispielanwendung
Voraussetzung für das Setzen von Ankerlinks sind Inhaltselemente, die Ihren Content strukturieren. Im folgenden Bild sehen Sie eine Gegenüberstellung der Backend- und Frontend-Ansicht einer Content Page. Unsere Beispielseite besteht aus fünf Content-Elementen: Vom Headerbild, über den Einleitungstext, bis zu bebilderten Textblöcken, einem Teaser-Element und abschließend einem Map-Element. In der oben beschriebenen Anleitung haben wir vom Seitenanfang eine Sprungmarke ans Ende der Seite zum Map-Element gesetzt.
Elemente benennen
Als Zwischenschritt raten wir dazu, Inhaltselemente mit einer kurzen Beschreibung zu benennen, um diese im Backend – nicht nur beim Setzen von Ankerlinks – für die schnelle Bearbeitung wieder zu finden. Das folgende Bild illustriert die Listenansicht unserer Beispielseite. Dort zu sehen: Nicht benannte Elemente werden mit [Kein Titel] dargestellt.
Elementnamen einfügen
In unserem Beispiel benennen wir das Map-Element mit der Bezeichnung »Firmenadresse«. Diese Überschrift ist nicht im Frontend sichtbar.
Gehen Sie in den Bearbeitungsmodus des Elements, das Sie mit einer Beschreibung versehen möchten.
Klicken Sie den Settings-Reiter an. Dort fügen Sie in die Maske der Sektion Name of element (Überschrift) die Elementbezeichnung ein. Speichern Sie Ihre Änderung.
Hinweise, Tipps und Tricks
Website-Links können mehrere Ziele haben: Externe Websites, Dokumente, die eigene Startseite, Landing Pages oder Unterseiten Ihrer Website. Ankerlinks können dabei helfen, sehr lange Inhaltsseiten zu strukturieren, indem man Besuchern die Möglichkeit gibt, zu gewünschten Themen zu springen bzw. Inhalte zu überspringen. Die Sprungmarken können zu Beginn einer Seite als verlinkte Inhaltsangaben dienen oder den Weg zu häufig gesuchten Aktionen, zum Beispiel einer Kontaktmaske, verkürzen – um nur einige Anwendungsbeispiele zu nennen.
Gehen Sie mit der Verwendung von Ankerlinks sorgsam um und dokumentieren Sie deren Einsatz gegebenenfalls. Denn wenn Sie ein Element, auf das Sie gezielt verlinkt haben, einmal löschen, bleibt ein gesetzter Link zwar bestehen, die Sprungmarke findet jedoch ihr Ziel nicht. Die gute Nachricht: Der Link führt Ihre Besucher nicht auf eine (404-)Fehlerseite, sondern lediglich an den Anfang der Ziel-Unterseite. Jedoch ist die Nutzererfahrung im Moment des Klicks womöglich nicht positiv besetzt, wenn ein anderes Ziel erscheint als erwartet.