WordPress-Ankerlinks erstellen: Sprungziele benennen und testen

Auf einer längeren Leistungsseite möchten Besucher direkt zur Anreise, zu Voraussetzungen oder zum Ablauf gelangen. Dafür können Sie in WordPress Ankerlinks erstellen: Ein Link führt zu einem benannten Abschnitt, statt nur an den Anfang der Seite. Wichtig sind ein eindeutiges Sprungziel, die passende Linkadresse und ein Test außerhalb der Bearbeitungsansicht.

Dieser Ablauf beschreibt die Arbeit mit dem WordPress-Blockeditor. Bei individuellen Seitenbaukästen können die Eingabefelder anders heißen. Klären Sie dort, welches Element das Ziel tatsächlich ausgibt. Für einen einfachen Sprung innerhalb einer Seite müssen Sie nicht zuerst die gesamte Hauptnavigation umbauen.

Was unterscheidet Linktext, Anker und Seitenadresse?

Der Linktext ist das, was Ihre Besucher anklicken, beispielsweise „Anreise und Treffpunkt“. Der Anker ist die technische Kennung des Zielabschnitts, etwa anreise. Für einen Sprung auf derselben Seite lautet das Linkziel dann #anreise. Die Raute gehört zum Link, nicht in das Eingabefeld für den Ankernamen.

Die WordPress-Anleitung zu Seitensprüngen beschreibt dafür unter anderem einen Überschriftenblock mit HTML-Anker. Andere Blöcke kommen ebenfalls infrage, wenn sie dieses Feld unterstützen. Eine sichtbare Überschrift hilft zusätzlich zu erkennen, wo der Sprung angekommen ist. Der Anker ersetzt weder den Abschnittstext noch eine verständliche Überschrift.

1. Das richtige Ziel auswählen und verständlich benennen

Beginnen Sie beim erwarteten Ergebnis: Welche Information soll unmittelbar nach dem Klick sichtbar sein? Setzen Sie das Ziel möglichst an den Anfang dieses Abschnitts. Eine Kennung auf einem dekorativen Bild oberhalb der gesuchten Information kann zwar technisch erreichbar sein, erfüllt aber möglicherweise die Leseraufgabe schlecht.

Verwenden Sie für Ihre redaktionelle Arbeit kurze Namen wie ablauf, voraussetzungen oder anreise. Kleine Buchstaben und gegebenenfalls Bindestriche machen die Schreibweise leicht vergleichbar. Beginnen Sie mit einem Buchstaben und vermeiden Sie Leerzeichen. Das ist eine praktikable Namensregel, keine Aussage, dass alle anderen Unicode-Zeichen grundsätzlich ungültig wären.

Entscheidend ist die Eindeutigkeit innerhalb der ausgegebenen Seite. Die MDN-Dokumentation zum HTML-Attribut id erläutert diese Anforderung. Prüfen Sie deshalb auch kopierte Abschnitte: Zwei gleich benannte Ziele auf derselben Seite sind keine verlässliche Grundlage für den vorgesehenen Sprung.

2. Den HTML-Anker im Blockeditor eintragen

1. Öffnen Sie die betreffende Seite und wählen Sie den vorgesehenen Überschriftenblock aus.
2. Blenden Sie die Einstellungen ein und wechseln Sie zu den Einstellungen dieses Blocks, nicht nur zu den allgemeinen Seiteneinstellungen.
3. Öffnen Sie den Bereich „Erweitert“ und suchen Sie „HTML-Anker“.
4. Tragen Sie beispielsweise anreise ohne vorangestellte Raute ein.
5. Speichern Sie die Änderung im vorgesehenen Freigabeablauf.

Die aktuelle Dokumentation zum Überschriftenblock führt HTML-Anker unter den erweiterten Einstellungen auf. Fehlt das Feld, prüfen Sie zuerst den ausgewählten Block und Ihre konkrete Bearbeitungsoberfläche. Ändern Sie nicht versuchsweise den Seitentitel oder die Seitenadresse. Auch die Überschriftenebene sollte sich aus der Inhaltsstruktur ergeben und nicht allein aus der gewünschten Schriftgröße.

