Haben Sie jemals auf einen Link geklickt und sind genau dort gelandet, wo Sie hinwollten – mitten auf einer Seite? Das ist ein Ankerlink in Aktion. Er springt Sie direkt zu dem Teil, der wichtig ist, ohne Scrollen.
Als ich begann, längere Blogbeiträge und Anleitungen in WordPress zu erstellen, erkannte ich schnell die Notwendigkeit von Ankerlinks. Die Leser überflogen, sprangen ab oder verpassten Abschnitte ganz. Das Hinzufügen eines einfachen Inhaltsverzeichnisses mit Ankerlinks änderte das. Es erleichterte die Navigation und half einigen Beiträgen, „Springen zu“-Links direkt in den Google-Ergebnissen anzuzeigen.
In diesem Leitfaden zeige ich Ihnen genau, wie Sie Ankerlinks in WordPress erstellen. Sie erfahren, wie sie funktionieren, wo Sie sie hinzufügen können und wie sie bei SEO und Benutzererfahrung helfen können.
Inhaltsverzeichnis
Ankerlink-Methoden im Vergleich
Hier ist ein kurzer Überblick über die verschiedenen Möglichkeiten, wie Sie Ankerlinks in WordPress hinzufügen können, abhängig von Ihrem Editor oder Ihrer Einrichtung.
| Methode | Am besten für | Benötigt Code? | Plugin benötigt? |
|---|---|---|---|
| Block-Editor | Moderne WordPress-Websites | Nein | Nein |
| Klassischer Editor | Ältere WordPress-Installationen | Grundlegendes HTML | Nein |
| Manuelles HTML | Benutzerdefinierte Layouts, Landing Pages | Ja | Nein |
| Plugin (z. B. Easy TOC) | Automatische Inhaltsverzeichnisse | Nein | Ja |
| SeedProd Builder | Landing Pages und Themes | Nein | Nein |
Was ist ein Ankerlink in WordPress?
Ein Ankerlink ist eine Art interner Link, mit dem Benutzer zu einem bestimmten Abschnitt auf derselben Seite springen können. Er verwendet ein Hash-Zeichen (#), gefolgt von einer ID, um diese Stelle im HTML zu markieren.
Wie Sie im obigen Beispiel sehen können, bringt Sie das Klicken auf einen Ankerlink sofort zu diesem Thema auf der Seite.
Wann sollten Sie Ankerlinks verwenden?
Es dauert nur wenige Sekunden, bis Benutzer entscheiden, ob sie auf Ihrer Website bleiben oder sie verlassen. Es ist Ihre Aufgabe, diese wenigen Sekunden zu nutzen, um sie zu überzeugen, zu bleiben und sich mit Ihren Inhalten zu beschäftigen.
Der einfachste Weg, Leser zu fesseln, ist, ihnen zu helfen, die benötigten Informationen schnell zu finden. Sie können dies tun, indem Sie Ankerlinks erstellen, damit Benutzer den Rest Ihrer Inhalte überspringen und direkt zu den Abschnitten springen können, die sie interessieren. Dies ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern und mehr Leser zu gewinnen.
Wie wir bereits erwähnt haben, können Ankerlinks auch Ihr WordPress SEO verbessern. Google zeigt Ankerlinks oft in Suchergebnissen als „Springen zu“-Link an, sodass Leser direkt von der Ergebnisseite zu einem bestimmten Abschnitt springen können.
Manchmal zeigt Google auch mehrere Links von einer einzelnen Seite als „Springen zu“-Links an. Diese Links erhöhen nachweislich die Klickrate in den Suchergebnissen, was mehr Traffic für Ihre Website bedeutet.
Wie erstellen Sie also einen Link, um in WordPress zu einem bestimmten Teil einer Seite zu springen? Finden wir es heraus!
Wie füge ich Ankerlinks im WordPress Block-Editor hinzu?
Das Erstellen von Ankerlinks im WordPress Block-Editor ist ziemlich einfach. Sie müssen nur 2 Dinge tun, damit Ihre Ankerlinks funktionieren:
- Erstellen Sie einen Link mit dem #-Zeichen direkt vor dem Ankertext
- Fügen Sie das ID-Attribut zum Text hinzu, zu dem der Benutzer springen soll
Befolgen Sie die nachstehenden Anweisungen, um zu erfahren, wie Sie dies selbst tun können.
Schritt 1: Erstellen Sie Ihren Ankerlink
Der erste Schritt besteht darin, den Text hervorzuheben, zu dem Sie Ihren Ankerlink hinzufügen möchten. Klicken Sie dann auf das Symbol zum Einfügen eines Links im WordPress Block-Editor.
Wenn Sie auf das Symbol klicken, wird das Popup zum Einfügen eines Links angezeigt, in dem Sie normalerweise einen Seitenlink hinzufügen oder nach einer Seite suchen würden, zu der Sie verlinken möchten.
Für Ankerlinks müssen Sie jedoch das #-Zeichen und die Schlüsselwörter für den Abschnitt eingeben, zu dem die Benutzer springen sollen.
Die von Ihnen verwendeten Schlüsselwörter sollten:
- Bezogen auf den Abschnitt sein, zu dem Sie verlinken
- Nicht zu lang oder kompliziert sein
- Großschreibung verwenden, um den Ankertext lesbarer zu machen
- Bindestriche enthalten, um Wörter zu trennen und sie leichter lesbar zu machen
Sobald Sie Ihre Ankerlink-Schlüsselwörter eingegeben haben, drücken Sie die Eingabetaste, um den Link zu erstellen. Sie können den erstellten Link dann im WordPress-Editor sehen, aber ein Klicken darauf bewirkt nichts.
Das liegt daran, dass keine ID mit dem Ankerlink verbunden ist, nach der Ihr Browser sucht, wenn Sie auf den Link klicken.
Sie können dies beheben, indem Sie das ID-Attribut zum Inhaltbereich hinzufügen, zu dem Sie verlinken möchten, was wir als Nächstes untersuchen werden.
Schritt 2: Fügen Sie das ID-Attribut zum verlinkten Text hinzu
Scrollen Sie in Ihrem WordPress-Inhaltseditor zu dem Inhalt, zu dem Benutzer springen sollen, wenn sie auf Ihren Ankerlink klicken. Der benötigte Abschnitt ist oft eine Überschrift oder der Anfang eines neuen Absatzes.
Klicken Sie nun auf den Block, der den Abschnitt enthält, zu dem Sie verlinken möchten, und navigieren Sie zu den Blockeinstellungen auf der rechten Seite Ihrer Seite.
Erweitern Sie in den Blockeinstellungen den Erweitert-Tab und geben Sie die gleichen Schlüsselwörter ein, die Sie für Ihren Ankertextlink im HTML-Ankerfeld verwendet haben. Der einzige Unterschied ist, dass Sie das # Zeichen am Anfang nicht benötigen.
Wenn Sie Ihren Artikel speichern und eine Vorschau anzeigen, können Sie Ihren Ankerlink in Aktion sehen. Klicken Sie einfach darauf, um zu dem zuvor verlinkten Inhalt zu springen.
Wenn der Inhaltsbereich, zu dem Sie verlinken möchten, keine Überschrift, sondern ein normaler Absatz oder Text ist, ist der Vorgang etwas anders.
Klicken Sie in dieser Situation auf den Block, um die Blockeinstellungen anzuzeigen, und klicken Sie auf das Drei-Punkte-Menü, um weitere Optionen anzuzeigen.
Wählen Sie dort die Option Als HTML bearbeiten, mit der Sie das gesamte HTML für diesen gesamten Inhaltsblock bearbeiten können.
Nun müssen Sie das HTML-Tag für die Informationen finden, auf die Sie verweisen möchten. Suchen Sie zum Beispiel nach <p>, wenn es sich um einen Absatz handelt, oder nach <table>, wenn es sich um eine Tabelle handelt, und so weiter.
Sobald Sie das Tag gefunden haben, fügen Sie Ihre Ankerschlüsselwörter als id-Attribut hinzu, ähnlich dem folgenden Beispiel:
<p id="bali-hiking-adventures">
Nachdem Sie Ihre Schlüsselwörter hinzugefügt haben, wird möglicherweise eine Benachrichtigung angezeigt, die erklärt, dass der Block ungültige oder unerwartete Inhalte enthält.
Klicken Sie also auf die Schaltfläche Zu HTML konvertieren, um Ihre Änderungen zu speichern.
Kann ich Ankerlinks im klassischen WordPress-Editor erstellen?
Wenn Sie noch den klassischen WordPress-Editor verwenden, ist das Hinzufügen eines Ankerlinks etwas anders. Befolgen Sie die folgenden Schritte, um zu erfahren, wie Sie Ankerlinks im visuellen Inhaltseditor des klassischen WordPress erstellen.
Schritt 1: Erstellen Sie Ihren Ankerlink
Markieren Sie zuerst den Text, den Sie verlinken möchten, und klicken Sie auf die Schaltfläche Link einfügen oben in Ihrem Inhaltseditor.
Geben Sie als Nächstes Ihre Ankerschlüsselwörter mit dem # Präfix ein, gefolgt von dem Text, den Sie verlinken möchten.
Schritt 2: Fügen Sie das ID-Attribut zum verlinkten Text hinzu
Der nächste Schritt besteht darin, Browser zu dem Abschnitt des Inhalts zu leiten, zu dem Benutzer springen sollen, wenn sie auf den Ankerlink klicken.
Wechseln Sie dazu in den Textmodus im klassischen WordPress-Editor und scrollen Sie dann zu dem Abschnitt, den Sie anzeigen möchten.
Finden Sie als Nächstes das HTML-Tag, auf das Ihr Ankerlink abzielen soll. Zum Beispiel <h2>, <h3>, <p> usw.
Fügen Sie nun das ID-Attribut mit den Schlüsselwörtern Ihrer Ankerlinks ohne das # Präfix hinzu. Hier ist ein Beispiel, wie das aussehen würde:
<h2 id="bali-hiking-adventures">
Sie können nun Ihre Änderungen speichern und eine Vorschau Ihres Inhalts anzeigen, um zu sehen, ob der Ankerlink funktioniert.
Ankerlinks manuell in HTML hinzufügen
Wenn Sie normalerweise den Textmodus verwenden, um Inhalte im klassischen WordPress-Editor zu schreiben, können Sie hier manuell einen Ankerlink in HTML erstellen.
Erstellen Sie zuerst einen Ankerlink mit dem # Präfix mithilfe des <a href=” “> Tags, ähnlich dem folgenden Beispiel:
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Scrollen Sie dann zu dem Inhaltsabschnitt, den Sie anzeigen möchten, wenn Benutzer auf Ihren Link klicken. Normalerweise ist der Abschnitt ein H2- oder H3-Tag, es kann aber auch ein anderes HTML-Element sein, wie z. B. ein einfacher Absatz <p>-Tag.
Sobald Sie das HTML-Tag gefunden haben, fügen Sie das ID-Attribut und den Ankertext ohne das # Präfix wie folgt hinzu:
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Sie können nun Ihre Änderungen speichern und eine Vorschau Ihres Inhalts anzeigen, um Ihren Ankerlink zu testen.
Ankerlinks automatisch mit einem WordPress-Plugin hinzufügen
Wenn Sie regelmäßig lange Artikel veröffentlichen, können Sie Zeit sparen, indem Sie mit einem WordPress-Plugin automatisch Ankerlinks zu verschiedenen Überschriften in Ihren Inhalten hinzufügen und ein Inhaltsverzeichnis erstellen. Dies erleichtert es den Benutzern, die benötigten Informationen zu finden, und macht es überflüssig, jeden Ankerlink manuell zu erstellen.
Laden Sie dazu das Plugin Easy Table of Contents herunter und installieren und aktivieren Sie es auf Ihrer WordPress-Website. Wenn Sie dabei etwas Hilfe benötigen, folgen Sie dieser Anleitung zur Installation eines WordPress-Plugins.
Das Plugin verwendet die Überschriften in Ihren Inhalten, um zu erraten, zu welchen Abschnitten verlinkt werden soll, und Sie können die Einstellungen vollständig an Ihre Bedürfnisse anpassen.
Nachdem Sie das Plugin installiert und aktiviert haben, navigieren Sie zu Einstellungen » Inhaltsverzeichnis, um Ihre Einstellungen zu konfigurieren.
Aktivieren Sie dann das Plugin für die Beitragstypen, zu denen Sie Ankerlinks hinzufügen möchten, und deaktivieren Sie die Bereiche, in denen Sie kein Inhaltsverzeichnis anzeigen möchten.
Sie können auch die Option "Automatisch einfügen" aktivieren. Dadurch kann das Plugin automatisch ein Inhaltsverzeichnis für alle ausgewählten Inhaltstypen erstellen, einschließlich älterer Inhalte.
Wenn Sie nur für bestimmte Artikel automatisch ein Inhaltsverzeichnis erstellen möchten, lassen Sie diese Option deaktiviert.
Scrollen Sie als Nächstes auf der Seite nach unten, um auszuwählen, wo Sie Ihr Inhaltsverzeichnis anzeigen möchten und wann es ausgelöst werden soll.
Sie können beispielsweise Ihr Inhaltsverzeichnis vor oder nach Ihrer ersten Überschrift anzeigen lassen und wenn eine bestimmte Anzahl von Überschriften in Ihrem Artikel vorhanden ist.
Weiter unten auf der Seite können Sie ein Design auswählen, das zum Branding Ihrer Website passt, und weitere erweiterte Einstellungen überprüfen.
Denken Sie daran, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu übernehmen.
Wenn Sie die Option "Automatisch einfügen" aktivieren, können Sie einen Artikel mit der richtigen Anzahl von Überschriften in der Vorschau anzeigen, um Ihr Inhaltsverzeichnis in Aktion zu sehen.
Wenn Sie jedoch ein Inhaltsverzeichnis manuell erstellen möchten, müssen Sie jeden Artikel einzeln bearbeiten.
Gehen Sie dazu zum Bearbeitungsbildschirm Ihres Inhalts und scrollen Sie zum Tab Inhaltsverzeichnis unter dem Editor.
Klicken Sie dort auf das Kontrollkästchen "Inhaltsverzeichnis einfügen" und wählen Sie aus, welche Überschriften Sie als Ankerlinks aufnehmen möchten.
Speichern Sie nun Ihre Änderungen und zeigen Sie Ihren Artikel in der Vorschau an. Das Plugin "Easy Table of Contents" zeigt automatisch eine Liste von Ankerlinks als Ihr Inhaltsverzeichnis an.
Ankerlinks zu Landing Pages hinzufügen
Wir haben mehrere Methoden zum Hinzufügen von Ankerlinks zu Ihrer WordPress-Site behandelt, aber was ist, wenn Sie eine Landingpage erstellen?
Glücklicherweise ermöglicht Ihnen SeedProd, der beste WordPress-Theme- und Landingpage-Builder, das einfache Erstellen von Ankerlinks.
In seinem visuellen Drag-and-Drop-Editor können Sie den praktischen Ankerlinks-Block verwenden, um einen Teil Ihrer Landingpage mit einem anderen zu verknüpfen. Wenn Sie SeedProd verwenden, um ein benutzerdefiniertes WordPress-Theme zu erstellen, können Sie die gleiche Methode wie die, die wir Ihnen gleich zeigen werden, verwenden, um Ankerlinks überall in Ihrem Theme zu erstellen.
Ziehen Sie einfach den Ankerlink-Block an den Teil der Seite, zu dem Sie springen möchten, und geben Sie einen Namen ein.
Wählen Sie anschließend den Text auf Ihrer Landingpage aus, von dem aus Sie verlinken möchten, fügen Sie den Ankernamen mit einem vorangestellten Hashtag hinzu und klicken Sie auf Speichern.
Wenn Sie Ihre Seite nun in der Vorschau anzeigen und den Link testen, springt sie automatisch zum richtigen Abschnitt.
Sie können dieser Schritt-für-Schritt-Anleitung folgen, um eine Landingpage in WordPress zu erstellen, falls Sie Hilfe beim Einstieg benötigen.
Da haben Sie es!
Jetzt wissen Sie, wie Sie einen Ankerlink in WordPress erstellen. Diese kleinen Links mögen unbedeutend erscheinen, aber sie können einen großen Unterschied machen. Bessere Benutzererfahrung, schnellere Navigation und sogar zusätzliche „Springen zu“-Links in Google.
Benötigen Sie weitere Möglichkeiten, die Benutzerfreundlichkeit und SEO Ihrer Website zu verbessern? Sehen Sie sich diese praktischen Anleitungen an:
- Die besten WordPress-Plugins, um Ihre Website zu überarbeiten
- Die besten Abstimmungs-Plugins für WordPress, die Sie benötigen
- Die besten No-Code-Tools für WordPress-Websites
- Die besten WordPress-Wartungsmodus-Plugins
- Die besten WordPress-Banner-Plugins zur Lead-Generierung
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
Ich habe einen Link in der Fußzeile (Vorlage), nennen wir ihn „Kontakt“. Wenn man darauf klickt, soll die Über-uns-Seite geladen und zum Kontaktbereich heruntergescrollt werden. Wie macht man das?
Hallo Max. Um dies zu tun, würden Sie auf die Über-uns-Seite verlinken und den Anker zur URL hinzufügen: /about/#contact. Ich hoffe, das hilft!
Hallo! Ich habe den Ankerlink hinzugefügt und das ID-Attribut korrekt erstellt (doppelt und dreifach geprüft), aber mein Link funktioniert einfach nicht – er bringt mich nirgendwohin. Ich kann keine Artikel mit Vorschlägen finden, was falsch sein könnte? Was kann es sein? Ich schwöre, es ist alles so eingerichtet, wie es sein sollte. Könnte ein Plugin oder etwas in meinem Theme das verhindern? Danke!
Hallo Tuija,
Ist Ihre WordPress-Version auf dem neuesten Stand? Sie können auch sicherstellen, dass alle Ihre Plugins und Themes aktualisiert sind. Wenn das nicht funktioniert, versuchen Sie, Ihre Plugins zu deaktivieren und sie einzeln zu aktivieren, um zu sehen, ob es einen Konflikt gibt.
Hallo
Ich suche nach einer Lösung, damit Anker mit dem Menü funktionieren. Die erste Seite ist in Ordnung und scrollt zur entsprechenden Stelle. Wenn ich jedoch auf den Link mit der Anker-ID von z. B. der Seite „Kontaktieren Sie mich“ klicke, funktioniert es nicht. Ich habe festgestellt, dass MYDOMAIN.com/contact-me/#anchorID anstelle von MYDOMAIN.com/#anchorID angezeigt wird.
Ich habe das Menü durch eine vollständige URL wie MYDOMAIN.com/#anchorID ersetzt. Es hat funktioniert, aber die Schaltflächen mit dieser URL zeigen immer die aktive Farbe an, die ich für aktive Schaltflächen festgelegt habe. Außerdem wird im mobilen Menü das Menü selbst nicht ausgeblendet.
Die vollständige URL funktioniert, aber wie löst man das Problem mit aktiven Schaltflächen und dem Nicht-Ausblenden des Menüs auf Mobilgeräten?
Hat jemand eine Lösung dafür? Danke
Hallo Andrew, können Sie bitte unser Support-Team unter https://www.seedprod.com/contact/ kontaktieren, um Hilfe bei diesem Problem zu erhalten? Sie sind viel besser gerüstet, um bei technischeren Fragen zu helfen.