So fügen Sie „einfach“ Ankerlinks in WordPress ein (Schritt für Schritt)

Wir verwenden gelegentlich Ankerlinks in unseren längeren WordPress-Beiträgen, damit die Benutzer schnell zu dem Abschnitt springen können, den sie lesen möchten.

Ankerlinks werden oft in den Abschnitten des Inhaltsverzeichnisses verwendet, weil sie den Benutzern helfen, sich in einem längeren Artikel nach oben und unten zu bewegen, ohne die Seite neu zu laden. Sie können auch bei der Suchmaschinenoptimierung helfen, da Google sie zur einfacheren Navigation unter Ihren Sucheinträgen anzeigen kann (mehr dazu später).

In dieser Schritt-für-Schritt-Anleitung erklären wir, was Ankerlinks sind und zeigen Ihnen, wie Sie Ankerlinks in WordPress einfach hinzufügen können.

Bereit? Beginnen wir mit einem Live-Beispiel für Ankerlinks.

Unten finden Sie eine Liste aller Themen, die wir in diesem Handbuch behandeln werden. Klicken Sie auf einen dieser Links und Sie werden zu dem entsprechenden Abschnitt weitergeleitet.

Was ist ein Anker-Link?

Ein Anker-Link ist eine Art von Link auf der Seite, der Sie zu einer bestimmten Stelle auf derselben Seite bringt. Er ermöglicht es Benutzern, zu dem Abschnitt zu springen, der sie am meisten interessiert.

Werfen Sie einen Blick auf den animierten Screenshot unten:

Wie Sie sehen können, führt ein Klick auf den Anker-Link den Benutzer zu dem spezifischen Abschnitt auf derselben Seite.

Ankerlinks werden häufig in längeren Artikeln als Inhaltsverzeichnis verwendet, das es dem Benutzer ermöglicht, schnell zu den Abschnitten zu springen, die er lesen möchte.

Eine weitere Verwendung von Anker-Links ist die Erstellung von Lesezeichen-Links auf Ihrer WordPress-Site. Dadurch können Sie den Lesezeichen-Link auf sozialen Medien oder in E-Mail-Newslettern teilen, sodass Ihre Benutzer beim Laden der Seite sofort zu dem Abschnitt springen, den sie sehen sollen.

Warum und wann sollten Sie Ankerlinks verwenden?

Ein durchschnittlicher Benutzer verbringt weniger als ein paar Sekunden, bevor er sich entscheidet, ob er auf Ihrer Website bleiben oder sie verlassen möchte. Sie haben nur diese wenigen Sekunden, um die Nutzer zum Bleiben zu bewegen.

Der beste Weg, dies zu tun, ist, ihnen zu helfen, schnell die Informationen zu sehen, nach denen sie suchen.

Ankerlinks machen dies einfacher, indem sie es den Nutzern ermöglichen, den Rest des Inhalts zu überspringen und direkt zu dem Teil zu springen, der sie interessiert. Dies verbessert die Benutzererfahrung und hilft Ihnen, neue Kunden/Leser zu gewinnen.

Ankerlinks sind auch großartig für WordPress-SEO. Google kann einen Anker-Link in den Suchergebnissen als „Sprung zu Link“ anzeigen.

Manchmal kann Google auch mehrere Links von dieser Seite als „Jump-to-Links“ anzeigen, und dies erhöht nachweislich die Klickrate in den Suchergebnissen. Mit anderen Worten: Sie erhalten mehr Traffic auf Ihre Website.

Schauen wir uns nun an, wie Sie Ankerlinks in WordPress einfach hinzufügen können.

Wie man Ankerlinks in WordPress manuell hinzufügt

Wenn Sie nur ein paar Anker-Links oder Lesezeichen-Links in Ihren Artikel einfügen möchten, dann können Sie dies ganz einfach manuell tun.

Im Grunde müssen Sie zwei Dinge hinzufügen, damit ein Ankertext wie vorgesehen funktioniert.

1. Erstellen Sie einen Anker-Link mit einem #-Zeichen vor dem Anker-Text.
2. Fügen Sie das id-Attribut

zu dem Text hinzu, zu dem der Benutzer geführt werden soll.

Beginnen wir mit dem Anker-Link-Teil.

Schritt 1. Erstellen eines Anker-Links

Zuerst müssen Sie den Text auswählen, den Sie verlinken möchten, und dann im WordPress Gutenberg-Editor auf die Schaltfläche Link einfügen klicken.

Dadurch wird das Popup-Fenster „Link einfügen“ angezeigt, in dem Sie normalerweise die URL hinzufügen oder nach einem Beitrag oder einer Seite suchen, die Sie verlinken möchten.

