Wir verwenden gelegentlich Ankerlinks in unseren längeren WordPress-Posts, um Benutzern zu helfen, schnell zu dem Abschnitt zu gelangen, den sie lesen möchten.
Ankerlinks werden häufig in Inhaltsverzeichnisabschnitten verwendet, da sie Benutzern helfen, in einem längeren Artikel nach oben und unten zu navigieren, ohne die Seite neu laden zu müssen. Es kann auch bei der SEO helfen, da Google sie möglicherweise unter Ihren Suchlisten anzeigt, um die Navigation zu erleichtern (mehr dazu später).
In dieser Schritt-für-Schritt-Anleitung erklären wir, was Ankerlinks sind und zeigen Ihnen, wie Sie ganz einfach Ankerlinks in WordPress hinzufügen.
Bereit? Beginnen wir mit einem Live-Beispiel für Ankerlinks.
Nachfolgend finden Sie eine Liste aller Themen, die wir in diesem Handbuch behandeln. Fahren Sie fort und klicken Sie auf einen dieser Links, und Sie werden zu diesem bestimmten Abschnitt weitergeleitet.
- Was ist ein Ankerlink?
- Wie füge ich Ankerlinks in WordPress manuell hinzu?
- Wie füge ich Ankerlinks mit dem Classic Editor in WordPress manuell hinzu?
- Wie füge ich Ankerlinks in HTML manuell hinzu?
- Wie füge ich Überschriften automatisch als Ankerlinks in WordPress hinzu?
Was ist ein Ankerlink?
Ein Ankerlink ist eine Art von Link auf der Seite, der Sie zu einer bestimmten Stelle auf derselben Seite führt. Es ermöglicht Benutzern, zu dem Abschnitt zu springen, der sie am meisten interessiert.
Sehen Sie sich den animierten Screenshot unten an:
Wie Sie sehen können, führt ein Klick auf den Ankerlink den Benutzer zum entsprechenden Abschnitt auf derselben Seite.
Ankerlinks werden häufig in längeren Artikeln als Inhaltsverzeichnis verwendet, sodass Benutzer schnell zu den Abschnitten springen können, die sie lesen möchten.
Eine weitere Verwendung von Ankerlinks besteht darin, Lesezeichenlinks auf Ihrer WordPress-Site zu erstellen. Auf diese Weise können Sie den Lesezeichenlink in sozialen Medien oder E-Mail-Newslettern teilen, sodass Ihre Benutzer beim Laden der Seite sofort zu dem Abschnitt springen, den sie sehen möchten.
Warum und wann sollten Sie Ankerlinks verwenden?
Ein durchschnittlicher Benutzer verbringt weniger als ein paar Sekunden, bevor er entscheidet, ob er bleiben oder Ihre Website verlassen möchte. Sie haben nur diese wenigen Sekunden, um die Benutzer zum Bleiben zu bewegen.
Der beste Weg, dies zu tun, besteht darin, ihnen zu helfen, die gesuchten Informationen schnell zu finden.
Ankerlinks erleichtern dies, indem sie es Benutzern 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 eignen sich auch hervorragend für WordPress SEO. Google kann einen Ankerlink in den Suchergebnissen als „Sprung zum Link“ anzeigen.
Manchmal kann Google auch mehrere Links von dieser Seite als Sprung-zu-Links anzeigen, was nachweislich die Klickrate in den Suchergebnissen erhöht. Mit anderen Worten, Sie erhalten mehr Verkehr auf Ihrer Website.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie ganz einfach Ankerlinks in WordPress hinzufügen können.
Manuelles Hinzufügen von Ankerlinks in WordPress
Wenn Sie Ihrem Artikel nur ein paar Anker-Links oder Lesezeichen-Links hinzufügen möchten, können Sie dies ganz einfach manuell tun.
Grundsätzlich müssen Sie zwei Dinge hinzufügen, damit ein Ankertext wie beabsichtigt funktioniert.
- Erstellen Sie einen Ankerlink mit einem #-Zeichen vor dem Ankertext.
- Ergänzen Sie die
id
-Attribut auf den Text, in den der Benutzer geführt werden soll.
Beginnen wir mit dem Ankerverbindungsteil.
Schritt 1. Erstellen eines Ankerlinks
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 zum Einfügen von Links 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 Ankerlink verwenden Sie jedoch einfach # als Präfix und geben die Schlüsselwörter für den Abschnitt ein, zu dem der Benutzer springen soll.
Klicken Sie anschließend auf die Eingabetaste, um den Link zu erstellen.
Einige hilfreiche Tipps zur Auswahl des Textes, der als Ankerlink # verwendet werden soll:
- Verwenden Sie die Schlüsselwörter, die sich auf den Abschnitt beziehen, auf den Sie verlinken.
- Machen Sie Ihren Ankerlink nicht unnötig lang oder komplex.
- Verwenden Sie Bindestriche, um Wörter zu trennen und sie lesbarer zu machen.
- Sie können im Ankertext die Großschreibung verwenden, um ihn besser lesbar zu machen. Zum Beispiel:
#Best-Coffee-Shops-Manhattan
.
Nachdem 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 Ankerlink nicht als ID finden können.
Lassen Sie uns das beheben, indem wir Browser auf den Bereich, Abschnitt oder Text verweisen, der angezeigt werden soll, wenn Benutzer auf den Ankerlink klicken.
Schritt 2. Fügen Sie das ID-Attribut zum verknüpften Abschnitt hinzu
Scrollen Sie im Inhaltseditor nach unten zu dem Abschnitt, zu dem der Benutzer navigieren soll, wenn er auf den Ankerlink klickt. Normalerweise ist es eine Überschrift für einen neuen Abschnitt.
Klicken Sie anschließend auf den Block, um ihn auszuwählen, und klicken Sie dann in den Blockeinstellungen auf die Registerkarte Erweitert, um ihn zu erweitern. Sie können einfach auf die Registerkarte „Erweitert“ unter den Überschriftblockeinstellungen klicken.
Danach müssen Sie den gleichen Text, den Sie als Anker-Link hinzugefügt haben, unter das Feld ‚HTML-Anker‘ hinzufügen. Stellen Sie sicher, dass Sie den Text ohne das Präfix # hinzufügen.
Sie können Ihren Beitrag jetzt speichern und Ihren Ankerlink in Aktion sehen, indem Sie auf den Vorschau-Tab klicken.
Was ist, wenn der Abschnitt, den Sie anzeigen möchten, keine Überschrift, sondern nur ein normaler Absatz oder ein anderer Block ist?
In diesem Fall müssen Sie in den Blockeinstellungen auf das Drei-Punkte-Menü klicken und „Als HTML bearbeiten“ auswählen.
Auf diese Weise können Sie den HTML-Code für diesen bestimmten Block bearbeiten. Sie müssen das HTML-Tag für das Element suchen, auf das Sie verweisen möchten. Zum Beispiel, <p>
wenn es ein Absatz ist, oder <table>
wenn es sich um einen Tabellenblock handelt, und so weiter.
Jetzt müssen Sie diesem Tag Ihren Anker als ID-Attribut hinzufügen, wie im folgenden Code:
<p id="best-coffee-shops-manhattan">
Sie sehen nun einen Hinweis, dass dieser Block unerwartete oder ungültige Inhalte enthält. Sie müssen auf „In HTML konvertieren“ klicken, um die vorgenommenen Änderungen beizubehalten.
Manuelles Hinzufügen eines Ankerlinks im klassischen Editor
Wenn Sie noch den älteren klassischen Editor für WordPress verwenden, können Sie den Ankerlink / Sprunglink wie folgt hinzufügen.
Schritt 1. Erstellen Sie den Ankerlink
Wählen Sie zuerst den Text aus, den Sie in den Ankerlink ändern 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 gefolgt von dem Slug hinzufügen, den Sie für den Link verwenden möchten.
Schritt 2. Fügen Sie das ID-Attribut zum verknüpften Abschnitt hinzu
Der nächste Schritt besteht darin, die Browser auf den Abschnitt zu verweisen, den Sie anzeigen möchten, wenn Benutzer auf Ihren Ankerlink klicken.
Dazu müssen Sie im klassischen Editor in den Modus „Text“ wechseln. Scrollen Sie dann nach unten zu dem Abschnitt, den Sie anzeigen möchten.
Suchen Sie nun das HTML-Tag, auf das Sie abzielen möchten. Zum Beispiel, <h2>
, <h3>
, <p>
, und so weiter.
Sie müssen das ID-Attribut mit dem Slug Ihres Ankerlinks ohne das Präfix # hinzufügen, wie folgt:
<h2 id="best-coffee-shops-manhattan">
Sie können jetzt Ihre Änderungen speichern und auf die Schaltfläche Vorschau klicken, um Ihren Ankerlink in Aktion zu sehen.
Manuelles Hinzufügen von Ankerlinks in HTML
Wenn Sie es gewohnt sind, im Textmodus des alten klassischen Editors in WordPress zu schreiben, können Sie wie folgt manuell einen Ankerlink in HTML erstellen.
Zuerst müssen Sie den Ankerlink mit einem #-Präfix erstellen, indem Sie das übliche verwenden <a href="">
markieren, wie folgt:
<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>
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 usw.), aber es kann sich auch um jedes andere HTML-Element oder sogar um ein einfaches
-Absatz-Tag handeln.
Sie müssen dem HTML-Tag das ID-Attribut hinzufügen und dann den Anker-Link-Slug ohne das Präfix # hinzufügen.
<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h4>
Sie können jetzt Ihre Änderungen speichern und eine Vorschau Ihrer Website anzeigen, um den Ankerlink zu testen.
So fügen Sie Überschriften automatisch als Ankerlinks in WordPress hinzu
Diese Methode eignet sich für Benutzer, die regelmäßig lange Artikel veröffentlichen und ein Inhaltsverzeichnis mit Ankerlinks erstellen müssen.
Das erste, was Sie tun müssen, ist die Installation und Aktivierung des Einfaches Inhaltsverzeichnis Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Mit diesem Plugin können Sie automatisch ein Inhaltsverzeichnis mit Ankerlinks generieren. Es verwendet Überschriften, um die Inhaltsabschnitte zu erraten, und Sie können es vollständig an Ihre Bedürfnisse anpassen.
Gehen Sie nach der Aktivierung einfach zu Einstellungen » Inhaltsverzeichnis Seite, um die Plugin-Einstellungen zu konfigurieren.
Zuerst müssen Sie es für die Beitragstypen aktivieren, denen Sie ein Inhaltsverzeichnis hinzufügen möchten. Standardmäßig ist das Plugin für Seiten aktiviert, Sie können es aber auch für Ihre Beiträge aktivieren.
Sie können auch die Option zum automatischen Einfügen aktivieren. Dadurch kann das Plugin automatisch das Inhaltsverzeichnis für alle Artikel generieren, einschließlich der älteren Artikel, die den Kriterien entsprechen.
Wenn Sie nur für bestimmte Artikel automatisch Inhaltsverzeichnisse generieren möchten, können Sie diese Option deaktiviert lassen.
Scrollen Sie als Nächstes ein wenig nach unten, um auszuwählen, wo Sie das Inhaltsverzeichnis anzeigen möchten und wann es ausgelöst werden soll.
Sie können andere 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 zum automatischen Einfügen aktiviert haben, können Sie jetzt einen vorhandenen Artikel mit der angegebenen Anzahl von Überschriften anzeigen.
Sie werden feststellen, dass das Plugin vor der ersten Überschrift im Artikel automatisch ein Inhaltsverzeichnis anzeigt.
Wenn Sie Inhaltsverzeichnisse für bestimmte Artikel manuell erstellen möchten, müssen Sie den Artikel bearbeiten, in dem Sie ein Inhaltsverzeichnis mit Ankerlinks anzeigen möchten.
Scrollen Sie auf dem Nachbearbeitungsbildschirm nach unten zum Tab „Inhaltsverzeichnis“ unter dem Editor.
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 jetzt Ihre Änderungen speichern und eine Vorschau Ihres Artikels anzeigen. Das Plugin zeigt automatisch eine Liste mit Ankerlinks als Inhaltsverzeichnis an.
Ausführlichere Anweisungen finden Sie in unserem Artikel zum Hinzufügen von Inhaltsverzeichnissen in WordPress.
Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie Ankerlinks in WordPress einfach hinzufügen. Vielleicht möchten Sie auch unsere Tipps zur richtigen Optimierung Ihrer Blog-Posts für SEO und unsere Auswahl der besten WordPress Page Builder-Plugins lesen.