10 trucs pour mieux rédiger les liens hypertextes

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 sur l’ancre du lien

Première erreur (encore trop courante, hélas…) : rédiger un lien trop étroit pour être cliqué. C’est le fameux « Pour nous contacter cliquer ici » où seules les 3 lettres de « ici » sont cliquables. L’espace (ou ancre) sur lequel il faut positionner la souris pour cliquer est tellement étroit que l’internaute a du mal à cliquer dessus, voire à le voir tout simplement. A éviter absolument !

Il vaut mieux que l’ancre du lien, c’est-à-dire les mots qui sont cliquables, porte sur un groupe de mots ou une phrase entière, sur le modèle : Envoyer un message à Editoile.

Attention à ne pas non plus tomber dans l’excès inverse qui serait de rendre cliquable une expression trop longue, voire un paragraphe entier. Ou à truffer tellement votre texte de liens différents qu’il en devient illisible…

Une autre solution, surtout pour des appels à l’action stratégiques 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 !

Placez vos liens à des endroits stratégiques de la page web. L’internaute aura naturellement tendance à chercher les liens des yeux, donc si vous souhaitez qu’il lise un peu plus votre texte, placez le lien dans le corps du texte, à la fin des paragraphes ou en conclusion de l’article.

2. Souligner les liens

L’usage visuel 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 font apparaître leur nature de lien 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 ». Voir son livre : Ergonomie web, Amélie Boucher, éd. Eyrolles.

Et si vous décidez pour une raison graphique ou autre de prendre des libertés avec cette règle du bleu souligné, appliquez le même choix de couleur pour les tous les liens sur toutes les pages de votre site. Et  surtout réserver le souligné aux seuls liens ! Autrement dit, « capitaliser sur l’apprentissage interne du site » (dixit Amélie).

3. Donner envie de cliquer sur le lien

C’est ce qu’on appelle l’affordance au clic : ce qui fait que l’internaute comprend qu’il peut cliquer sur un objet virtuel et qu’il 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 « Lire la suite ». Préférez « Pour en savoir plus sur le produit x » ou « Voir 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 « calls-to-action » (ou appels à l’action) : des liens utiles qui redonnent la main à l’internaute. 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 a servi à rédiger l’article.

A ce propos, n’hésitez pas à ajouter des liens sortants dans vos pages vers d’autres sites externes, à condition qu’ils pointent vers des sites de référence, avec des informations de qualité, traitant du même sujet que vous. Evitez de faire des liens vers des sites de mauvaise qualité : c’est un mauvais signal envoyé à Google sur la qualité de votre propre site.

5. Soigner l’accessibilité du lien

C’est surtout vrai pour les liens qui renvoient vers un document à télécharger ou une vidéo. Cela consiste à préciser 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 personnel, 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). »

A ce propos, pour rendre un pdf téléchargeable en cliquant sur un lien, suivez les étapes suivantes sur WordPress :

1. Ouvrir la bibliothèque de médias
2. Téléverser le pdf dans la bibliothèque de médias comme n’importe quelle image
3. Copier-coller l’URL du média pdf
4. Retourner dans l’article ou page dans lequel vous voulez insérer le pdf
5. Rédiger l’ancre du lien du pdf dans le texte
6. Cliquer sur l’icône « Insérer/modifier un lien » (le maillon) dans l’éditeur
7. Coller l’URL du média pdf

Et si vous voulez en savoir plus sur cette notion d’accessibilité des contenus chère au référentiel de qualité web Opquast, lisez notre article « Rédaction web: 20 bonnes pratiques qualité ».

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 dans un player directement sur la page web, 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. Renforcer le maillage interne du site

N’oublier pas d’ajouter plusieurs liens hypertextes à l’intérieur de votre page qui renvoient vers d’autres pages de votre site qui traitent d’un sujet similaire, si possible à l’intérieur même des phrases de façon contextuelle.

Un bon maillage interne des pages du site permet de rendre plus visible certaines pages profondes ou moins visitées que les autres. Cela a plusieurs avantages :