Für einen Anker-Link verwenden Sie jedoch einfach # als Präfix und geben die Schlüsselwörter für den Abschnitt ein, zu dem der Benutzer springen soll.

Danach klicken Sie auf die Enter-Taste, um den Link zu erstellen.

Einige hilfreiche Tipps zur Auswahl des Textes, den Sie als Anker-Link verwenden möchten:

• Verwenden Sie Schlüsselwörter, die sich auf den Abschnitt beziehen, auf den Sie verlinken.
• Machen Sie Ihren Anker-Link nicht unnötig lang oder komplex.
• Verwenden Sie Bindestriche, um Wörter zu trennen und sie besser lesbar zu machen.
• Sie können Großschreibung im Ankertext verwenden, um ihn besser lesbar zu machen. Zum Beispiel: #Best-Coffee-Shops-Manhattan

.

Sobald Sie den Link hinzugefügt haben, können Sie den von Ihnen erstellten Link im Editor sehen. Ein Klick auf den Link bewirkt jedoch nichts.

Das liegt daran, dass die Browser den Anker-Link nicht als ID finden können.

Lassen Sie uns das beheben, indem wir die Browser auf den Bereich, den Abschnitt oder den Text verweisen, den Sie anzeigen möchten, wenn Benutzer auf den Anker-Link klicken.

Schritt 2. Fügen Sie das ID-Attribut zum verlinkten Abschnitt hinzu

Scrollen Sie im Content-Editor nach unten zu dem Abschnitt, zu dem der Benutzer navigieren soll, wenn er auf den Anker-Link klickt. In der Regel ist es eine Überschrift für einen neuen Abschnitt.

Wählen Sie dann den Block aus und klicken Sie in den Blockeinstellungen auf die Registerkarte „Erweitert“, um sie zu erweitern. Sie können einfach auf die Registerkarte ‚Erweitert‘ unter der Überschrift Blockeinstellungen klicken.

Danach müssen Sie denselben Text hinzufügen, den Sie als Anker-Link unter dem Feld ‚HTML-Anker‘ hinzugefügt haben. Achten Sie darauf, dass Sie den Text ohne das #-Präfix einfügen.

Sie können nun Ihren Beitrag speichern und Ihren Anker-Link in Aktion sehen, indem Sie auf die Registerkarte „Vorschau“ klicken.

Was ist, wenn der Abschnitt, den Sie anzeigen möchten, keine Überschrift ist, sondern nur ein normaler Absatz oder ein beliebiger anderer Block?

In diesem Fall müssen Sie auf das Drei-Punkte-Menü in den Blockeinstellungen klicken und „Als HTML bearbeiten“ wählen.

Dadurch können Sie den HTML-Code für diesen bestimmten Block bearbeiten. Sie müssen das HTML-Tag für das Element auswählen, auf das Sie verweisen möchten. Zum Beispiel,


wenn es sich um einen Absatz handelt, oder


wenn es sich um einen Tabellenblock handelt, und so weiter.

Nun müssen Sie Ihren Anker als ID-Attribut zu diesem Tag hinzufügen, wie im folgenden Code:

Sie sehen nun einen Hinweis, dass dieser Block unerwarteten oder ungültigen Inhalt enthält. Sie müssen auf die Schaltfläche In HTML konvertieren klicken, um die vorgenommenen Änderungen zu erhalten.

Manuelles Hinzufügen eines Anker-Links im klassischen Editor

Wenn Sie noch den älteren klassischen Editor für WordPress verwenden, dann können Sie hier den Ankerlink / Sprunglink hinzufügen.

Schritt 1. Erstellen Sie den Anker-Link

Markieren Sie zunächst den Text, den Sie in den Anker-Link umwandeln möchten, und klicken Sie dann auf die Schaltfläche „Link einfügen“.

Danach müssen Sie Ihren Anker-Link mit einem #-Zeichen-Präfix hinzufügen, gefolgt von dem Slug, den Sie für den Link verwenden möchten.

Schritt 2. Fügen Sie das ID-Attribut zum verlinkten Abschnitt hinzu

Der nächste Schritt besteht darin, die Browser auf den Abschnitt zu verweisen, den Sie anzeigen möchten, wenn Benutzer auf Ihren Anker-Link klicken.

Dazu müssen Sie im klassischen Editor in den „Text“-Modus wechseln. Danach scrollen Sie nach unten zu dem Abschnitt, den Sie anzeigen möchten.

Suchen Sie nun den HTML-Tag, den Sie anvisieren möchten. Zum Beispiel,