3. Den Link zum Abschnitt setzen

Markieren Sie den vorgesehenen Linktext, öffnen Sie die Linkfunktion und tragen Sie für dieselbe Seite #anreise ein. Bestätigen und speichern Sie die Verlinkung. Kontrollieren Sie die Schreibweise Zeichen für Zeichen: Ein Ziel namens anreise und ein Link auf #Anreise sind nicht dieselbe Schreibweise.

Von einer anderen Seite benötigen Sie deren Zieladresse einschließlich Fragment. Innerhalb derselben Website wäre beispielsweise /fuehrungen/#anreise ein entsprechender Aufbau, sofern die Seite unter diesem Pfad existiert. Ein einzelnes #anreise verweist dagegen auf die gerade geöffnete Seite. Die deutsche WordPress.com-Anleitung zu Sprungmarken zeigt beide Varianten. Ihre zusätzlichen Plattformfunktionen sind nicht automatisch auf jeder selbst gehosteten Installation vorhanden.

Soll ein gemeinsamer Menüeintrag von mehreren Unterseiten zu diesem Abschnitt führen, prüfen Sie deshalb besonders die vollständige Zieladresse. Die Bedienung des Menüs selbst behandelt unser eigener Leitfaden zum Bearbeiten von WordPress-Menüs.

Fiktives Beispiel: Ein Saatgutbetrieb erklärt seine Führungen

Ein erfundener Saatgutbetrieb in Niederösterreich beschreibt Werkstatt- und Gartenführungen auf einer längeren Seite. Interessierte sollen zwischen „Ablauf“, „Voraussetzungen“ und „Anreise“ springen können. Das Team setzt die drei Ziele an die jeweiligen Abschnittsüberschriften und ergänzt oben eine kurze Linkliste.

Beim Kopieren eines Abschnitts bleibt zunächst zweimal dieselbe Kennung stehen. Vor der Freigabe erhält jeder Abschnitt sein eigenes Ziel. Ein Verweis von der Kontaktseite wird außerdem mit dem Seitenpfad ergänzt. Danach lässt das Team eine Person die Frage beantworten: „Wo treffen wir uns zur Führung?“ Beobachtet wird der tatsächliche Weg. Das Beispiel beschreibt keine KIM-Kundenumsetzung und behauptet weder zusätzliche Anmeldungen noch bessere Suchpositionen.

4. Den gespeicherten Sprung öffentlich testen

Öffnen Sie die veröffentlichte Adresse ohne Administratoranmeldung. Testen Sie sowohl den Link innerhalb der Seite als auch einen direkten Einstieg mit dem Fragment. Eine richtige Eingabe im Editor allein beweist noch nicht, dass das öffentliche Layout den gewünschten Abschnitt gut zeigt.

• Passt das erreichte Ziel zum Linktext, und ist die Abschnittsüberschrift sichtbar?
• Bleibt der Inhalt auf dem Smartphone lesbar, auch bei einer festen Kopfzeile?
• Lässt sich der Link mit der Tastatur erreichen und aktivieren?
• Führt ein Verweis von einer anderen Seite wirklich auf die richtige Seite und zum richtigen Abschnitt?
• Funktioniert der Weg auch nach einer späteren Änderung am Seitenaufbau?

Verdeckt die Kopfzeile das Ziel, lassen Sie die Darstellung gezielt prüfen. Zusätzliche Leerabsätze sind keine verlässliche Abstandslösung für unterschiedliche Bildschirmgrößen. Notieren Sie Ausgangsadresse, Link und beobachtetes Ergebnis; weitere Prüfschritte bietet unser Beitrag zum mobilen Testen echter Nutzerwege.

Halten Sie vergebene Ankernamen bei der Übergabe fest. Eine spätere Umbenennung erfordert auch die Prüfung vorhandener Verweise. Wenn Redaktion und individuelle Seitengestaltung dabei zusammen abgestimmt werden sollen, unterstützt KIM Systems Sie bei Ihrer WordPress-Website.