So zeigen Sie eine Live-Vorschau von Links in WordPress an

Haben Sie jemals bemerkt, wie unsicher Leser beim Klicken auf Links sein können? Link-Vorschauen lösen dieses Problem, indem sie Ihren Besuchern einen kleinen Einblick geben, was sie auf der anderen Seite erwartet 💡

Wir haben diese Technik oft auf inhaltsreichen Websites wie Wikis gesehen, wo visuelle Link-Vorschauen den Lesern helfen, effizienter durch miteinander verbundene Artikel zu navigieren.

Wenn Leser sehen können, was sich in einem Link befindet, bevor sie darauf klicken, erkunden sie eher verwandte Inhalte, die sie interessieren. Außerdem hilft es ihnen, Links zu vermeiden, die für ihre Bedürfnisse nicht relevant sind.

Viele WordPress-Benutzer fragen uns, wie sie schöne Link-Vorschauen hinzufügen können, ohne Code anfassen zu müssen. Nach dem Testen verschiedener Lösungen haben wir eine einfache, No-Code-Methode gefunden, die für Anfänger hervorragend funktioniert.

Wann Sie eine Live-Vorschau von Links auf Ihrer WordPress-Site hinzufügen sollten 🤔

Auf einer typischen WordPress-Website zeigen Links nicht an, was sich darin befindet. Dies kann Besucher frustrieren, wenn sie auf einen Link klicken und feststellen, dass er nicht das ist, was sie erwartet haben. Hier sind Live-Link-Vorschauen nützlich.

Live-Link-Vorschauen sehen normalerweise wie Tooltips aus. Dieses WordPress-Designelement erscheint, wenn jemand mit der Maus über einen Link fährt, und zeigt eine Vorschau des Inhalts.

Für Online-Shops bedeutet dies, dass Ihre Links Produktbilder oder kurze Details anzeigen können, um den Umsatz zu steigern.

Wenn Sie einen WordPress-Blog betreiben, können Sie Beitragsvorschau-Bilder oder kurzen Text anzeigen, um Leser zum Weiterlesen zu bewegen. Und für externe Links helfen diese Tooltip-Vorschauen den Leuten zu entscheiden, ob sie Ihre Website verlassen möchten.

Seien Sie jedoch vorsichtig bei der Verwendung von Live-Vorschauen. Zu viele können Besucher verwirren. Am besten verwenden Sie sie nur für wichtige Links, bei denen sie am meisten helfen.

In diesem Sinne sehen wir uns eine einfache Möglichkeit an, Live-Link-Vorschauen zu Ihrer WordPress-Website hinzuzufügen. Diese Methode funktioniert, unabhängig davon, ob Sie den Gutenberg-Blockeditor, den klassischen Editor oder sogar einen Theme-Builder verwenden. Sie können die folgenden Schnelllinks verwenden, um durch dieses Tutorial zu navigieren:

• Schritt 1: Installieren Sie das Bright Link Previews Plugin
• Schritt 2: Passen Sie das Design der Link-Tooltip-Vorschau an
• Schritt 3: Konfigurieren Sie die Live-Vorschau-Einstellungen des Links
• Schritt 4: Sehen Sie Ihre Link-Tooltip-Vorschau in Aktion
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

Schritt 1: Installieren Sie das Bright Link Previews Plugin

Der einfachste Weg, eine Tooltip-Vorschau zu einem Link in WordPress hinzuzufügen, ist mit dem Plugin Bright Link Previews. Nach der Aktivierung fügt dieses WordPress-Link-Vorschau-Plugin automatisch eine Live-Vorschau Ihrer internen und externen Links in Ihren Beiträgen und Seiten hinzu.

Installieren Sie zunächst das Plugin in Ihrem Admin-Bereich. Schritt-für-Schritt-Anleitungen finden Sie in unserem Anfängerleitfaden unter so installieren Sie ein WordPress-Plugin.

Wenn Sie fertig sind, gehen Sie zu Einstellungen » Bright Links. Hier können Sie die Einstellungen des Plugins konfigurieren.

Schritt 2: Passen Sie das Design der Tooltip-Vorschau des Links an

Zuerst richten wir das Design der Live-Vorschau im Tab Erscheinungsbild ein.

Oben können Sie die Hintergrundfarbe (linke Seite) und die Textfarbe (rechte Seite) auswählen.

Klicken Sie einfach auf das Farbfeld, und ein Farbauswahlwerkzeug wird angezeigt.

