Ajouter une icône aux liens externes dans WordPress

Vous vous demandez peut-être pourquoi et comment ajouter une icône aux liens externes de votre site WordPress.

Il n’y a pas longtemps, je me suis également posé la question. En effet, sur un blog, on utilise une combinaison de liens internes et externes. Alors, je me suis dit que ce serait probablement bien de trouver un truc pour les différencier visuellement.

Puis, je me suis souvenue de sites comme Wikipédia ou autres qui ajoutent une icône après le lien sortant. Vous savez… l’icône qui se compose d’une flèche pointant vers l’extérieur et d’une forme.

Ni une, ni deux, j’ai voulu l’implémenter sur mon blog afin que les lecteurs sachent que ces liens sont différents et à quoi ils peuvent s’attendre lorsqu’ils cliquent dessus.

Vous avez envie de faire la même chose ?

Alors, découvrez dans cet article pourquoi et comment ajouter une icône aux liens externes de votre site sans extension.

Pourquoi ajouter un signe distinctif aux liens externes de votre site ?

Lorsque vous écrivez un article sur votre site, vous incluez évidemment des liens externes. Ces liens sortants servent par exemple à donner des références ou encore à indiquer des outils à tester.

Bien entendu, vous les avez choisis avec soin et vous recommandez à vos lecteurs de les consulter.

Oui, mais voilà, si les visiteurs viennent sur votre site, c’est parce qu’ils le considèrent comme un site de confiance. Et, force est de constater qu’avec les risques de sécurité potentiels, personne n’aime être redirigé vers un autre site sans avertissement.

Le problème est que les liens internes et externes d’un site WordPress ont la même apparence. De ce fait, rien n’indique au lecteur qu’il va sortir de votre site en cliquant sur un lien externe.

Bien sûr, il peut passer sa souris sur le lien, puis, vérifier dans le coin inférieur gauche de son écran s’il reste bien sur le même domaine. Mais bon, vous en conviendrez, c’est quelque peu fastidieux.

Ou bien, vous pouvez l’avertir en écrivant entre parenthèses qu’il s’agit d’un lien externe, mais là, ce sera chronophage pour vous.

La meilleure solution pour différencier les liens internes des liens externes est selon moi d’ajouter une petite icône bien reconnaissable comme le fait Wikipédia pour ses références. Ainsi, en ajoutant un signe distinctif à vos liens externes, vous indiquerez à vos lecteurs qu’ils vont sortir de votre site et accéder à un autre.

Passons à présent au tutoriel qui vous guidera pour ajouter cette icône aux liens externes de votre site WordPress sans extension.

Comment ajouter une icône aux liens externes dans WordPress sans extension

Afin d’afficher automatiquement une icône aux liens externes à votre site, il suffit d’inclure un code dans votre site WordPress.

Pour les féru(e)s d’optimisation comme moi, sachez que ce code n’ajoutera pas de temps de chargement notable à votre site.

Il est à noter aussi qu’il s’agit d’une icône en SVG issue des Dashicons de WordPress. Elle est sous licence GPL et donc libre de droits et sans attribution nécessaire.

Si vous avez créé un thème enfant, ajoutez le code ci-dessous dans le fichier functions.php de votre thème enfant.

Sinon, utilisez une extension telle que Code Snippets pour le faire.

Voici le code à inclure :

/** Ajouter une icône aux liens externes */
function cs_external_link_icon() {

    wp_register_script('external-link-icon', false);
    wp_enqueue_script('external-link-icon');

    wp_add_inline_script('external-link-icon', "
    function externalLinkIcon() {
      var icon = '<svg xmlns=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 20 20\">' +
        '<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' +
        '</svg>';
      // Indiquer à quels liens externes ajouter une icône
      if (!document.querySelector('.entry-content')) return;
      var links = document.querySelector('.entry-content').querySelectorAll('a');
      [...links].forEach(function (link) {
        if (
          link.host !== window.location.host &&
          link.href.substr(0, 4) !== 'tel:' &&
          link.href.substr(0, 7) !== 'mailto:'
        ) {
          link.innerHTML += ' ' + icon;
        }
      });
    }
    window.addEventListener('load', externalLinkIcon, false);
  ");

}

add_action('wp_enqueue_scripts', 'cs_external_link_icon');

Ce code ajoutera une icône de la même couleur que le lien à tous vos liens externes exceptés les liens pour les emails ou le téléphone.

Voici le résultat :

Explication pour modification du code

Si vous souhaitez modifier la largeur width et la hauteur height de l’icône, indiquez une autre valeur que 1 ici :

width=\"1em\" height=\"1em\"

💡 N’oubliez pas que pour saisir une décimale, il faut mettre un point et non pas une virgule.

Après, si vous voulez changer la taille ou l’emplacement de l’icône SVG, il vous faut modifier les valeurs de la viewBox :

viewBox=\"0 0 20 20\"

En sachant que :

• Le premier 0 correspond à min-x qui est utilisé pour bouger le SVG sur un axe horizontal (gauche et droite).
• Le deuxième 0 correspond à min-y qui sert à déplacer le SVG sur un axe vertical (haut et bas).
• Le premier 20 définit la largeur de la viewBox (width) et le deuxième sa hauteur (height).

Enfin, si vous préférez que l’icône soit d’une autre couleur que celle du lien, il vous faut remplacer currentColor par le code couleur souhaité. Par exemple, indiquez #000000 ou black et votre icône aura la couleur noire.

fill=\"currentColor\"

fill=\"#000000\"
fill=\"black\"

Rendre les liens internes et externes accessibles

Pour conclure, je dirai qu’inclure des liens externes de qualité pour étayer des informations est quasi obligatoire en SEO.

Et aussi que leur ajouter une icône pour les différencier des liens internes à votre site est une excellente initiative. En effet, cela peut servir à améliorer l’expérience utilisateur.

D’ailleurs, vous retrouverez cette recommandation dans la règle n° 137 des bonnes pratiques à appliquer pour la qualité des sites web d’Opquast qui indique que les liens internes et externes doivent être différenciés…

Néanmoins, j’aimerais attirer votre attention sur le fait qu’un lien, qu’il soit externe ou interne, se doit d’être accessible. En effet, si la couleur du texte se confond avec celle de l’arrière-plan, il ne sera pas lisible par tous.

Alors, vérifiez toujours l’accessibilité de votre texte ou de vos liens !

Utilisez des outils pour tester le contraste entre la couleur du texte et son arrière-plan. Et si vos textes ne sont pas accessibles, faites en sorte qu’ils le deviennent ! 😉

Que pensez-vous de l’ajout d’une icône aux liens externes ? L’avez-vous fait sur votre site ?