Comment afficher un aperçu en direct des liens dans WordPress

Avez-vous déjà remarqué à quel point les lecteurs peuvent être incertains lorsqu'ils cliquent sur des liens ? Les aperçus de liens résolvent ce problème en donnant à vos visiteurs un aperçu de ce qui les attend de l'autre côté 💡

Nous avons beaucoup vu cette technique sur des sites riches en contenu comme les wikis, où les aperçus visuels des liens aident les lecteurs à naviguer plus efficacement entre les articles interconnectés.

Lorsque les lecteurs peuvent voir ce qu'il y a dans un lien avant de cliquer, ils sont plus susceptibles d'explorer le contenu connexe qui les intéresse. De plus, cela les aide à éviter de cliquer sur des liens qui ne correspondent pas à leurs besoins.

De nombreux utilisateurs de WordPress nous demandent comment ajouter de beaux aperçus de liens sans toucher au code. Après avoir testé diverses solutions, nous avons trouvé une méthode simple et sans code qui fonctionne très bien pour les débutants.

Quand ajouter un aperçu en direct des liens sur votre site WordPress 🤔

Sur un site Web WordPress typique, les liens ne montrent pas ce qu'ils contiennent. Cela peut frustrer les visiteurs lorsqu'ils cliquent sur un lien et découvrent qu'il n'est pas ce qu'ils attendaient. C'est là que les aperçus de liens en direct sont utiles.

Les aperçus de liens en direct ressemblent généralement à des infobulles. Cet élément de conception WordPress apparaît lorsque quelqu'un déplace sa souris sur un lien, montrant un aperçu du contenu.

Pour les boutiques en ligne, cela signifie que vous pouvez afficher des images de produits ou de courts détails pour augmenter les ventes.

Si vous gérez un blog WordPress, vous pouvez afficher des images d'aperçu de publication ou de courts textes pour donner envie aux lecteurs d'en voir plus. Et pour les liens externes, ces aperçus contextuels aident les gens à décider s'ils veulent quitter votre site.

Cependant, soyez prudent lorsque vous utilisez des aperçus en direct. Trop nombreux peuvent confondre les visiteurs. Il est préférable de les utiliser uniquement pour les liens importants où ils seront le plus utiles.

Dans cet esprit, examinons un moyen simple d'ajouter des aperçus de liens en direct à votre site WordPress. Cette méthode fonctionnera que vous utilisiez l'éditeur de blocs Gutenberg, l'éditeur classique, ou même un constructeur de thème. Vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans ce tutoriel :

• Étape 1 : Installer le plugin Bright Link Previews
• Étape 2 : Personnaliser le design de l'aperçu contextuel du lien
• Étape 3 : Configurer les paramètres d'aperçu en direct du lien
• Étape 4 : Voir votre aperçu contextuel de lien en action
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

Étape 1 : Installer le plugin Bright Link Previews

Le moyen le plus simple d'ajouter un aperçu contextuel à un lien dans WordPress est d'utiliser le plugin Bright Link Previews. Une fois activé, ce plugin d'aperçu de liens WordPress ajoutera automatiquement un aperçu en direct de vos liens internes et externes dans vos articles et pages.

Tout d'abord, installez le plugin dans votre zone d'administration. Pour des instructions étape par étape, vous pouvez lire notre guide pour débutants sur comment installer un plugin WordPress.

Une fois terminé, allez dans Paramètres » Bright Links. C'est ici que vous pourrez configurer les paramètres du plugin.

Étape 2 : Personnaliser le design de l'aperçu de l'infobulle du lien

Tout d'abord, configurons le design de l'aperçu en direct dans l'onglet Apparence.

En haut, vous pouvez choisir la couleur de fond (côté gauche) et la couleur du texte (côté droit).

Cliquez simplement sur la boîte de couleur, et un outil de sélection de couleur apparaîtra.

Vous pouvez également choisir les couleurs des points d'intérêt, qui apparaîtront automatiquement pour les liens eCommerce de WooCommerce, Amazon et les sites Shopify.

Tout comme avec l'infobulle, choisissez simplement la couleur d'arrière-plan du point d'intérêt à gauche et la couleur du texte à droite.

En dessous se trouve « Choisir la taille », où vous pouvez rendre l'infobulle plus petite ou plus grande en faisant glisser le point sur la barre de redimensionnement.

Une infobulle plus grande est plus facile à lire, mais vous voudrez vous assurer qu'elle ne chevauche pas ou ne masque pas des parties importantes de votre page.

Nous vous recommandons de la prévisualiser sur votre site pour trouver la taille parfaite qui correspond à votre design.

En faisant défiler vers le bas, vous pouvez modifier le style de l'infobulle elle-même. Il existe 3 options par défaut, et vous pouvez toujours les changer plus tard.

Une fois que vous êtes satisfait de l'apparence de l'infobulle, cliquez simplement sur « Enregistrer » en bas.

Étape 3 : Configurer les paramètres de prévisualisation en direct du lien

Maintenant, passez à l'onglet « Paramètres ».

C'est ici que vous pouvez configurer le comportement des prévisualisations en direct des liens.

Bright Links Preview vous permet d'appliquer les prévisualisations d'infobulles aux liens de vos articles, pages et même de la section des commentaires.

Nous avons décidé de les ajouter uniquement pour nos articles et nos pages, car les ajouter partout pourrait perturber l'expérience utilisateur.

Une autre chose que vous pourriez configurer est de savoir s'il faut afficher les compteurs de clics. Changer ce paramètre de « non » à « oui » signifie que l'infobulle indiquera aux visiteurs combien d'utilisateurs ont cliqué sur le lien sur lequel ils survolent.