Sie können auch die Farben der Hotspot-Preise wählen, die automatisch für E-Commerce-Links von WooCommerce, Amazon und Shopify-Seiten angezeigt werden.

Genau wie beim Tooltip wählen Sie einfach die Hintergrundfarbe des Hotspots auf der linken Seite und die Textfarbe auf der rechten Seite aus.

Darunter befindet sich „Größe wählen“, wo Sie den Tooltip durch Ziehen des Punkts in der Größenleiste kleiner oder größer machen können.

Ein größerer Tooltip ist leichter zu lesen, aber Sie sollten sicherstellen, dass er nicht wichtige Teile Ihrer Seite überlappt oder verdeckt.

Wir empfehlen, die Vorschau auf Ihrer Website zu testen, um die perfekte Größe zu finden, die zu Ihrem Design passt.

Wenn Sie nach unten scrollen, können Sie den Stil des Tooltips selbst ändern. Es gibt 3 Standardoptionen, und Sie können sie jederzeit später wechseln.

Wenn Sie mit dem Aussehen des Tooltips zufrieden sind, klicken Sie einfach unten auf „Speichern“.

Schritt 3: Konfigurieren Sie die Live-Vorschau-Einstellungen des Links

Wechseln Sie nun zur Registerkarte „Einstellungen“.

Hier können Sie konfigurieren, wie Live-Vorschauen für Links funktionieren.

Bright Links Preview ermöglicht es Ihnen, die Tooltip-Vorschauen auf Links in Ihren Beiträgen, Seiten und sogar im Kommentarbereich anzuwenden.

Wir haben uns entschieden, sie nur für unsere Beiträge und Seiten hinzuzufügen, da die Hinzufügung überall unsere Benutzererfahrung beeinträchtigen könnte.

Eine weitere Einstellung, die Sie vornehmen können, ist, ob Klickzähler angezeigt werden sollen. Wenn Sie diese Einstellung von 'nein' auf 'ja' ändern, zeigt der Tooltip den Besuchern an, wie viele Benutzer auf den Link geklickt haben, über den sie gerade mit der Maus fahren.

Dies kann für Ihre internen Links nützlich sein, da es als sozialer Beweis fungiert. Wenn Besucher sehen, dass ein Link beliebt ist, ermutigt dies sie, mehr Ihrer Inhalte zu erkunden.

Das gesagt, wir empfehlen nicht, diese Funktion zu aktivieren, wenn Sie Live-Vorschauen für externe Links hinzufügen möchten. Es könnte nach hinten losgehen und dazu führen, dass Leute Ihre Website verlassen.

Apropos, Sie können wählen, ob Sie die Live-Vorschauen für interne Links, externe Links oder beides hinzufügen möchten.

Die Wahl hängt davon ab, welche Art von Website Sie betreiben, aber wir empfehlen generell, nur interne Links zu verwenden, um Ihre Seitenaufrufe zu erhöhen und Ihre Absprungrate zu reduzieren.

Die Wahl hängt von Ihren Zielen ab. Hier ist eine kurze Übersicht:

• Interne Links: Dies ist großartig, um das Engagement zu steigern. Vorschauen ermutigen Benutzer, mehr Ihrer eigenen Inhalte zu entdecken, was Ihre Seitenaufrufe erhöhen und Ihre Absprungrate senken kann.
• Externe Links: Dies hilft, Vertrauen bei Ihrem Publikum aufzubauen. Indem Sie eine Vorschau einer externen Seite anzeigen, versichern Sie den Nutzern, dass der Link relevant und sicher ist, was ihnen mehr Vertrauen in Ihre Empfehlungen gibt.

Wir empfehlen generell, nur interne Links zu verwenden, um Ihre Seitenaufrufe zu erhöhen und Ihre Absprungrate zu reduzieren.

Als Nächstes können Sie die Vorschauen cachen, um die Leistung Ihrer Website zu verbessern. Wir empfehlen dringend, diese Option aktiviert zu lassen.

Caching speichert eine temporäre Kopie der Link-Vorschauen, was verhindert, dass Ihre Website langsamer wird und ein schnelles Erlebnis für Ihre Besucher gewährleistet.

Wenn Sie Vorschauen für externe Links anzeigen, können Sie diese Links dazu zwingen, sich in einem neuen Tab zu öffnen. Wir empfehlen, diese Funktion zu aktivieren, damit Benutzer Ihre Website nicht versehentlich verlassen.