• Retenir un peu plus longtemps le visiteur en lui faisant cliquer une page de plus pour faire diminuer le taux de rebond
• Faire crawler des pages supplémentaires au robot de Google pour améliorer l’indexation de son site
• Réduire la profondeur du site, c’est-à-dire le nombre de clics à partir de la page d’accueil pour accéder à n’importe quelle page. C’est mieux pour le référencement naturel !

Si vous avez un blog avec beaucoup de contenus éditoriaux, vous pouvez aussi ajouter une extension (ou plug-in) qui liste automatiquement les articles similaires en bas de chaque article. Sur WordPress, on peut utiliser les extensions Similar Post (et son extension inséparable Post-Plugin Library) ou configurer la fonctionnalité Related Content de Shareaholic.

8. Remplir l’attribut title du lien

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 codé comme ci-dessus. Ce qui donne à l’écran : Visiter le site Editoile.

L’attribut title du lien (qui est traduit par « titre » ou « description » suivant les interfaces de gestion de contenu) permet de faire apparaître des mots-clés dans une bulle au survol du lien pour l’internaute, mais aussi de renseigner Google sur le contenu de la page de destination.

Par exemple, vous faites un lien vers le site internet d’un organisme et vous indiquez dans l’attribut title le nom de cet organisme ou sa thématique. Quelques mots-clés pertinents suffisent.

Le title s’ajoute entre le a et le href. Le code html du lien avec title et href est alors (…).

9. Ouvrir le lien dans un autre onglet (ou pas)

Lorsqu’on rédige un lien hypertexte, on doit décider s’il doit ouvrir dans un nouvel onglet du navigateur ou dans le même onglet. 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 un autre onglet, 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 le même onglet, pour respecter le chemin de navigation interne de l’internaute.

Pour ouvrir une nouvel onglet, l’attribut target est . Pour ouvrir dans le même onglet, c’est . Attention à ne pas oublier l’underscore (ou tiret du 8) avant blank ou self.

Par défaut, si vous n’indiquez pas de cible, c’est « _self » qui s’applique. Heureusement, les interfaces de gestion de contenu facilitent souvent la tâche en vous proposant systématiquement des cases à cocher « _blank » ou « _self », sans que vous ayez à les coder. Sinon, il faut afficher le html de la page pour les ajouter à la main.

La target s’ajoute après le href. Le code html du lien avec title, href et target est alors .

10. Réparer les erreurs 404 ou 301

Pour limiter les liens cassés ou redirigés, je ne saurais trop vous conseiller de copier l’URL de destination (celle vers laquelle pointe votre lien) dans la fenêtre du haut de votre navigateur et de la coller directement dans votre page web. Saisir une URL à la main représente trop de marge d’erreur…

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 bien qu’on a oublié http:// au début de l’URL. Ou bien qu’on a copié-collé deux fois l’URL d’affilée (ça sent le vécu…).

Vérifiez aussi de temps en temps que les liens sont toujours actifs. Faites régulièrement la chasse aux erreurs 404, autrement dit aux liens cassés sur votre site qui affichent une « page 404 ». Le Web change tellement vite que le webmaster du site peut avoir supprimé la page ou renommé l’URL entre temps. Pour faciliter le repérage des 404, on peut utiliser tout simplement la Search Console de Google (Page d’accueil > Diagnostic > Erreurs d’exploitation).

Les erreurs 301 sont plus difficiles à repérer car la page de destination finit quand même par s’afficher, mais après une redirection. Certes, l’internaute arrive quand même à voir le contenu qu’il recherche (contrairement à l’erreur 404), mais ces erreurs consomment inutilement du temps de serveur et ne sont pas un signe de qualité pour Google. Il peut s’agir d’un « www » inutile redirigé vers une version sans www ou d’un simple slash / oublié à la fin de l’URL.

Vous voulez continuer votre lecture sur ce blog et apprendre d’autres astuces de rédaction web ? C’est par ici :

• Rédiger une liste à puces sur un site web
• 10 astuces pour écrire plus simplement
• Organiser l’arborescence d’un site web avec la méthode du tri des cartes

Article mis à jour le 10 juillet 2023.