Rédiger les liens hypertextes est un art que tout rédacteur web doit savoir maîtriser. Cela nécessite beaucoup de bonnes pratiques, pas mal de bon sens et un peu de technique. Voici 10 conseils pour mieux rédiger les liens dans une page web.
1) Faciliter le clic
Première erreur (courante, hélas…) : rédiger un lien trop étroit pour être cliqué. C’est le fameux « Pour nous contacter cliquer ici » où seul le « ici » est cliquable. L’espace sur lequel il faut positionner la souris est tellement étroit que l’internaute a du mal à cliquer dessus, voire ne le voit pas du tout. A éviter absolument !
Il vaut mieux rendre un groupe de mots ou une phrase entière cliquable, sur le modèle : Envoyer un message à Editoile. Attention à ne pas non plus tomber dans l’excès inverse et de rendre cliquable une expression trop longue. Une autre solution, surtout pour les actions fortes telles que « Valider ma commande » ou « Demander un devis », est de créer une image en forme de bouton pour délimiter une grande zone cliquable. Comme ça, pas besoin de viser !
Positionnez vos liens à des endroits stratégiques : à la fin d’un paragraphe, à la fin de la page. L’internaute aura tendance à chercher le lien, donc si vous souhaitez qu’il lise un peu votre texte, placez le lien après. Dans le corps du texte, usez des liens avec parcimonie pour ne pas surcharger la lecture.
2) Respecter les codes du web
Le code le plus courant du web – et le mieux repéré par les internautes – reste le bleu souligné pour les liens, comme dans les résultats de Google. Ne cherchez donc pas l’originalité à tout prix en proposant des liens de couleurs inhabituelles ou, pire, qui ne se soulignent que quand on les survole avec la souris. C’est ce qu’Amélie Boucher, la référence en matière d’ergonomie web, appelle « capitaliser sur l’apprentissage externe du web« .
Et si vous décidez pour une raison graphique ou autre de prendre des libertés avec cette règle, appliquez la même décision sur toutes les pages de votre site. Autrement dit, « capitaliser sur l’apprentissage interne du site » (dixit Amélie).
3) Donner envie de cliquer
C’est ce qu’on appelle l’affordance au clic : qu’est-ce qui fait que l’internaute comprend qu’il peut cliquer sur un objet et a envie de le faire. Il s’agit certes de trouver des formulations accrocheuses et incitatives, mais pas seulement. Il s’agit surtout d’expliquer clairement à l’internaute ce qui va se passer s’il clique sur le lien en question.
Choisir des formulations claires et explicites. Par exemple, au simple « Programme », préférez « Télécharger le programme » (si le lien renvoie vers un PDF) ou « Voir la rubrique Programme » (si le lien renvoie vers une autre page).
Evitez les expressions trop génériques, qui n’apprennent rien à l’internaute et encore moins au robot référenceur, du style « Pour en savoir plus » ou « La suite ». Préférez « Pour en savoir plus sur le produit x » ou « Accéder à la fiche technique du produit x ».
4) Proposer des liens pertinents
Demandez-vous toujours si le lien hypertexte que vous ajoutez apporte quelque chose à l’internaute : une information complémentaire, une autre manière de consommer l’information (vidéo, image, infographie, etc.), un exemple concret, un site référence, des ressources à télécharger, un mode d’emploi, la définition d’un mot, une piste pour aller plus loin, etc.
C’est ce qu’on appelle les « call-to-action » : des liens pratiques qui redonnent la main à l’internaute, souvent listés en bas de la page. Par exemple, sur le blog Développement économique en Aquitaine, nous veillons à toujours à citer nos sources en renvoyant vers l’étude intégrale, l’organisme ou le communiqué de presse qui nous ont servi à rédiger l’article.
5) Soigner l’accessibilité des liens
C’est surtout vrai pour les liens qui renvoient vers un document à télécharger ou une vidéo. Précisez le format du fichier, en indiquant son extension (PDF, ODT, etc.), si possible illustrée par une petite icône. Evitez les extensions qui nécessitent un logiciel rare ou payant pour les ouvrir (PPT, PUB, etc.).
Précisez aussi le poids du fichier en Ko ou Mo. Si le fichier est trop lourd, un internaute doit pouvoir décider de ne pas le télécharger. Petit truc, j’ajoute souvent le nombre de pages qui me paraît plus clair pour la grande majorité des internautes qu’un nombre de Ko. Exemple : « Télécharger la notice (PDF, 98 Ko, 16 pages). »
Précisez la durée des vidéos. Voire proposez un résumé ou un verbatim complet (c’est toujours mieux pour l’internaute et le référencement). Et oubliez les vidéos supérieures à 5 minutes : personne ne cliquera dessus.
6) Préférer les médias embarqués aux liens
Pour tous les médias téléchargeables, je préfère les rendre consultables sans avoir à les télécharger. Autrement dit, plutôt que d’indiquer seulement par un lien « télécharger le média », mieux vaut « l’embarquer » directement dans la page sous forme d’une fenêtre qui permet de feuilleter le document ou de lire la vidéo en ligne, en petit ou en plein écran. Une fois visualisé rapidement, l’internaute peut alors décider en connaissance de cause de le télécharger, voire de le partager sur les réseaux sociaux.
Cette méthode est à la fois plus accessible car l’internaute n’a pas besoin de disposer d’un logiciel particulier pour lire le fichier. Plus visuelle car elle habille la page avec un média interactif. Et plus efficace en termes de visibilité et de viralité !
Il existe des outils gratuits pour cela, par exemple Issuu pour les PDF, Vimeo pour les vidéos ou SlideShare pour les diaporamas (PPT). Voir notre article « 10 outils pour partager ses informations ».
7) Ne pas négliger les liens internes
N’oublier pas d’ajouter des liens hypertextes qui renvoient vers d’autres pages de votre site, histoire de retenir un peu plus longtemps le visiteur et le robot de Google. Un bon maillage interne permet de rendre plus visible certaines pages profondes de votre site ou moins visitées que les autres. C’est mieux pour le référencement naturel !
Un truc pour les blogs à forts contenus éditoriaux : ajouter une extension (ou plug-in) qui liste automatiquement les articles similaires en bas de chaque article. A Editoile, nous utilisons systématiquement Similar Post (et son extension inséparable Post-Plugin Library) dans tous nos blogs WordPress.
8) Remplir systématiquement les attributs
Où on commence à entrer dans la technique… Un bon rédacteur web doit savoir mettre les mains dans le code html ! Le code html d’un lien est
Remplissez bien l’attribut title (traduites par « titre » ou « description » suivant les interfaces). Cette balise permet d’ajouter du contenu explicatif supplémentaire pour les internautes qui apparaît dans une bulle au survol du lien. Par exemple, vous faites un lien sous le nom d’un organisme et vous indiquer dans l’attribut title l’URL du site, ou mieux sa thématique pour ajouter des mots clés pertinents.
Le code du lien est alors 
9) Ouvrir le lien dans une autre fenêtre (ou pas)
Lorsqu’on rédige un lien hypertexte, on doit décider s’il doit ouvrir dans une nouvelle fenêtre du navigateur ou dans la même fenêtre. C’est la fonction de l’attribut target (ou cible du lien). Tout dépend en fait du contenu… Sur ce blog, on a choisi d’ouvrir tous les liens externes dans une autre fenêtre, pour bien montrer à l’internaute qu’il sort du site et lui permettre de revenir plus facilement à la page d’origine en cliquant sur l’onglet correspondant de son navigateur. En revanche, nous ouvrons tous les liens internes dans la même fenêtre, pour suivre le cheminement interne de l’internaute.
Pour ouvrir une nouvelle fenêtre ou onglet, c’est 
Le code du lien est alors
10) Faire la chasse aux erreurs 404
Vérifiez systématiquement les liens une fois que votre page est publiée en ligne. C’est souvent là qu’on s’aperçoit qu’on a exclu ou inclu un signe de trop dans la zone cliquable. Ou qu’on a oublié ou intégré 2 fois http:// au début du lien parce qu’on a copié-collé trop vite l’URL dans l’interface.
Vérifiez aussi de temps en temps que les liens sont toujours actifs. Faites régulièrement la chasse aux erreurs 404 ! Le web change tellement vite que le webmaster du site d’accueil peut avoir supprimé la page ou renommé l’URL. Pour automatiser le repérage des 404, on peut utiliser tout simplement les outils Google pour les webmasters (Page d’accueil > Diagnostic > Erreurs d’exploitation).
Et pour éviter que les internautes retombent sur des pages supprimées via les moteurs de recherche, on peut aller jusqu’à déclarer à Google ses 404 pour éviter qu’elles continuent de s’afficher dans ses résultats : accéder au formulaire de demande de suppression.
Aller plus loin :
Voici quelques livres indispensables qui sont tous publiés aux éditions Eyrolles (non, je n’ai pas d’actions chez eux !) :
- Memento sites web : les bonnes pratiques, Elie Sloïm, Opquast, 2010, 18 pages
- Bien rédiger pour le web, Isabelle Canivet, 2009, 417 pages
- Ergonomie web, Amélie Boucher, 2009 (2e édition), 426 pages
Jeu de briques
Snake
Pacman
Bubble