Ankerlinks sind ein einfaches, aber wirkungsvolles Instrument zur Verbesserung der Navigation auf längeren WordPress-Seiten oder Beiträgen. Sie ermöglichen es Nutzern, durch Anklicken eines Links schnell zu bestimmten Abschnitten auf derselben Seite zu springen, ohne durch große Mengen von Inhalten scrollen zu müssen. Ankerlinks können die Benutzerfreundlichkeit und die Suchmaschinenoptimierung verbessern, was sie zu einer unverzichtbaren Funktion für lange Inhalte oder einseitige Websites macht.

Dieser Leitfaden führt Sie durch die Erstellung von Ankerlinks in WordPress mit dem Classic Editor, dem Gutenberg Editor und dem WPBakery Page Builder. Außerdem besprechen wir die Struktur von Ankerlinks, bewährte Verfahren und häufige Anwendungsfälle.

Was ist ein Anchor Link?

Ein Ankerlink ist ein Hyperlink, der den Benutzer zu einem bestimmten Abschnitt auf derselben Seite führt, anstatt ihn auf eine andere Seite zu bringen. In einem längeren Blogbeitrag können Sie zum Beispiel eine Tabelle mit Inhalt oben, und jeder Link führt zu dem entsprechenden Abschnitt des Artikels.

Beispiel:

<h2 id="section1">Abschnitt 1: Was ist ein Anker-Link?</h2>

<a href="#section1">Gehen Sie zu Abschnitt 1</a>

Wenn Benutzer in diesem Beispiel auf "Gehe zu Abschnitt 1" klicken, werden sie direkt zu dem Teil der Seite geleitet, in dem die Überschrift "Abschnitt 1: Was ist ein Anchor Link?" befindet sich.

Vorteile der Verwendung von Anchor Links:

1. Verbesserte Lesbarkeit: In langen Artikeln können die Leser schnell zu dem Teil springen, der sie interessiert, ohne endlos scrollen zu müssen.
2. Bessere Navigation: Ankerlinks können verwendet werden, um einfach zu navigierende Abschnitte auf einseitigen Websites zu erstellen, wie z. B. "Über,” “Dienstleistungen," und "Kontakt.“
3. Verbessertes Engagement der Benutzer: Die Nutzer bleiben eher länger auf Ihrer Seite, wenn sie die gewünschten Informationen schnell finden können.
4. SEO-Boost: Suchmaschinen wie Google verwenden Ankerlinks, um die Struktur Ihrer Seite besser zu verstehen, was Ihr SEO-Ranking verbessern kann.

Die Struktur von Ankerlinks

Ein Ankerlink besteht aus zwei wesentlichen Teilen: dem ID (Bezeichner) und die Link.

1. ID (Identifikator)

Die ID ist eine eindeutige Kennung, die Sie dem HTML-Element hinzufügen, auf das Sie verlinken möchten (wie ein Rubrik oder Absatz). Zum Beispiel:

<h2 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">id="Abschnitt1"</mark>&gt;Sektion 1: Technische SEO</h2>

Das Id= "Abschnitt1" macht diese Überschrift erkennbar als eine Ankerpunkt.

2. Link

Der anklickbare Teil, der den Benutzer zur ID führt. Er wird mit dem Hashtag erstellt # gefolgt von der ID. Zum Beispiel:

Gehen Sie zu Abschnitt 1

Die href=" #section1″ weist den Browser an, bis zu dem Element mit der ID section1 zu blättern.

Beispiel in Aktion:

Wenn Sie einen ausführlichen Artikel schreiben über SEOkönnen Sie Ankerlinks zu jedem größeren Abschnitt hinzufügen:

<h2 id="on-page-seo">On-Page SEO</h2>
<h2 id="off-page-seo">Off-Page SEO</h2>
<h2 id="technical-seo">Technische SEO</h2>

Am Anfang Ihres Artikels können Sie dann ein Inhaltsverzeichnis hinzufügen, das auf diese Abschnitte verweist:

<ul>
   <li><a href="#on-page-seo">On-Page SEO</a></li>
   <li><a href="#off-page-seo">Off-Page SEO</a></li>
   <li><a href="#technical-seo">Technische SEO</a></li>
</ul>

Benutzer, die auf " klickenOn-Page SEO" werden Sie direkt zu diesem Abschnitt weitergeleitet.

Warum Ankerlinks verwenden?

1. Verbessertes Benutzererlebnis

Die Leser können leicht zu den Inhalten navigieren, die sie interessieren, was besonders bei langen Inhalten nützlich ist. Dies verringert die Frustration und macht Ihre Website benutzerfreundlicher.

2. Bessere Navigation auf einseitigen Websites

Bei einseitigen Websites können Ankerlinks verwendet werden, um Navigationsmenüs zu simulieren. Wenn Sie auf einen Menüpunkt klicken, wird der Benutzer nahtlos zum entsprechenden Abschnitt gescrollt, so dass ein nahtloses Browsing-Erlebnis entsteht.

3. Verbesserte SEO

Ankerlinks tragen zur internen Verlinkung bei, die Suchmaschinen wie Google hilft, die Struktur Ihrer Seite besser zu verstehen. Dies kann die Indizierung Ihrer Inhalte verbessern und zu besseren Rankings führen.

4. Erhöhte Benutzeraktivität

Wenn Sie den Nutzern ermöglichen, die gesuchten Inhalte schnell zu finden, können Sie die Verweildauer auf Ihrer Website erhöhen und die Absprungrate senken, was sich positiv auf die Nutzerbindungskennzahlen auswirkt.

5. Zugänglichkeit

Ankerlinks machen Ihre Website auch zugänglicher, so dass Benutzer mit Behinderungen oder solche, die Bildschirmlesegeräte verwenden, effizienter durch Ihre Inhalte navigieren können.

Wie man Ankerlinks in WordPress erstellt

Hier erfahren Sie, wie Sie mit verschiedenen WordPress-Editoren Ankerlinks erstellen können.

Ankerlinks im klassischen Editor erstellen

Wenn Sie die Klassischer Editor， müssen Sie manuell die HTML um Ankerlinks hinzuzufügen. So geht's:

Schritt 1: Fügen Sie eine eindeutige ID zu Ihrem Zielelement hinzu

1. Öffnen Sie den Beitrag oder die Seite, die Sie bearbeiten möchten, im klassischen Editor.
2. Wechseln Sie zum Menüpunkt "TextModus", um den HTML-Code zu bearbeiten.

3. Suchen Sie das Element (z.B. eine Überschrift oder einen Absatz), auf das Sie verlinken möchten, und fügen Sie eine eindeutige ID hinzu. Zum Beispiel:

<h2 id="Abschnitt1">Abschnitt 1: Was ist ein Anker-Link?

Schritt 2: Erstellen Sie den Anker-Link

1. Wechseln Sie zurück zum "VisuellModus".

2. Markieren Sie am Anfang Ihres Beitrags (oder an der Stelle, an der Sie den Link einfügen möchten) den Text, den Sie anklickbar machen möchten.

3. Klicken Sie auf das "Link einfügen/bearbeiten" in der Symbolleiste.
4. Geben Sie in das Feld URL ein #section1 (die ID, die Sie zuvor festgelegt haben).

<a href="#section1">Gehen Sie zu Abschnitt 1</a>

Schritt 3: Speichern und Vorschau

Sobald Sie die Änderungen gespeichert haben, können Sie eine Vorschau Ihrer Seite anzeigen, um sicherzustellen, dass der Link wie erwartet funktioniert. Wenn Sie auf den Link klicken, sollte die Seite zu dem Abschnitt mit der entsprechenden ID blättern.

Ankerlinks im Gutenberg-Editor erstellen

Gutenberg ist der Block-Editor von WordPress und bietet eine optimierte Möglichkeit, Ankerlinks zu erstellen.

Schritt 1: Hinzufügen einer ID zu einem Block

