Als Unternehmer sind Sie immer auf der Suche nach Möglichkeiten, die Nutzerzufriedenheit auf Ihrer WordPress-Website zu verbessern. Die nächste Kennzahl, die Sie im Visier haben: Ihre Absprungrate.
Eine hohe Absprungrate muss kein Grund zur Panik sein. Die durchschnittliche Absprungrate liegt bei 50,9 %, je nach Branche. Bei eCommerce-Websites liegt sie bei 54,54 %.
Vielleicht ist Ihre Website so gut gestaltet, dass die Nutzer schnell die gewünschten Informationen erhalten und sie dann verlassen. Das zählt trotzdem als Absprung.
Zu viele Absprünge können aber auch auf eine schlecht gestaltete Website hindeuten, so dass es eine gute Idee ist, diese Kennzahl so weit wie möglich zu verbessern.
Die Verbesserung der Benutzerfreundlichkeit (UX) ist eine todsichere Methode, um die Absprungrate zu senken, und das Hinzufügen von Ankerlinks ist eine überraschend wirkungsvolle Methode, dies zu erreichen.
Was ist ein Hyperlink?
Bevor wir mehr über Ankerlinks sprechen, müssen wir uns ansehen, was ein Hyperlink ist.
Wahrscheinlich kennen Sie diese Links bereits: farbiger oder unterstrichener Text, der Sie zu einer anderen Webseite führt, wenn Sie darauf klicken. Man unterscheidet zwischen internen Links, die auf dieselbe Website verweisen, und externen Links, die auf eine andere Website verweisen.
Die Anatomie eines Hyperlinks umfasst den sichtbaren Text, den so genannten Ankertext, und den Uniform Resource Locator (URL), auf den er verweist. In der Formulierung „Besuchen Sie Bluehost für schnelles Webhosting“ ist der unterstrichene Satz „Besuchen Sie Bluehost“ der Ankertext.
In der HyperText Markup Language (HTML) würde dieser Hyperlink folgendermaßen aussehen:
<a href=„https://www.bluehost.com/“>besuchen Sie Bluehost</a>
Was ist ein Anker-Link?
Ankerlinks, die oft auch als Seitensprünge oder Sprunglinks bezeichnet werden, können Nutzern helfen, schnell auf einer Seite zu navigieren. Im Gegensatz zu internen und externen Links bleiben Sie bei Ankerlinks auf derselben Seite und gelangen zu einem bestimmten Abschnitt.
Die Anatomie eines Anker-Links ist der eines typischen Hyperlinks sehr ähnlich. Wir werden später noch genauer darauf eingehen, wie man einen Anker-Link manuell erstellt. Hier ist ein Beispiel für Anker-Links in Aktion aus unserem Artikel über die Strukturierung einer Website:
Wenn Sie auf einen Link im Inhaltsverzeichnis klicken, springen Sie direkt zu diesem Abschnitt auf der Seite und sehen, wie sich die URL in der Adressleiste ändert. In diesem Beispiel ändert sich die URL von https://www.bluehost.com/blog/website-structuring in https://www.bluehost.com/blog/website-structuring/#What-Website-Structure-Is, wenn Sie auf den Ankerlink „Die Struktur der Website“ klicken.
Warum Sie Ankerlinks verwenden sollten
Das Einfügen von Ankerlinks in Ihre Artikel und Seiten ist eine kleine Änderung, die aber eine große Wirkung haben kann. Hier sind nur einige der Vorteile:
- Verbesserte UX: Ankerlinks vereinfachen die Navigationsmenüs und die Organisation der Website, so dass die Nutzer schnell das finden, wonach sie suchen. Eine gute UX stellt die Besucher zufrieden und erhöht die Wahrscheinlichkeit, dass sie auf Ihrer Website bleiben.
- Erhöhtes Engagement: Frustrierte Nutzer, die sich auf Ihrer Website nicht zurechtfinden, neigen dazu, die Seite zu verlassen. Selbst wenn es nur eine Sekunde zu lange dauert, bis sie finden, was sie suchen, verlassen sie die Seite. Ankerlinks ermöglichen es ihnen, schnell und einfach zu finden, was sie suchen, ohne eine riesige Seite durchblättern zu müssen, und sie bleiben länger auf Ihrer Website, während sie lesen und stöbern.
- Bessere Suchmaschinenoptimierung (SEO): Ankerlinks sind wichtig, um Ihre Seite so zu strukturieren, dass Suchmaschinen-Indexer sie verstehen können. Beschreibender Ankertext kann die Suchmaschinenoptimierung verbessern, indem er Google mitteilt, worum es auf Ihrer Seite geht. Außerdem können Ihre Ankerlinks unten in den Google-Suchergebnissen erscheinen, so dass Sie mehr Möglichkeiten haben, Klicks zu erhalten.
- Zugänglichkeit und Reaktionsfähigkeit: Navigationshilfen können denjenigen, die sie benötigen, sehr helfen. Personen, die Bildschirmlesegeräte und andere Hilfsmittel verwenden, finden Ihre Website leichter zugänglich, wenn Sie Ankerlinks verwenden. Sie helfen sogar Besuchern auf kleineren mobilen Bildschirmen, eine lange Seite problemlos zu navigieren.
Kurz gesagt, Ankerlinks erhöhen das Engagement und die Zufriedenheit der Nutzer, was zu einer längeren Verweildauer auf Ihrer Website und einer geringeren Absprungrate führen kann.
Wann Sie Ankerlinks verwenden sollten
Brauchen Sie Hilfe bei der Entscheidung, wo Sie Ankerlinks auf Ihrer Website platzieren sollten? Hier sind ein paar Ideen:
- Inhaltsverzeichnis (ToC): Bei langen Seiten, die durch verschiedene Überschriften unterteilt sind, wie z. B. bei Artikeln, ist es eine gute Idee, ein Inhaltsverzeichnis zu haben, mit dem man direkt zu jedem Abschnitt springen kann.
- Listen und Indizes: Wenn Sie ein Dokument mit vielen einzelnen Abschnitten haben, wie z. B. einen Index oder eine FAQ-Seite, möchten Sie vielleicht Ankerlinks haben, die auf jeden Eintrag oder jede Gruppe von Einträgen zeigen.
- Zurück nach oben/unten: Ein schneller Link, der die Nutzer an den Anfang oder das Ende der Seite bringt, wird oft geschätzt, vor allem, wenn Sie kein Menü oder einen Sticky Header haben, der beim Scrollen an seinem Platz bleibt.
- Sprung zur Aufforderung zum Handeln (CTA): Leiten Sie Nutzer zu wichtigen CTAs weiter. Lassen Sie die Nutzer zum Beispiel direkt zu Ihrem Kontaktformular springen.
- Landing Pages: Vereinfachen Sie die Navigation auf Landing Pages oder One-Page-Websites mit Ankerlinks.
Herausforderungen bei der Verwendung von Ankerlinks
Ankerlinks sind zwar praktisch, aber Sie müssen sie richtig einsetzen, sonst riskieren Sie Auswirkungen auf UX, SEO und Zugänglichkeit. Achten Sie auf diese potenziellen Probleme:
- Beschädigte SEO: Links sind für die Suchmaschinenoptimierung unerlässlich, und Ankerlinks sind da keine Ausnahme. Allerdings müssen Links auf eine bestimmte Art und Weise verwendet werden, um Ihr Suchmaschinen-Ranking zu verbessern. Schlecht organisierte Sprunglinks, schlecht geschriebener oder leerer Ankertext oder nicht crawlbarer HTML-Code können Ihrer SEO schaden.
- Unordnung in der URL: Schlecht eingerichtete und organisierte Ankerlinks können die URL unübersichtlich machen. Saubere URLs sind viel benutzerfreundlicher.
- Probleme mit der Zugänglichkeit: Sprunglinks können zwar die Zugänglichkeit verbessern, sie können aber auch ein Hindernis darstellen, wenn sie nicht in Übereinstimmung mit den Web Content Accessibility Guidelines (WCAG) implementiert werden. Sie können zum Beispiel einen Link „Navigation überspringen“ hinzufügen, der es Nutzern mit Bildschirmlesegeräten ermöglicht, direkt zum Hauptinhalt der Seite zu springen.
- Schlechte Reaktionsfähigkeit: Sprunglinks können auf verschiedenen Geräten unterschiedlich funktionieren. Wenn Sie nicht sicherstellen, dass diese Links auf mehreren Geräten funktionieren, könnten einige Nutzer schlechte Erfahrungen machen.
- Kaputte Links: Die Aktualisierung von Sprunglinks beim Hinzufügen oder Entfernen von Abschnitten zu Ihrem Inhalt ist wichtig, um fehlerhafte Links und eine schlechte Benutzerfreundlichkeit zu vermeiden.
- Technische Probleme: Sprunglinks können zu Problemen führen, wie z. B. widersprüchliches Bildlaufverhalten, das zu visuellen Störungen führt, oder Seitenelemente wie klebrige Überschriften, die einen Teil des Inhalts verdecken.
- Übermäßige Verwendung von Ankerlinks: Ankerlinks können zwar hilfreich sein, aber ihre Verwendung auf kurzen Seiten, die sie nicht benötigen, oder das Hinzufügen von zu vielen Links auf einer Seite kann überwältigend sein.
Glücklicherweise lassen sich viele dieser Probleme leicht beheben. Behalten Sie sie im Hinterkopf, wenn Sie Ankerlinks zu Ihrer Website hinzufügen.
Wie man Ankerlinks in WordPress erstellt
Es gibt verschiedene Möglichkeiten, Ankerlinks in WordPress hinzuzufügen, von der manuellen Erstellung mit HTML bis hin zur einfachen Verwendung der integrierten Editoren. Hier finden Sie mehrere Anleitungen, die Sie dabei unterstützen.
Ankerlinks im Gutenberg-Block-Editor erstellen
Erstellen wir zunächst einen Ankerlink mit dem Gutenberg-Block-Editor, Schritt für Schritt.
Schritt 1: Fügen Sie den Block hinzu, zu dem Sie springen wollen
Dies kann eine Überschrift, ein Absatzblock, ein Bild oder etwas anderes sein.
Schritt 2: Öffnen Sie die Registerkarte Einstellungen und klicken Sie auf das Dropdown-Menü Erweitert
Sie finden die Registerkarte „Einstellungen“ in der oberen rechten Ecke und das Dropdown-Menü „Erweitert“ in dem geöffneten Fenster.
Schritt 3: Suchen Sie das HTML-Anker-Eingabefeld
Dieser befindet sich auf der Registerkarte Erweitert. Wenn Sie ihn nicht sehen, versuchen Sie es mit einem anderen Blocktyp, z. B. einer Überschrift.
Geben Sie einen Namen in das HTML-Ankerfeld ein und achten Sie darauf, dass er sich von allen anderen Ankern auf der Seite unterscheidet. Sie können auch einige Symbole, wie Bindestriche und Punkte, verwenden. Denken Sie daran, dass dies in der URL erscheint, wenn der Ankerlink angeklickt wird.
Schritt 4: Link zu Ihrem Anker
Fügen Sie dazu den Text, das Bild oder die Schaltfläche hinzu, der/die Ihr klickbarer Sprunglink werden soll.
Markieren Sie es, wählen Sie die Schaltfläche „Link“ und geben Sie den HTML-Anker ein, den Sie zuvor gesetzt haben, mit einem vorangestellten Hashtag. Wenn Ihr Anker-Tag „example“ war, geben Sie „#example“ ein.
Probieren Sie es in einer Vorschau aus, und Sie sollten sofort zu dem von Ihnen festgelegten Ankerpunkt springen.
Ankerlinks im klassischen Editor hinzufügen
Wenn Sie den klassischen Editor bevorzugen, ist es auch hier möglich, Ankerlinks in WordPress zu erstellen. Der Prozess ist etwas aufwendiger, aber immer noch relativ einfach.
Schritt 1: Wechseln Sie zum Texteditor
In der oberen rechten Ecke des Bearbeitungsbereichs sehen Sie zwei Registerkarten: Visuell und Text. Klicken Sie auf Text, um umzuschalten.
Schritt 2: Hinzufügen der Anker-ID
Suchen Sie das Element, zu dem Sie springen möchten. In diesem Beispiel verwenden wir eine Überschrift, die wie folgt aussieht:
<h2>Anchor Link 2</h2> Fügen Sie ein „id“-Tag mit dem gewünschten Namen für den Anker hinzu. So sollte es aussehen:
<h2 id="anchor-link-two">Anchor Link 2</h2> 
Sie können dieses ID-Tag in ähnlicher Weise in den meisten HTML-Attributen verwenden. Hier sehen Sie, wie es in einem typischen Absatz aussehen würde.
<p id="anchor-link-two">Anchor Link 2</p> Schritt 3: Link zu Ihrem Anker
Wechseln Sie zurück zum visuellen Editor und fügen Sie das Element hinzu, auf das die Benutzer klicken werden, um zum gewünschten Abschnitt zu springen.
Markieren Sie ihn, wählen Sie die Schaltfläche „Link“ und geben Sie dann die zuvor festgelegte Anker-ID sowie einen Hashtag ein. In diesem Beispiel geben wir „#anchor-link-two“ ein.
Verwenden Sie, wie beim Gutenberg-Editor, den Vorschaubildschirm, um ihn zu testen und sicherzustellen, dass er funktioniert.
Ankerlinks manuell mit HTML erstellen
Ähnlich wie im obigen Beispiel können Sie HTML verwenden, um direkt einen Ankerlink zu erstellen. So machen Sie es.
Schritt 1: Erstellen eines Anker-Tags
Benennen Sie zunächst den Anker. Sie können dies mit dem HTML-Tag „id“ tun, der fast überall platziert werden kann. Hier sind ein paar Beispiele:
• <a id="anchor-example"></a>
• <h1 id="anchor-example">Heading example</h1>
• <p id="anchor-example">Example text.</p>
• <span id="anchor-example"></span>Schritt 2: Verknüpfung mit dem Anker-Tag
Erstellen Sie einen Link, der beim Anklicken zu dem von Ihnen angegebenen Anker springt. Stellen Sie sicher, dass Sie ein Hashtag-Symbol vor der ID verwenden. Ein Beispiel:
<a href="#anchor-example">Example link.</a> Schritt 2: Verknüpfung mit dem Anker-Tag
Erstellen Sie einen Link, der beim Anklicken zu dem von Ihnen angegebenen Anker springt. Stellen Sie sicher, dass Sie ein Hashtag-Symbol vor der ID verwenden. Ein Beispiel:
<a href="#anchor-example">Example link.</a>Schritt 3. Einfügen des HTML-Codes
WordPress ermöglicht es Ihnen, HTML in verschiedenen Bereichen Ihrer Website zu bearbeiten, und WordPress-Plugins können sogar noch mehr Optionen bieten. Wir haben bereits beschrieben, wie Sie mit dem klassischen Editor zu HTML gelangen. Es gibt noch ein paar weitere Möglichkeiten.
Sie können HTML im Block-Editor bearbeiten, indem Sie einen Block hinzufügen, ihn auswählen, auf die drei vertikalen Punkte klicken und Als HTML bearbeiten wählen .
Sie können den Code-Editor auch öffnen, indem Sie auf die drei vertikalen Punkte in der oberen rechten Ecke des Bildschirms klicken und den Editor aus dem Dropdown-Menü auswählen.
Schließlich können Sie den HTML-Code des Themas bearbeiten, indem Sie zu Extras > Editor für Themendateien navigieren, obwohl es nicht empfehlenswert ist, dieses direkt zu bearbeiten. Stattdessen können Sie ein Child-Theme einrichten.
Hinzufügen von Ankerlinks zu einem WordPress-Menüpunkt
Es ist auch möglich, Ankerlinks zu einem WordPress-Menü hinzuzufügen. Diese funktionieren genau wie jeder andere Sprunglink. Der Nutzen dieser Funktion ist zwar begrenzt, aber auf einseitigen Websites kann sie hilfreich sein.
Durch die Kombination mit dem Plugin für bedingte Menüs können Sie Menüs mit Ankerlinks auf bestimmten Seiten erstellen, z. B. auf Ihrer Homepage oder Landing Pages. Hier erfahren Sie, wie Sie es einrichten können:
Schritt 1. Erstellen Sie eine Anker-ID
Wie Sie einen Anker-Link manuell erstellen können, erfahren Sie in der obigen Anleitung. Suchen Sie die Überschrift, den Text oder das Bild, zu dem Sie springen möchten, und fügen Sie das Anker-ID-Attribut mit HTML hinzu.
Schritt 2. Ankerlink zum Menü hinzufügen
Navigieren Sie im WordPress-Dashboard zu Erscheinungsbild > Menüs. Erstellen Sie ein Menü und klicken Sie dann auf die Dropdown-Liste Benutzerdefinierte Links. Fügen Sie die von Ihnen erstellte Anker-ID mit einem vorangestellten Hashtag ein, und klicken Sie dann auf Zum Menü hinzufügen.
Denken Sie daran, dass dies auf Seiten ohne die Anker-ID nicht richtig funktioniert, so dass es keine gute Idee ist, ein solches globales Menü auf einer mehrseitigen Website zu erstellen.
Schritt 3. Bedingungen einrichten
Sobald Sie Ihr Menü erstellt haben, klicken Sie auf die Registerkarte Standorte verwalten . Klicken Sie unter einem der vorgegebenen Menüpunkte auf + Bedingtes Menü und dann auf + Bedingungen. Sie können die Bedingungen so einstellen, dass das Menü nur auf bestimmten Seiten erscheint.
Verwenden Sie ein WordPress-Plugin, um Ankerlinks hinzuzufügen
Und schließlich können Sie ein Plugin installieren, wenn alle oben genannten Methoden zu zeitaufwändig sind.
Viele Plugins können Ihnen bei der Erstellung von Ankerlinks helfen, einschließlich Return-to-Top-Links, aber lassen Sie uns eines der besten hervorheben: Easy Table of Contents.
Dieses Plugin funktioniert mit Gutenberg, dem klassischen Editor und sogar mit Page Buildern. Sie können ToCs manuell einfügen oder es so einrichten, dass es sie automatisch in jeden Blogbeitrag und jede Seite einfügt.
Bewährte Praktiken für Ankerlinks
Da Sie nun wissen, wie Sie Ankerlinks in WordPress erstellen können, sollten Sie diese Tipps befolgen, um sie gut umzusetzen.
Ankerlinks strategisch platzieren
Wenn Sie Ankerlinks einbauen, platzieren Sie sie auf den richtigen Seiten. Ganz gleich, ob es sich um ein Inhaltsverzeichnis oder eine Möglichkeit zum schnellen Überfliegen von FAQs handelt, die Benutzerfreundlichkeit sollte immer an erster Stelle stehen.
Wenn Sie Ankerlinks einbauen, platzieren Sie sie auf den richtigen Seiten. Ganz gleich, ob es sich um ein Inhaltsverzeichnis oder eine Möglichkeit zum schnellen Überfliegen von FAQs handelt, die Benutzerfreundlichkeit sollte immer an erster Stelle stehen.
Berücksichtigen Sie auch die UX auf verschiedenen Geräten und wo Ankerlinks für mobile Nutzer von Vorteil sein könnten. Etwas, das auf einem Computermonitor gut aussieht, kann auf einem Telefon viel überwältigender wirken.
Verwenden Sie den richtigen Ankertext
Der Ankertext ist hier genauso wichtig wie bei jedem internen oder externen Link. Ein guter Ankertext verbessert die Suchmaschinenoptimierung, indem er den Suchmaschinen hilft, die Struktur Ihrer Seite zu kategorisieren und für die Besucher intuitiv ist.
Verwenden Sie eine klare und direkte Formulierung, damit die Nutzer genau wissen, wohin ein Sprunglink sie führen wird. Wenn Sie zum Beispiel ein Inhaltsverzeichnis verwenden, sollten Sie die Überschriften, zu denen die Links führen, identisch formulieren. Vermeiden Sie generische Formulierungen wie „Klicken Sie hier“.
Vermeiden Sie Unordnung
Sorgen Sie für ein strukturiertes Layout, indem Sie Ankerlinks verwenden, um Ihren Inhalt zu organisieren. Widerstehen Sie dem Drang, Ankerlinks auf Seiten zu verwenden, auf denen sie nicht benötigt werden, oder zu viele Ankerlinks auf einer Seite zu verwenden. Ein einziger ToC und ein Back-to-Top-Link sind normalerweise ausreichend.
Achten Sie außerdem darauf, dass Ihre Ankerlinks nicht in einer neuen Registerkarte geöffnet werden, was kontraproduktiv ist.
Testen Sie Ihre Ankerlinks
Testen Sie regelmäßig Ihre Ankerlinks, insbesondere nach der Aktualisierung von Inhalten oder der Änderung von Überschriften. Testen Sie die Ankerlinks auf mehreren Geräten und Browsern, einschließlich Screenreadern.
Berücksichtigen Sie hier die allgemeine UX. Fühlt sich der Bildschirm nach dem Scrollen eingeengt oder unübersichtlich an? Brauchen Sie mehr Leerraum? Ist der Text unter Ihrer klebrigen Kopfzeile versteckt?
Gestalten Sie Ihre Ankerlinks
Unterscheiden Sie Ankerlinks von internen oder externen Links durch Beschriftung oder Gestaltung. Erwägen Sie die Einrichtung von „klebrigen“ Ankerlinks, die den Nutzern beim Scrollen folgen, anstelle von Links im Inhalt selbst, oder erstellen Sie Akkordeons, die Ihr Inhaltsverzeichnis unter einem klickbaren Element verstecken.
Machen Sie insgesamt deutlich, dass diese Sprunglinks dem Benutzer bei der Navigation auf der Seite helfen.
Abschließende Gedanken: Wie man Ankerlinks in WordPress erstellt
Die Verbesserung der UX ist immer ein gutes Ziel. Zufriedene Nutzer bleiben länger, blättern mehr Seiten durch und werden letztlich eher zu treuen Kunden.
Ankerlinks sind zwar eine kleine Funktion, können aber eine große Wirkung haben. Dies ist nur eine kleine, aber effektive Möglichkeit, die UX Ihrer WordPress-Website zu verbessern.
Eine weitere Möglichkeit, die UX zu verbessern, ist die Nutzung eines schnelleren Hosting-Anbieters, damit Ihre Besucher bei langsam ladenden Seiten nicht wegklicken müssen.
Bluehost bietet erschwingliches WordPress-Hosting mit einem Cloudflare Content Delivery Network (CDN) für höchste Leistung und Geschwindigkeit. Wir bieten außerdem eine schnelle und einfache Einrichtung sowie einen 24/7-Support, sodass Sie immer Zugang zu Hilfe haben, wenn Sie diese benötigen.
Einen Kommentar schreiben