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.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
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>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: Was ist ein Anchor Link?” is located.
Vorteile der Verwendung von Anchor Links:
- Verbesserte Lesbarkeit: In langen Artikeln können die Leser schnell zu dem Teil springen, der sie interessiert, ohne endlos scrollen zu müssen.
- Bessere Navigation: Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “Über,” “Dienstleistungen,” and “Kontakt."
- Verbessertes Engagement der Benutzer: Die Nutzer bleiben eher länger auf Ihrer Seite, wenn sie die gewünschten Informationen schnell finden können.
- SEO-Boost: Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
Die Struktur von Ankerlinks
Ein Ankerlink besteht aus zwei wesentlichen Teilen: dem ID (Bezeichner) und die Link.
- 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 class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="Abschnitt1"</mark>>Sektion 1: Technische SEO</h2>Das Id= “section1” macht diese Überschrift erkennbar als eine Ankerpunkt.
- Link
The clickable part that directs the user to the ID. It’s created using the hashtag # gefolgt von der ID. Zum Beispiel:
Gehen Sie zu Abschnitt 1Die href=” #section1″ weist den Browser an, bis zu dem Element mit der ID section1 zu blättern.
Beispiel in Aktion:
If you’re writing a detailed article about 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>
Users who click “On-Page SEO” will be taken straight to that section.
Warum Ankerlinks verwenden?
- 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.
- 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.
- 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.
- Erhöhte Benutzeraktivität
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- 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
Here’s how to create anchor links using different WordPress editors.
Ankerlinks im klassischen Editor erstellen
If you’re using the Klassischer Editor， müssen Sie manuell die HTML to add anchor links. Here’s how:
Schritt 1: Fügen Sie eine eindeutige ID zu Ihrem Zielelement hinzu
- Öffnen Sie den Beitrag oder die Seite, die Sie bearbeiten möchten, im klassischen Editor.
- Switch to the “Text” mode to edit the HTML.
- 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
- Switch back to the “Visuell” mode.
- 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.
- Klicken Sie auf das "Link einfügen/bearbeiten” button in the toolbar.
- 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
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
Ankerlinks im Gutenberg-Editor erstellen
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
Schritt 1: Hinzufügen einer ID zu einem Block
- Öffnen Sie den Beitrag oder die Seite, die Sie in Gutenberg bearbeiten möchten.
- Wählen Sie den Block, dem Sie den Anker hinzufügen möchten (z. B. einen Überschriftenblock).
- In the right-hand sidebar, under “Fortgeschrittene,” find the “HTML ANCHORFeld ".
- Geben Sie Ihre eindeutige ID ein (zum Beispiel section2).
Schritt 2: Fügen Sie den Anker-Link hinzu
- Gehen Sie zurück an den Anfang Ihres Beitrags oder an die Stelle, an der Sie den Link hinzufügen möchten.
- Markieren Sie den Text, den Sie anklickbar machen möchten, und klicken Sie auf das Link-Symbol in der Symbolleiste.
- Geben Sie in das URL-Feld #section2 ein.
- Press “Enter” to create the link.
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
- Öffnen Sie die Seite oder den Beitrag in WPBakery Page Builder.
- Klicken Sie auf das Element, das Sie verlinken möchten, und gehen Sie zu dessen Einstellungen.
- In the settings, find the “Element-ID” field and enter a unique ID (e.g., section1).
Schritt 2: Erstellen Sie den Anker-Link
- Wählen Sie den Text oder die Schaltfläche, von dem/der aus Sie einen Link erstellen möchten.
- Öffnen Sie die Link-Einstellungen und geben Sie # ein.Abschnitt1 als die URL.
- 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:
- Eindeutige IDs sicherstellen
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- 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.
- Verwenden Sie eindeutigen Anchor-Text
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- Testen Sie Ihre Links
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- 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:
- 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.
- Einzelseitige Websites
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- Call-to-Action (CTA)-Schaltflächen
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- Nach oben scrollen Schaltflächen
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
Häufig gestellte Fragen
- 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.
- Helfen Ankerlinks bei der Suchmaschinenoptimierung?
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- 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.
- 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.