1. Öffnen Sie den Beitrag oder die Seite, die Sie in Gutenberg bearbeiten möchten.
2. Wählen Sie den Block, dem Sie den Anker hinzufügen möchten (z. B. einen Überschriftenblock).
3. In der rechten Seitenleiste, unter "Fortgeschrittene," finden Sie die "HTML ANCHORFeld ".

4. Geben Sie Ihre eindeutige ID ein (zum Beispiel section2).

Schritt 2: Fügen Sie den Anker-Link hinzu

1. Gehen Sie zurück an den Anfang Ihres Beitrags oder an die Stelle, an der Sie den Link hinzufügen möchten.
2. Markieren Sie den Text, den Sie anklickbar machen möchten, und klicken Sie auf das Link-Symbol in der Symbolleiste.

3. Geben Sie in das URL-Feld #section2 ein.

4. Drücken Sie "Enter", um den Link zu erstellen.

Schritt 3: Speichern und testen

Speichern Sie Ihren Beitrag und zeigen Sie ihn in der Vorschau an. Wenn Sie darauf klicken, sollte der Link zu dem Abschnitt mit der Anker-ID springen.

Ankerlinks in WPBakery Page Builder erstellen

WPBakery ist ein berühmter Drag-and-Drop-Seitenersteller für WordPress. Mit diesem Tool können Sie ganz einfach Ankerlinks erstellen.

Schritt 1: Fügen Sie dem Element eine eindeutige ID hinzu

1. Öffnen Sie die Seite oder den Beitrag in WPBakery Page Builder.
2. Klicken Sie auf das Element, das Sie verlinken möchten, und gehen Sie zu dessen Einstellungen.

3. Suchen Sie in den Einstellungen den Punkt "Element-ID" und geben Sie eine eindeutige ID ein (z.B. Abschnitt1).

Schritt 2: Erstellen Sie den Anker-Link

1. Wählen Sie den Text oder die Schaltfläche, von dem/der aus Sie einen Link erstellen möchten.
2. Öffnen Sie die Link-Einstellungen und geben Sie # ein.Abschnitt1 als die URL.

2. Speichern Sie die Änderungen.

Schritt 3: Speichern und Vorschau

Nachdem Sie Ihre Arbeit gespeichert haben, zeigen Sie die Seite in der Vorschau an, um den Link zu testen.

Bewährte Praktiken für die Verwendung von Ankerlinks

Um das Beste aus Ankerlinks herauszuholen, befolgen Sie diese bewährten Verfahren:

1. Eindeutige IDs sicherstellen

Jede ID muss innerhalb einer Seite eindeutig sein. Wenn zwei Elemente die gleiche ID haben, weiß der Browser nicht, wohin er blättern soll, und der Link funktioniert möglicherweise nicht richtig.

2. Vermeiden Sie Sonderzeichen

IDs sollten keine Leerzeichen, Interpunktionszeichen oder Sonderzeichen enthalten. Beschränken Sie sich auf Buchstaben, Zahlen und Bindestriche. Zum Beispiel ist Abschnitt-1 in Ordnung, aber Abschnitt 1 oder Abschnitt#1 könnte Probleme verursachen.

3. Verwenden Sie eindeutigen Anchor-Text

Vermeiden Sie vage Ankertexte wie "Klicken Sie hier" oder "Erfahren Sie mehr". Verwenden Sie stattdessen einen beschreibenden Text, der den Nutzern genau sagt, wohin der Link sie führen wird. Ein Beispiel: "Gehen Sie zum Abschnitt On-Page SEO" ist viel informativer.

4. Testen Sie Ihre Links

Testen Sie Ihre Ankerlinks immer vor der Veröffentlichung. Vergewissern Sie sich, dass jeder Link zum richtigen Abschnitt scrollt. Die Entwickler-Tools Ihres Browsers können Ihnen bei der Diagnose von Problemen helfen.

5. Vermeiden Sie nackte URLs

