Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man eine Live-Vorschau von Links in WordPress anzeigt

Link-Vorschauen geben Ihren Besuchern einen kleinen Vorgeschmack auf das, was sie erwartet, wenn sie klicken.

Wenn es sich bei der Vorschau um einen internen Link handelt und dieser interessant aussieht, werden die Benutzer eher darauf klicken und Ihre Website erkunden. Auf der anderen Seite, wenn der Link nicht das ist, was sie brauchen, können sie weiter nach etwas suchen, das für sie besser geeignet ist.

Viele Benutzer von WordPress sind auf der Suche nach einer codefreien Möglichkeit, Live-Vorschauen von Links auf ihren Websites anzuzeigen.

Wir verstehen das. Es kann frustrierend sein, eine Lösung zu finden, die kein technisches Know-how oder riskante Plugins erfordert. Deshalb haben wir recherchiert und nach der besten No-Code-Lösung für WordPress Benutzer gesucht.

Nach ausgiebigen Tests haben wir eine einfache Methode gefunden, um Link-Vorschauen zu Ihrer WordPress Website hinzuzufügen. Diese Anleitung zeigt Ihnen wie.

How to Show Live Preview of Links in WordPress

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

Auf einer typischen WordPress-Website zeigen Links nicht, was in ihnen steckt. Das kann Besucher frustrieren, wenn sie auf einen Link klicken und feststellen, dass er nicht das ist, was sie erwartet haben. Hier kommt die Live-Vorschau von Links ins Spiel.

Live-Vorschauen von Links sehen normalerweise wie Tooltips aus. Sie erscheinen, wenn jemand mit der Maus über einen Link fährt, und zeigen einen kleinen Einblick in den Inhalt.

Live link preview example by Wikipedia

Für Online-Shops bedeutet das, dass Sie Ihre Links mit Produktbildern oder kurzen Details versehen können, um den Verkauf anzukurbeln.

Wenn Sie einen WordPress-Blog betreiben, können Sie Beiträge mit Bildern oder kurzen Texten anzeigen, um den Besuchern Lust auf mehr zu machen. Und bei externen Links helfen diese Tooltip-Vorschauen den Leuten zu entscheiden, ob sie Ihre Website verlassen wollen.

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

Sehen wir uns also an, wie Sie Ihrer WordPress Website auf einfache Weise eine Live-Vorschau von Links hinzufügen können. Sie können die unten stehenden Links verwenden, um durch dieses Tutorial zu navigieren:

Der einfachste Weg, eine Tooltip-Vorschau zu einem Link in WordPress hinzuzufügen, ist das Bright Link Previews Plugin. Wenn es aktiviert ist, fügt dieses WordPress 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 Verwaltungsbereich. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress Plugins.

Gehen Sie anschließend zu Einstellungen “ Helle Links. Hier können Sie die Einstellungen des Plugins konfigurieren.

Bright Links Preview plugin settings page

Lassen Sie uns zunächst das Design der Live-Vorschau auf dem Tab Design einrichten.

Bright Links Preview's settings to change colors and size

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

Klicken Sie einfach auf die Boxen, und ein Farbwähler wird angezeigt.

Changing the live link preview's tooltip text color in Bright Links Preview

Sie können auch die Farben der Preis-Hotspots auswählen, die automatisch für eCommerce-Links von WooCommerce-, Amazon- und Shopify-Websites 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.

Darunter befindet sich die Option „Größe wählen“, mit der Sie die QuickInfo verkleinern oder vergrößern können, indem Sie den Punkt in der Größenänderungsleiste ziehen.

Je größer sie ist, desto leichter können die Benutzer Ihre Link-Informationen lesen. Allerdings kann die Größe der QuickInfo auch die Benutzerfreundlichkeit beeinträchtigen. Achten Sie also darauf, die richtige Größe für Ihre Website zu finden.

Changing the Bright Links Preview tooltip size

Wenn Sie nach unten blättern, können Sie den Stil des Tooltips selbst ändern. Es gibt 3 Standard-Optionen, die Sie später jederzeit ändern können.

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

Choosing a Bright Links Preview tooltip style

Wechseln Sie nun zum Tab „Einstellungen“.

Hier können Sie konfigurieren, wie sich die Live-Vorschau für Links verhält.

Navigating to the Settings page of Bright Links Preview

Mit Bright Links Preview können Sie die Tooltip-Vorschau in Ihren Beiträgen, Seiten und Benutzer-Kommentaren anwenden, ebenso wie Links, die einem JavaScript-Selektor oder einem Bild entsprechen.

Wir haben uns entschlossen, sie nur für unsere Beiträge und Seiten hinzuzufügen, da sie überall die Benutzer stören könnten.

Sie können auch einstellen, ob Klickzähler angezeigt werden sollen. Wenn Sie diese Einstellung von „nein“ auf „ja“ ändern, wird in der QuickInfo angezeigt, wie viele Benutzer auf den Link geklickt haben, auf dem sie bei Mauszeigerkontakt stehen.

Activating the Bright Links Preview click counter

Dies kann für interne Links nützlich sein, da es ein Gefühl von FOMO hervorrufen und die Besucher ermutigen kann, Ihre Website weiter zu erkunden.

