Guide 2022 complet des liens (links)
Une balise de deux lettres, une dizaine d'attributs, et autant de façons de rendre une page inutilisable pour un lecteur d'écran ou invisible pour un moteur.
Le lien hypertexte est l’élément fondateur du web : il relie un document à un autre. Sa syntaxe tient en une ligne, ses attributs décident de l’accessibilité, de la sécurité et de la façon dont les moteurs comprennent votre site.
La syntaxe de base
Un lien s’écrit avec la balise a et son attribut href, qui porte la destination.
<a href="https://www.openmydiv.fr/">OpenMyDiv</a>Quatre formes de destination reviennent en permanence.
- Absolue : l’adresse entière, protocole compris. Obligatoire vers un autre domaine, recommandée dans du contenu éditorial qui peut être repris hors du site, dans un flux ou une lettre d’information.
- Relative : un chemin qui part de la racine, comme /contact/. Pratique en développement, quand le nom de domaine diffère de la production.
- Ancre : un dièse suivi de l’identifiant d’un élément de la page. Le lien ne fonctionne que si un élément porte exactement cet identifiant.
- Protocole particulier : mailto pour une adresse électronique, tel pour un numéro de téléphone, utile sur mobile.
Les attributs qui comptent
target décide de la fenêtre d’ouverture. La valeur _blank ouvre un nouvel onglet. À réserver aux liens externes et aux documents à télécharger : sur un lien interne, elle prive l’utilisateur du bouton retour sans raison.
rel qualifie la relation entre les deux pages, et se cumule.
- noopener empêche la page ouverte d’accéder à la fenêtre d’origine par JavaScript. Les navigateurs modernes l’appliquent d’office avec _blank, mais l’écrire reste une sécurité.
- nofollow indique de ne pas transmettre de valeur au lien. Historiquement utilisé pour les liens non vérifiés.
- sponsored pour un lien payé ou affilié, ugc pour un lien déposé par un utilisateur, en commentaire par exemple. Ces deux valeurs sont plus précises que nofollow et devraient le remplacer dans ces deux cas.
download déclenche le téléchargement au lieu de l’affichage, et permet d’imposer un nom de fichier. Il ne fonctionne que sur des ressources servies depuis le même domaine.
title affiche une infobulle au survol. En pratique, il est invisible au clavier, inégalement restitué par les lecteurs d’écran et absent sur mobile : une information utile n’a rien à y faire. Si le texte du lien ne suffit pas, c’est le texte du lien qu’il faut corriger.
L’intitulé fait tout
Un lecteur d’écran permet de parcourir la liste des liens d’une page, hors de leur contexte. Un intitulé du type « cliquez ici » ou « en savoir plus » ne dit alors rien du tout, et l’utilisateur doit revenir dans le texte pour comprendre.
La règle est simple : l’intitulé décrit la destination et se suffit à lui-même. Elle sert aussi les moteurs, pour qui l’ancre est un signal de ce que contient la page visée. Deux effets pour un seul effort.
Varier les ancres vers une même page reste préférable à la répétition d’une formule identique, qui finit par ressembler à une optimisation mécanique plutôt qu’à une écriture naturelle.
Les états, et pourquoi ils existent
Un lien possède plusieurs états que le CSS permet de styliser : au repos, visité, au survol, au focus clavier, et pendant le clic. Deux d’entre eux se négligent souvent, avec des conséquences réelles.
Supprimer le soulignement sans autre signal distinctif rend les liens indétectables dans un paragraphe pour qui distingue mal les couleurs. Et supprimer le contour de focus rend le site impraticable au clavier, pour tous ceux qui ne se servent pas d’une souris. Le contour par défaut se remplace, il ne se supprime pas.
Lien ou bouton ?
La confusion est fréquente et se tranche par une question : est-ce que l’élément mène ailleurs, ou déclenche une action ?
Un lien navigue vers une autre adresse. Il s’ouvre dans un nouvel onglet, se copie, s’ajoute aux favoris, et se déclenche avec la touche Entrée.
Un bouton agit sur la page : ouvrir un menu, envoyer un formulaire, afficher une fenêtre. Il se déclenche avec Entrée comme avec la barre d’espace.
Un bouton stylé comme un lien reste un bouton, et inversement. Ce qui compte pour les technologies d’assistance est la balise utilisée, pas son apparence. Utiliser une balise a avec un href vide pour déclencher du JavaScript est l’erreur la plus courante, et elle casse le comportement attendu.
Côté référencement
Les liens internes répartissent la valeur entre vos pages et indiquent leur importance relative. Quelques principes tiennent la route dans la durée : pointer depuis le corps du texte plutôt que depuis un menu générique, décrire la destination dans l’ancre, éviter les chaînes de redirections, et vérifier régulièrement que les liens ne sont pas cassés.
C’est un des points relevés lors d’un audit de site internet, au même titre que la structure des titres. Sur un site WordPress, la question se pose surtout au moment d’une refonte, quand les adresses changent : le sujet est traité sur notre page création et refonte de site WordPress.
Ne jamais écrire une adresse brute comme intitulé de lien. Un lecteur d’écran épelle l’adresse caractère par caractère, ce qui donne une suite illisible. L’adresse se met dans href, le texte lisible entre les balises.
Questions fréquentes sur les liens hypertextes
Syntaxe, attributs et cas particuliers.
Avec la balise a et son attribut href, qui contient la destination. Le texte placé entre la balise ouvrante et la balise fermante est ce que voit l’utilisateur, et c’est lui qui doit décrire où mène le lien.
Pour les liens externes et les documents à télécharger, cela se défend. Pour les liens internes, non : l’utilisateur perd son bouton retour et accumule des onglets qu’il n’a pas demandés. La règle courante est de laisser l’internaute décider, avec un clic du milieu s’il le souhaite.
Il qualifie la relation avec la page visée. noopener protège la fenêtre d’origine, nofollow indique de ne pas transmettre de valeur, sponsored signale un lien payé ou affilié, et ugc un lien déposé par un utilisateur. Plusieurs valeurs se cumulent, séparées par un espace.
Un lien mène vers une autre adresse, un bouton déclenche une action sur la page. La distinction porte sur la balise employée, pas sur l’apparence : les technologies d’assistance annoncent l’un et l’autre différemment, et les touches qui les activent ne sont pas les mêmes.
Dans un paragraphe, oui, ou du moins leur donner un signal visuel qui ne repose pas uniquement sur la couleur. Une personne qui distingue mal les couleurs ne voit sinon aucune différence entre le lien et le texte qui l’entoure. Dans un menu, où le contexte suffit, le soulignement n’est pas nécessaire.
Adrien
Associé, référencement naturel et conversion
Associé, il mène les stratégies de référencement naturel et conçoit des sites WordPress sur mesure, pensés pour convertir autant que pour se positionner. Migrations sans perte de trafic, UX, génération de contacts : il vérifie après mise en ligne plutôt qu'il ne suppose. Son sujet du moment : la présence des marques dans les moteurs de réponse.