Cela peut être utile pour vos liens internes car il agit comme une preuve sociale. Lorsque les visiteurs voient qu'un lien est populaire, cela les encourage à explorer davantage votre contenu.

Cela dit, nous ne recommandons pas d'activer cette fonctionnalité si vous souhaitez également ajouter des aperçus en direct pour les liens externes. Cela pourrait se retourner contre vous et inciter les gens à quitter votre site.

D'ailleurs, vous pouvez choisir d'ajouter les aperçus en direct sur les liens internes, les liens externes, ou les deux.

Le choix dépend du type de site Web que vous gérez, mais nous suggérons généralement de n'utiliser que les liens internes pour augmenter vos pages vues et réduire votre taux de rebond.

Le choix dépend de vos objectifs. Voici un bref aperçu :

• Liens internes : C'est idéal pour stimuler l'engagement. Les aperçus encouragent les utilisateurs à découvrir davantage votre propre contenu, ce qui peut augmenter vos pages vues et réduire votre taux de rebond.
• Liens externes : Cela aide à établir la confiance avec votre public. En montrant un aperçu d'un site externe, vous rassurez les utilisateurs sur la pertinence et la sécurité du lien, ce qui les rend plus confiants dans vos recommandations.

Nous suggérons généralement de n'utiliser que les liens internes pour augmenter vos pages vues et réduire votre taux de rebond.

Ensuite, vous pouvez choisir de mettre en cache les aperçus pour améliorer les performances de votre site web. Nous vous recommandons vivement de laisser cette option activée.

La mise en cache enregistre une copie temporaire des aperçus de liens, ce qui évite que votre site ne ralentisse et garantit une expérience rapide pour vos visiteurs.

Si vous affichez des aperçus pour les liens externes, vous pouvez forcer ces liens à s'ouvrir dans un nouvel onglet. Nous suggérons d'activer cette fonctionnalité afin que les utilisateurs ne quittent pas accidentellement votre site web.

Enfin, vous pourriez choisir de désactiver l'infobulle sur mobile, car les infobulles peuvent offrir une mauvaise expérience utilisateur sur les petits écrans. Nous vous recommandons de tester cette fonctionnalité et de voir ce qui fonctionne le mieux pour votre site web.

Vous pouvez consulter notre guide sur comment afficher votre site web WordPress sur mobile via un ordinateur de bureau pour plus d'informations.

Lorsque vous êtes satisfait des paramètres de l'aperçu en direct, cliquez sur « Enregistrer ».

Étape 4 : Voir votre aperçu contextuel de lien en action

À ce stade, vous pouvez prévisualiser votre site web pour voir à quoi ressemble l'infobulle.

Voici à quoi ressemble le nôtre sans le compteur de clics :

Si vous choisissez d'ajouter un compteur de clics, une petite note indiquera le nombre de clics que le lien a reçus jusqu'à présent.

Ce choix ressemblera à ceci :

L'avantage de Bright Links Preview est qu'il dispose d'une fonctionnalité d'analyse gratuite pour vous montrer combien d'utilisateurs ont cliqué ou même survolé vos liens.

Cela peut être utile pour voir quels articles intéressent le plus les utilisateurs ou pour décider quels nouveaux articles mettre en avant.

Pour voir ces chiffres, allez simplement dans Paramètres » Bright Links depuis votre administration WordPress et basculez vers l'onglet « Statistiques ».

Astuce bonus : Nettoyez vos aperçus de liens WordPress avec le balisage Schema

Lorsque quelqu'un partage votre contenu, WordPress récupère souvent le titre de la page, la description et l'image pour afficher un aperçu. Mais si ces informations ne sont pas correctement définies, le résultat peut sembler peu professionnel ou erroné.

Le plugin Bright Links Preview aide en générant automatiquement des aperçus de liens riches à l'aide des métadonnées de vos pages.

Pour contrôler ces métadonnées et faire briller vos aperçus, nous vous recommandons d'utiliser All in One SEO.

Il permet de définir facilement les balises méta Open Graph (utilisées par Facebook, LinkedIn, etc.) et vous permet même de définir une image Open Graph par défaut, de personnaliser les balises de titre et de description, et d'ajouter un balisage de schéma pour un meilleur SEO et un meilleur contexte.

En combinant Bright Links Preview avec AIOSEO, vous améliorez votre SEO WordPress tout en vous assurant que vos liens sont clairs et cliquables sur le web.

👉 Pour en savoir plus, consultez nos guides :

• Comment ajouter le balisage Schema dans WordPress
• Comment ajouter correctement un schéma « Comment faire » optimisé pour le SEO dans WordPress
• Comment ajouter des métadonnées Facebook Open Graph dans WordPress

Découvrez d'autres fonctionnalités de conception WordPress

Vous souhaitez rendre la conception de votre site WordPress encore plus intéressante ? Consultez ces guides utiles :

• Utilisez des notes de bas de page simples et élégantes dans vos articles de blog pour ajouter des informations supplémentaires
• Affichez des liens de navigation fil d'Ariane pour aider les visiteurs à comprendre où ils se trouvent sur votre site
• Créez un fil d'actualités défilant pour partager des mises à jour importantes avec vos visiteurs
• Utilisez un widget de compte à rebours pour susciter l'enthousiasme pour des événements spéciaux
• Ajoutez une barre de progression de lecture à vos articles pour maintenir l'engagement des lecteurs
• Créez des séparateurs de forme personnalisés pour rendre le design de votre site web plus intéressant

Nous espérons que cet article vous a aidé à apprendre comment afficher des aperçus en direct de vos liens dans WordPress. Vous voudrez peut-être aussi consulter notre liste des meilleurs constructeurs de pages glisser-déposer dans WordPress et notre guide sur comment modifier un site WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.