10 trucs pour mieux rédiger les liens hypertextes

Accueil / Création de contenus / 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

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 . Ce qui donne à l’écran : Visiter le site Editoile. N’oubliez pas de fermer l’URL par un slash / pour indiquer au navigateur qu’il s’agit de la racine du site : cela fait partie des 217 bonnes pratiques du référentiel Opquast (tiens, Elie Sloïm, un lien entrant pour toi !).

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 . Pour ouvrir dans la même fenêtre ou onglet, c’est . Par défaut, c’est « self » qui s’applique si vous n’indiquez rien. Heureusement, les interfaces de gestion de contenu facilitent souvent la tâche en vous proposant systématiquement les champs à remplir, sans que vous ayez à les coder.

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 !) :

Commentaires(9)

  • 7 février 2011, 13:21  Répondre

    De bonnes pratiques orientées expérience utilisateur, qui facilitent la navigation de l’internaute et améliorent le taux de transformation.

  • 7 février 2011, 15:58  Répondre

    Des rappels mais qui nous permettent justement de nous souvenir de l’importance de la rigueur quant à la création de lien !

    Merci

  • 8 février 2011, 16:15  Répondre

    Bon rappel toujours utile. Pour la chasse aux pages 404 j’ajouterais un outil gratuit (mais en anglais) : xenu’s link sleuth (http://home.snafu.de/tilman/xenulink.html) qui permet de dénicher les liens morts, mais aussi images et fichiers manquants.

    • 9 février 2011, 15:42

      Merci pour ce complément pratique ! 🙂

  • 8 février 2011, 23:05  Répondre

    Bonne révision, pour les « ceusses » qui connaissent… et oublient parfois ! Et un bon moyen d’améliorer le référencement naturel du site Editoile et du blog Développement économique en Aquitaine 😉

  • 9 février 2011, 11:38  Répondre

    Un bon article, un de ceux qui tendent à rendre le web plus sémantique !

  • 20 février 2011, 01:06  Répondre

    Voilà des conseils pertinentes et pratiques. Pour la chasse aux erreurs 404, si on possède un blog WordPress il y a le plugin Broken Link Checker, très efficace.

  • 19 octobre 2011, 13:03  Répondre

    Merci pour cet article très instructif.

    J’aurais cependant bien aimé avoir des avis (ou études réalisées) sur les liens insérés sur certains mots dans les articles. ex: Mettre un lien sur un mot situé en plein milieu de phrase. Est-ce agréable à l’utilisateur ou trop « spammy »?

    Je partage sinon complètement l’avis de inpixelitrust: Xenu link est vraiment un très bon outil pour l’analyse de site comme pour le référencement.

    • 19 octobre 2011, 15:30

      Rendre cliquable un mot dans une phrase est une pratique courante. Je l’utilise généralement pour créer des liens internes et renvoyer éventuellement l’internaute vers une fiche produit, un lexique ou un article similaire.

      C’est efficace à condition de ne pas le faire trop souvent dans une même page. Car à force de tout souligner en bleu, ça devient illisible pour l’internaute.

Laisser un commentaire