,

,

, und so weiter.

Sie müssen das ID-Attribut mit dem Slug Ihres Anker-Links ohne das #-Präfix hinzufügen, etwa so:

Sie können nun Ihre Änderungen speichern und auf die Schaltfläche Vorschau klicken, um Ihren Anker-Link in Aktion zu sehen.

Manuelles Hinzufügen von Anker-Links in HTML

Wenn Sie es gewohnt sind, im Textmodus des alten Classic-Editors in WordPress zu schreiben, dann ist hier beschrieben, wie Sie manuell einen Anker-Link in HTML erstellen würden.

Zunächst müssen Sie den Anker-Link mit einem #-Präfix erstellen, indem Sie den üblichen -Tagverwenden, etwa so:

Beste Coffee Shops in Manhattan

Als Nächstes müssen Sie nach unten zu dem Abschnitt scrollen, der angezeigt werden soll, wenn Benutzer auf den Link klicken.

Normalerweise ist dieser Abschnitt eine Überschrift (h2, h3, h4, etc.), aber es kann auch jedes andere HTML-Element oder sogar ein einfacher Absatz sein

tag sein.

Sie müssen das ID-Attribut zum HTML-Tag hinzufügen und dann den Slug des Anker-Links ohne das #-Präfix hinzufügen.

Beste Coffee Shops in Manhattan

Sie können nun Ihre Änderungen speichern und eine Vorschau Ihrer Website anzeigen, um den Anker-Link zu testen.

So fügen Sie automatisch Überschriften als Ankerlinks in WordPress hinzu

Diese Methode eignet sich für Anwender, die regelmäßig lange Artikel veröffentlichen und Inhaltsverzeichnisse mit Ankerlinks erstellen müssen.

Als erstes müssen Sie das Plugin Easy Table of Contents installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Dieses Plugin ermöglicht es Ihnen, automatisch ein Inhaltsverzeichnis mit Ankerlinks zu erstellen. Es verwendet Überschriften, um die Inhaltsabschnitte zu erraten, und Sie können es vollständig an Ihre Bedürfnisse anpassen.

Nach der Aktivierung gehen Sie einfach auf die Seite Einstellungen “ Inhaltsverzeichnis, um die Plugin-Einstellungen zu konfigurieren.

Zuerst müssen Sie es für die Beitragstypen aktivieren, zu denen Sie ein Inhaltsverzeichnis hinzufügen möchten. Standardmäßig ist das Plugin für Seiten aktiviert, aber Sie können es auch für Ihre Beiträge aktivieren.

Sie können auch die Option „Automatisch einfügen“ aktivieren. Dadurch kann das Plugin automatisch das Inhaltsverzeichnis für alle Artikel generieren, auch für die älteren Artikel, die den Kriterien entsprechen.

Wenn Sie nur das Inhaltsverzeichnis für bestimmte Artikel automatisch generieren möchten, können Sie diese Option deaktiviert lassen.

Als Nächstes scrollen Sie ein wenig nach unten, um auszuwählen, wo Sie das Inhaltsverzeichnis anzeigen möchten und wann es ausgelöst werden soll.

Sie können weitere erweiterte Einstellungen auf der Seite überprüfen und bei Bedarf ändern.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Wenn Sie die Option „Automatisch einfügen“ aktiviert haben, können Sie jetzt einen vorhandenen Artikel mit der angegebenen Anzahl von Überschriften anzeigen.

Sie werden feststellen, dass das Plugin automatisch ein Inhaltsverzeichnis vor der ersten Überschrift im Artikel anzeigt.

Wenn Sie für bestimmte Artikel manuell ein Inhaltsverzeichnis erzeugen wollten, dann müssen Sie den Artikel bearbeiten, in dem Sie ein Inhaltsverzeichnis mit Ankerlinks anzeigen möchten.

Scrollen Sie im Bearbeitungsbildschirm des Artikels nach unten zum Reiter „Inhaltsverzeichnis“ unterhalb des Editors.

Von hier aus können Sie die Option „Inhaltsverzeichnis einfügen“ aktivieren und die Überschriften auswählen, die Sie als Ankerlinks einfügen möchten.

Sie können nun Ihre Änderungen speichern und eine Vorschau Ihres Artikels anzeigen. Das Plugin wird automatisch eine Liste von Ankerlinks als Ihr Inhaltsverzeichnis anzeigen.

Eine ausführlichere Anleitung finden Sie in unserem Artikel zum Hinzufügen von Inhaltsverzeichnissen in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ankerlinks in WordPress einfach hinzufügen können.