Wir raten jedoch davon ab, diese Funktion zu aktivieren, wenn Sie auch für externe Links eine Live-Vorschau hinzufügen möchten. Das kann nach hinten losgehen und dazu führen, dass Besucher Ihre Website verlassen.

Apropos, Sie können wählen, ob Sie die Live-Vorschau 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 im Allgemeinen empfehlen wir Ihnen, nur interne Links zu verwenden, um Ihre Seitenaufrufe zu erhöhen und die Absprungrate zu verringern.

Enabling Bright Links Preview for internal links and external links

Als Nächstes können Sie die Vorschaubilder in den Cache stellen, um die Leistung Ihrer WordPress Website zu beschleunigen.

Wenn Sie Ihren externen Links eine Live-Vorschau hinzufügen, können Sie auch erzwingen, dass diese Links das Attribut „Ziel leer“ haben, damit diese Links in einem neuen Tab geöffnet werden. Wir empfehlen, diese Funktion zu aktivieren, damit Benutzer nicht versehentlich Ihre Website verlassen.

Schließlich können Sie die QuickInfo auf Mobiltelefonen deaktivieren, da QuickInfos auf kleineren Ansichten zu einem schlechten Benutzererlebnis führen können. Wir empfehlen, diese Funktion auszuprobieren und herauszufinden, was für Ihre Website am besten funktioniert.

Weitere Informationen finden Sie in unserem Leitfaden, wie Sie Ihre WordPress-Website auf dem Handy über den Desktop anzeigen können.

Wenn Sie mit den Einstellungen für die Live-Vorschau zufrieden sind, klicken Sie auf „Speichern“.

Configuring caching, open in a new tab, and mobile popup settings in Bright Links Preview

In diesem Stadium können Sie Ihre Website in der Vorschau anzeigen, um zu sehen, wie die QuickInfo aussieht.

So sieht unsere Seite ohne den Klickzähler aus:

Bright Links Preview example

Wenn Sie sich dafür entscheiden, einen Klickzähler hinzuzufügen, erscheint ein kleiner Hinweis, der die Anzahl der Klicks anzeigt, die der Link bisher erhalten hat.

Die Auswahl sieht dann so aus:

Bright Links Preview example with the click counter

Das Tolle an Bright Links Preview ist, dass es über eine kostenlose Analysefunktion verfügt, die Ihnen zeigt, wie viele Benutzer auf Ihre Links geklickt oder sogar bei Mauszeigerkontakten darauf verweilt haben.

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 zu sehen, gehen Sie in Ihrer WordPress-Verwaltung auf Einstellungen “ Helle Links und wechseln Sie zum Tab „Statistik“.

Bright Links Preview's statistics feature

Bright Links Preview zieht automatisch Metadaten von Ihren Seiten und Beiträgen ab, um eine Live-Vorschau Ihrer Links zu erstellen. Mit anderen Worten: Die Qualität Ihrer Link-Vorschauen hängt davon ab, wie gut Sie Ihre Metadaten eingerichtet haben.

Mit All in One SEO (AIOSEO), einem leistungsstarken WordPress SEO Plugin, können Sie Metadaten zu Ihren Artikeln hinzufügen. Es verfügt über eine Schema-Funktion, mit der Sie ganz einfach strukturierte Daten zu Ihren Inhalten hinzufügen können.

Schema Preview in AIOSEO

Bright Links Preview kann nicht nur bessere Vorschauen erstellen, sondern auch Suchmaschinen mehr Informationen über Ihre Inhalte geben, was die SEO-Leistung von WordPress verbessern kann.

Wenn Sie Schema-Markup zu Ihren Inhalten hinzufügen möchten, können Sie diese Artikel lesen:

Entdecken Sie weitere WordPress Design Funktionen

Möchten Sie Ihre WordPress Website noch interessanter gestalten? Sehen Sie sich diese hilfreichen Anleitungen an:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Live-Vorschauen Ihrer Links in WordPress anzeigen können. Sehen Sie sich auch unsere Liste der besten Drag-and-drop Page-Builder in WordPress und unseren Leitfaden zur Bearbeitung einer WordPress-Website an.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

8 KommentareEine Antwort hinterlassen

  1. Colin

    Thanks for the article, that plugin has ceased operation and is no longer downloadable, if you had a new suggestion that works I’d greatly appreciate it. The RT Media paid version isn’t up to scratch and there’s not a lot to be found via Google.

    • WPBeginner Support

      Thank you for letting us know, we will be sure to look into updating this article :)

      Admin

  2. Marcus Quiroga

    Hi,

    Is there an update of this function nowadays? I’m trying it on external links at. Does someone could help me with that?

    thank you

  3. Tim Roberts

    How do you get this to on work on specifc links.

    • WPBeginner Staff

      Unfortunately plugin does not have a way to show preview for selective links you can only choose from all, internal, or external links.

      • Bruce Brown

        Select the „class“ option, then put the class on the links you want to display.

    • Per Søderlind

      Hi, I’m the plugin author.

      You can get this to work on specific links by adding class=“wp-live-preview“ to the link, and in the settings page set ‚Live Preview Links‘ to ‚class=“wp-live-preview‘. See the demo links on my site.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.