Comment traiter les liens sortants

Souvent, je me suis demandé s’il fallait attribuer un traitement différent aux liens allant vers un site autre que celui le référençant (dans le jargon, un lien sortant). Cette petite réflexion m’est venu en constatant que souvent, je pestais quand j’étais sur un autre navigateur que Firefox et que ce dernier ne m’affichait pas l’url au survol de la souris.

Nous ne parlerons pas ici de problématiques SEO avec les attribut nofollow et dofollow mais bien d’expérience utilisateur, à savoir :

Quel comportement ?

En tant que webmaster, blogger, e-commerçant ou que sais-je encore, nous sommes parfois tenté de vouloir conserver les internautes sur nos pages. Il peut y avoir plusieurs stratégies à cela, dont les plus extrêmes sont de ne faire aucun lien pointant à l’extérieur de son site parce que “ça fait perdre des utilisateurs”. C’est un peu comme si on tentait de prévenir la fuite des cerveaux par l’interdiction de sortie du territoire…

Si vous avez décidé d’embrasser le web et d’assumer que la richesse c’est aussi d’aller vers les autres – avec des liens – deux écoles s’affrontent : utiliser l’attribut target=”_blank” pour ouvrir le lien dans un nouvel onglet ou laisser le comportement par défaut.

Là c’est un peu la bataille des arguments. Bien que à l’instar de Facebook, certains grands sites utilisent de manière systématique l’ouverture d’un nouvel onglet pour les liens externes, la tendance va à laisser le comportement par défaut.

J’ai pour ma part, après pas mal de lecture pris la décision qu’il ne fallait pas utiliser le target=”_blank” dans la plupart des cas. Parmi les arguments qui pèsent vraiment dans la balance, retenons que :

Quelle apparence ?

D’intéressants débats sur stackexchange abordent la question du style des liens externes : y-a-t-il une convention pour distinguer les liens internes des liens externes ? [en] et comment distinguer les liens externes [en].

Sur le fil, la question semble assez tranchée et il faudrait distinguer les liens internes des liens externes. Trois manières peuvent alors être envisagées :

On peut d’ailleurs facilement modifier l’apparence des liens externes grâce au CSS :

a[href^="http://"]:not([href*="exemple.fr"]):after,
a[href^="https://"]:not([href*="exemple.fr"]):after {
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);  
}

Conclusion

L’apparence des liens est une question à régler au cas par cas. La majorité des sites avec un tant soit peu de rédactionnel ne font pas la différence entre liens internes et externes, ce qui en terme d’UX ne perturbe donc pas l’internaute puisque c’est le comportement auquel il s’attend. Ce choix s’explique naturellement par la forte proportion de liens externes dans ce types de sites, ce qui en fait alors la norme.

Par conséquent, je n’ai pas choisi de différencier les différents types de liens sur le présent blog. Néanmoins, dans le cadre d’un autre type de site, ou pour une webapp par exemple, il serait peut-être judicieux de penser la question différemment.

– Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```