Vermeiden Sie die Anzeige von rohen Anker-URLs in Ihrem Text (wie https://example.com/#section1). Verwenden Sie stattdessen einen klaren, beschreibenden Linktext, der dem Benutzer einen Kontext bietet.

Anwendungsfälle für Anchor Links

Ankerlinks sind in vielen Szenarien hilfreich. Hier sind ein paar gängige Beispiele:

1. Inhaltsverzeichnis

Wenn Sie bei langen Blogbeiträgen am Anfang ein Inhaltsverzeichnis einfügen, können die Benutzer zu bestimmten Abschnitten springen, ohne scrollen zu müssen. Dies verbessert die Navigation und macht den Inhalt besser verdaulich.

2. Einzelseitige Websites

Ankerlinks sind eine gute Möglichkeit, Navigationsmenüs auf einseitigen Websites zu erstellen. Wenn Sie auf Menüpunkte wie "Über uns" oder "Dienstleistungen" klicken, wird der Benutzer zu diesen Abschnitten auf derselben Seite weitergeleitet.

3. Call-to-Action (CTA)-Schaltflächen

Verwenden Sie Ankerlinks, um Benutzer zu bestimmten Aktionen zu leiten, z. B. zum Ausfüllen eines Formulars oder zur Ansicht eines Produkts. Eine Schaltfläche "Mehr erfahren" kann zum Beispiel zu einem detaillierten Abschnitt weiter unten auf der Seite führen.

4. Nach oben scrollen Schaltflächen

Durch Hinzufügen einer Schaltfläche "Nach oben scrollen" können Benutzer schnell an den Anfang einer langen Seite zurückkehren, ohne manuell scrollen zu müssen.

Häufig gestellte Fragen

1. Wie unterscheiden sich Ankerlinks von normalen Links?

Ankerlinks navigieren innerhalb der gleichen Seite, während normale Links in der Regel zu einer anderen Seite führen. Ankerlinks verbessern oft die Navigation in langen Inhalten oder auf einseitigen Websites.

2. Helfen Ankerlinks bei der Suchmaschinenoptimierung?

Ja, Ankerlinks können Teil einer guten Strategie für die interne Verlinkung sein. Sie helfen den Suchmaschinen, die Struktur Ihrer Seite zu verstehen, und verbessern die Zugänglichkeit und die Benutzerfreundlichkeit Ihrer Seite.

3. Wie kann ich Ankerlinks testen?

Am einfachsten ist es, wenn Sie auf den Link klicken und sehen, ob er Sie zum richtigen Abschnitt führt. Sie können auch die Entwickler-Tools Ihres Browsers verwenden, um eventuelle Probleme mit Ihren Anker-Links zu untersuchen und zu beheben.

4. Gibt es Plugins für die Erstellung von Ankerlinks?

Ja, mit vielen Page Buildern wie WPBakery und Elementor können Sie ganz einfach Ankerlinks erstellen. Sie können auch spezielle Plugins für Inhaltsverzeichnisse verwenden, die automatisch Ankerlinks für Überschriften erzeugen.

Fazit

Ankerlinks sind für die Verbesserung der Benutzernavigation unerlässlich, insbesondere bei langen Inhalten und einseitigen Websites. Wenn Sie den Nutzern die Möglichkeit geben, direkt zu bestimmten Abschnitten zu springen, verbessert das die Lesbarkeit, steigert das Engagement und trägt positiv zur Suchmaschinenoptimierung bei. Unabhängig davon, ob Sie den klassischen Editor, Gutenberg oder WPBakery Page Builder verwenden, ist das Hinzufügen von Ankerlinks ein einfacher Prozess, der das Benutzererlebnis auf Ihrer Website erheblich verbessern kann. Wenn Sie sich an bewährte Verfahren halten - wie die Verwendung eindeutiger IDs, klarer Ankertexte und das Testen Ihrer Links - können Sie eine reibungslose Navigation und eine bessere Benutzerfreundlichkeit für Ihre Besucher gewährleisten.