Schließlich könnten Sie den Tooltip auf Mobilgeräten deaktivieren, da Tooltips auf kleineren Bildschirmen zu einer schlechten Benutzererfahrung führen könnten. Wir empfehlen, diese Funktion zu testen und zu sehen, was für Ihre Website am besten funktioniert.

Sie könnten sich unseren Leitfaden ansehen: So zeigen Sie Ihre WordPress-Website mobil über den Desktop an für weitere Informationen.

Wenn Sie mit den Einstellungen der Live-Vorschau zufrieden sind, klicken Sie auf „Speichern“.

Schritt 4: Sehen Sie Ihre Link-Tooltip-Vorschau in Aktion

An dieser Stelle können Sie Ihre Website in der Vorschau anzeigen, um zu sehen, wie der Tooltip aussieht.

So sieht unsere ohne den Klickzähler aus:

Wenn Sie einen Klickzähler hinzufügen, wird eine kleine Notiz angezeigt, die die Anzahl der bisherigen Klicks des Links anzeigt.

Diese Auswahl wird wie folgt aussehen:

Das Tolle an Bright Links Preview ist, dass es eine kostenlose Analysefunktion gibt, die Ihnen zeigt, wie viele Nutzer auf Ihre Links geklickt oder sogar mit der Maus darüber gefahren sind.

Dies kann hilfreich sein, um zu sehen, an welchen Beiträgen die meisten Benutzer interessiert sind, oder um zu entscheiden, welche neuen Beiträge hervorgehoben werden sollen.

Um diese Zahlen anzuzeigen, gehen Sie einfach in Ihrem WordPress-Admin zu Einstellungen » Helle Links und wechseln Sie zum Tab „Statistiken“.

Bonus-Tipp: Bereinigen Sie Ihre WordPress-Link-Vorschauen mit Schema-Markup

Wenn jemand Ihre Inhalte teilt, ruft WordPress oft den Seitentitel, die Beschreibung und das Bild ab, um eine Vorschau anzuzeigen. Wenn diese Informationen jedoch nicht richtig eingestellt sind, kann das Ergebnis unprofessionell oder fehlerhaft aussehen.

Das Bright Links Preview-Plugin hilft, indem es automatisch Rich-Link-Vorschauen generiert, die Metadaten von Ihren Seiten verwenden.

Um diese Metadaten zu steuern und Ihre Vorschauen glänzen zu lassen, empfehlen wir die Verwendung von All in One SEO.

Es erleichtert das Festlegen von Open-Graph-Metadaten (verwendet von Facebook, LinkedIn usw.) und ermöglicht Ihnen sogar das Festlegen eines Standard-Open-Graph-Bildes, das Anpassen von Titel- und Beschreibungs-Tags sowie das Hinzufügen von Schema-Markup für bessere SEO und Kontext.

Durch die Kombination von Bright Links Preview mit AIOSEO verbessern Sie nicht nur Ihr WordPress-SEO, sondern stellen auch sicher, dass Ihre Links im Web sauber und klickbar aussehen.

👉 Um mehr zu erfahren, lesen Sie unsere Anleitungen:

• Wie man Schema-Markup in WordPress hinzufügt
• So fügen Sie SEO-freundliches 'How-to'-Schema in WordPress richtig hinzu
• So fügen Sie Facebook Open Graph Meta-Daten in WordPress hinzu

Entdecken Sie weitere WordPress-Designfunktionen

Möchten Sie das Design Ihrer WordPress-Website noch interessanter gestalten? Schauen Sie sich diese hilfreichen Anleitungen an:

• Verwenden Sie einfache und elegante Fußnoten in Ihren Blogbeiträgen, um zusätzliche Informationen hinzuzufügen
• Zeigen Sie Breadcrumb-Navigationslinks an, damit Besucher verstehen, wo sie sich auf Ihrer Website befinden
• Erstellen Sie einen scrollenden News-Ticker, um wichtige Updates mit Ihren Besuchern zu teilen
• Verwenden Sie ein Countdown-Timer-Widget, um Spannung für besondere Ereignisse aufzubauen
• Fügen Sie Ihren Beiträgen eine Lesefortschrittsleiste hinzu, um die Leser bei Laune zu halten
• Erstellen Sie benutzerdefinierte Formteiler, um das Design Ihrer Website interessanter zu gestalten

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Live-Vorschauen Ihrer Links in WordPress anzeigen. Möglicherweise möchten Sie auch unsere Liste der besten Drag-and-Drop-Page-Builder in WordPress und unseren Leitfaden zur Bearbeitung einer WordPress-Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.