La réponse tient en une poignée de caractères : <a href="votre-url">Votre texte</a>. Sauf que, comme souvent en informatique, le diable se niche dans les détails. Et ces détails, on va les passer au peigne fin – parce que si vous pensiez que c’était aussi simple que de copier-coller une URL, préparez-vous à un réveil brutal.
Pourquoi les liens cliquables existent (et pourquoi on les sous-estime)
Imaginez un monde sans liens. Vous seriez condamné à recopier manuellement chaque adresse web dans votre navigateur, comme un moine copiste du Moyen Âge. Les liens, c’est l’invention qui a transformé Internet en toile, justement : un réseau où tout est connecté, où une page mène à une autre, qui mène à une autre, jusqu’à ce que vous vous retrouviez à 3h du matin à regarder des vidéos de gens qui restaurent des meubles anciens. (Ne niez pas, on l’a tous fait.)
Mais derrière cette simplicité apparente se cache une mécanique bien huilée. Un lien cliquable, c’est avant tout un contrat de confiance entre vous et l’utilisateur : "Clique ici, je te promets que ça t’emmènera là où je te dis." Sauf que ce contrat, il faut le rédiger correctement. Et là, les choses se compliquent.
Ce que les liens ne sont pas (même si on aimerait bien)
Non, un lien n’est pas un bouton. Même si, visuellement, on peut le styliser pour qu’il en ait l’air. Un bouton déclenche une action (envoyer un formulaire, ouvrir une popup), tandis qu’un lien, lui, transporte. C’est une nuance subtile, mais qui change tout en termes d’accessibilité et de sémantique. Utiliser un lien pour soumettre un formulaire, c’est un peu comme servir un steak dans une assiette à soupe : techniquement, ça passe, mais ça reste une hérésie.
Autre idée reçue : un lien doit forcément pointer vers une autre page. Faux. Il peut aussi servir à déclencher un appel téléphonique (<a href="tel:+33123456789">), envoyer un email (<a href="mailto:[email protected]">), ou même télécharger un fichier (<a href="fichier.pdf" download>). Le navigateur, lui, s’en fiche : tant que le protocole est valide (http, https, mailto, tel…), il exécutera l’action demandée. Et c’est là que les choses deviennent intéressantes.
La syntaxe de base : moins simple qu’il n’y paraît
Commençons par le B.A.-BA. La structure minimale d’un lien cliquable ressemble à ceci :
<a href="">Visitez notre site</a>
Sur le papier, rien de sorcier. Sauf que cette simplicité est trompeuse. Parce que si vous oubliez le "https://", si vous inversez les guillemets, ou si vous placez le texte entre les balises au mauvais endroit, votre lien ne fonctionnera pas. Ou pire : il fonctionnera, mais de travers. (Et croyez-moi, un lien qui ouvre une page 404 à la place de votre super article, c’est rageant.)
Les pièges courants (et comment les éviter)
Premier piège : les URL relatives. Si vous écrivez <a href="contact.html">Contact</a>, le navigateur va chercher le fichier "contact.html" dans le même dossier que la page actuelle. Ça marche… jusqu’à ce que vous déplaciez votre fichier ou que vous changiez la structure de votre site. Résultat : votre lien pointe vers le néant. Pour éviter ça, privilégiez les URL absolues (<a href="/contact">) quand c’est possible.
Deuxième piège : les espaces dans les URL. Si votre lien pointe vers "mon fichier.pdf", le navigateur va remplacer l’espace par "%20", ce qui donne "mon%20fichier.pdf". Ça fonctionne, mais c’est moche, et ça peut poser problème avec certains serveurs. La solution ? Soit vous renommez votre fichier ("mon-fichier.pdf"), soit vous utilisez l’attribut download pour forcer le téléchargement sans que l’URL soit affichée.
Troisième piège : les guillemets. Si vous écrivez <a href=example.com> sans guillemets autour de l’URL, certains navigateurs vont râler. D’autres non. Mais dans le doute, mettez-les. Toujours. (Et utilisez des guillemets droits, pas des guillemets typographiques. Oui, ça existe, et oui, ça peut tout casser.)
Les attributs qui changent tout (et qu’on oublie trop souvent)
Un lien, c’est comme un sandwich : la base (le pain et la garniture) est indispensable, mais ce sont les condiments qui font la différence. Dans le cas des liens, ces "condiments", ce sont les attributs. Et il y en a quelques-uns qui méritent qu’on s’y attarde.
target="_blank" : l’ami qui ouvre une nouvelle fenêtre (et qui peut devenir un ennemi)
Vous voulez que votre lien s’ouvre dans un nouvel onglet ? Ajoutez target="_blank". Simple, efficace, et… potentiellement dangereux. Parce que si vous ne prenez pas quelques précautions, vous offrez une porte d’entrée aux attaques de type "tabnabbing". Le principe ? Un site malveillant peut rediriger l’onglet que vous venez d’ouvrir vers une page de phishing, en profitant du fait que l’onglet parent (votre site) est toujours ouvert.
La solution ? Ajoutez rel="noopener noreferrer" à votre lien. Comme ceci :
<a href="" target="_blank" rel="noopener noreferrer">Site externe</a>
Ces deux petits attributs bloquent l’accès à la page parente depuis la nouvelle fenêtre, ce qui empêche les manipulations malveillantes. C’est une bonne pratique, et ça ne coûte rien. Alors autant le faire systématiquement.
rel="nofollow" : le discret qui dit aux moteurs de recherche de passer leur chemin
Par défaut, les liens transmettent du "jus SEO" à la page vers laquelle ils pointent. Si vous liez vers un site de qualité, c’est une bonne chose. Mais si vous liez vers un site douteux (ou pire, un concurrent), vous lui offrez un petit coup de pouce dans les résultats de recherche. Pour éviter ça, utilisez rel="nofollow" :
<a href="" rel="nofollow">Site douteux</a>
Google et consorts ignoreront alors ce lien dans leur algorithme. Utile pour les liens sponsorisés, les commentaires de blog, ou tout ce qui sort du cadre de votre contenu "naturel".
title : le petit plus qui améliore l’accessibilité (quand on s’en sert bien)
L’attribut title permet d’ajouter une infobulle qui s’affiche quand l’utilisateur survole le lien. En théorie, c’est génial : ça donne une indication supplémentaire sur la destination du lien. En pratique, c’est souvent mal utilisé. Par exemple :
<a href="contact.html" title="Contact">Contact</a>
Là, le title ne sert à rien. Il répète ce qui est déjà visible. En revanche, si vous écrivez :
<a href="contact.html" title="Formulaire de contact pour toute question technique">Contact</a>
Là, ça devient utile. Surtout pour les utilisateurs qui naviguent avec un lecteur d’écran, ou ceux qui ont besoin d’un contexte supplémentaire avant de cliquer.
Le design des liens : quand l’esthétique prend le pas sur la fonction
Un lien bleu souligné, c’est la norme depuis les débuts du web. Mais aujourd’hui, plus personne ne s’en contente. Les liens sont stylisés, personnalisés, intégrés dans des designs toujours plus audacieux. Sauf que quand on touche à l’apparence d’un lien, on touche aussi à son utilisabilité. Et là, les choses peuvent vite déraper.
Les règles d’or pour un lien visible (et cliquable)
Première règle : un lien doit se distinguer du reste du texte. Si votre lien est de la même couleur que le paragraphe qui l’entoure, personne ne le verra. Alors oui, vous pouvez utiliser du rouge, du vert, ou même du violet fluo, mais assurez-vous qu’il y ait un contraste suffisant. Les outils comme WebAIM Contrast Checker peuvent vous aider à vérifier ça.
Deuxième règle : un lien doit être identifiable comme tel. Le soulignement est la convention la plus répandue, mais ce n’est pas une obligation. Vous pouvez utiliser une couleur différente, un fond coloré, ou même une petite icône à côté du texte. L’important, c’est que l’utilisateur comprenne, au premier coup d’œil, que ce texte est cliquable. (Et non, un simple changement de couleur ne suffit pas. Les daltoniens, par exemple, ne le verront pas.)
Troisième règle : un lien doit rester cliquable. Ça semble évident, mais on voit trop souvent des liens minuscules, ou placés trop près d’autres éléments interactifs. Si votre utilisateur doit zoomer pour cliquer sur un lien, c’est raté. Les bonnes pratiques recommandent une taille minimale de 48x48 pixels pour les zones cliquables. Sur mobile, c’est encore plus critique.
Les effets au survol : utiles ou gadgets ?
Quand on survole un lien, il se passe généralement quelque chose : le texte change de couleur, un soulignement apparaît, ou un petit effet de transition se déclenche. Ces effets sont là pour confirmer à l’utilisateur que le lien est bien interactif. Sauf que certains sites en font des caisses : liens qui grossissent, qui tournent, qui explosent en confettis… Bref, des animations qui distraient plus qu’elles n’aident.
Le conseil ? Restez sobre. Un simple changement de couleur ou un soulignement progressif suffit. Et surtout, testez sur mobile : si votre effet au survol ne fonctionne qu’avec une souris, vous excluez une bonne partie de vos utilisateurs.
Les liens dans le contenu : où, quand, comment ?
Un lien, c’est bien. Mais un lien bien placé, c’est mieux. Parce qu’un lien perdu au milieu d’un paragraphe de 500 mots, personne ne le verra. Et un lien qui pointe vers une page sans rapport avec le contexte, personne ne cliquera dessus. Alors comment faire pour que vos liens soient à la fois visibles et pertinents ?
L’art de l’ancrage textuel (ou comment ne pas écrire "cliquez ici")
"Cliquez ici". "Lire la suite". "En savoir plus". Ces formulations sont partout, et pourtant, elles sont à bannir. Pourquoi ? Parce qu’elles n’apportent aucune information sur la destination du lien. Un utilisateur qui scanne rapidement votre page ne saura pas où il atterrira. Pire : un lecteur d’écran qui liste tous les liens de la page ne verra qu’une série de "cliquez ici" sans queue ni tête.
La solution ? Utilisez un ancrage textuel descriptif. Par exemple :
❌ <a href="article.html">Cliquez ici pour lire notre article sur les liens cliquables</a>
✅ <a href="article.html">Notre guide complet sur les liens cliquables</a>
Dans le premier cas, le lien est vague. Dans le second, il est clair, concis, et informatif. Et cerise sur le gâteau : il contient des mots-clés qui aident au référencement.
La densité des liens : ni trop, ni trop peu
Trop de liens tuent le lien. Littéralement. Si votre page ressemble à un sapin de Noël avec des guirlandes clignotantes partout, vos utilisateurs vont se sentir submergés. À l’inverse, si vous n’avez qu’un seul lien en bas de page, personne ne le verra.
Alors quelle est la bonne densité ? Il n’y a pas de règle absolue, mais voici quelques repères :
- Dans un article de blog, un lien tous les 2-3 paragraphes, c’est raisonnable.
- Dans une page de navigation (menu, footer), vous pouvez en mettre plus, mais organisez-les de manière logique.
- Évitez les "nids de liens" : plusieurs liens qui se suivent sans texte entre eux. Ça rend la lecture difficile, surtout sur mobile.
Et surtout, posez-vous la question : ce lien apporte-t-il vraiment quelque chose à l’utilisateur ? Si la réponse est non, supprimez-le.
Les liens qui ne marchent pas (et comment les réparer)
Un lien qui ne fonctionne pas, c’est comme une porte qui mène nulle part : frustrant, décevant, et potentiellement dangereux pour votre crédibilité. Pourtant, les liens brisés sont monnaie courante sur le web. Selon une étude de Ahrefs, près de 6% des liens sur Internet pointent vers des pages qui n’existent plus. Alors comment éviter de faire partie des statistiques ?
Les erreurs 404 : le fléau des liens morts
Une erreur 404, c’est le message que vous voyez quand une page n’existe plus. Ça arrive quand :
- Vous supprimez une page sans rediriger son URL.
- Vous changez la structure de votre site sans mettre à jour les liens internes.
- Vous liez vers un site externe qui a disparu ou changé d’adresse.
Pour éviter ça, utilisez des outils comme Screaming Frog ou Dead Link Checker pour scanner votre site et repérer les liens morts. Et si vous devez supprimer une page, mettez en place une redirection 301 vers une page similaire. Comme ça, vos utilisateurs (et les moteurs de recherche) ne se retrouveront pas face à un mur.
Les liens qui pointent vers le mauvais endroit (et comment les débusquer)
Parfois, le lien fonctionne, mais il ne mène pas là où vous le pensiez. Ça peut arriver quand :
- Vous copiez-collez une URL sans vérifier qu’elle est correcte.
- Vous utilisez une URL relative qui pointe vers le mauvais fichier.
- Vous liez vers une section spécifique d’une page (#section), mais cette section a été supprimée ou renommée.
La solution ? Testez systématiquement vos liens après les avoir créés. Cliquez dessus, vérifiez que la page s’ouvre bien, et que le contenu correspond à ce que vous attendez. Et si vous liez vers une section spécifique, assurez-vous que l’ID de la section existe bien dans le code HTML de la page cible.
Liens et SEO : ce que Google voit (et ce qu’il en pense)
Les liens, c’est le pain et le beurre du référencement naturel. Sans eux, les moteurs de recherche auraient du mal à explorer le web et à comprendre quelles pages sont importantes. Mais tous les liens ne se valent pas. Certains boostent votre SEO, d’autres le pénalisent, et d’autres encore n’ont aucun impact. Alors comment faire pour que vos liens jouent en votre faveur ?
Le "jus SEO" : comment ça marche (et comment en profiter)
Quand un site fait un lien vers le vôtre, il vous transmet une partie de son "autorité". C’est ce qu’on appelle le "link juice" (ou "jus de lien", si vous préférez le français). Plus le site qui vous lie est populaire et pertinent, plus le jus qu’il vous transmet est puissant. Par exemple, un lien depuis Wikipedia ou Le Monde aura bien plus de poids qu’un lien depuis un blog inconnu.
Mais attention : tous les liens ne sont pas créés égaux. Google prend en compte plusieurs facteurs :
- La pertinence : un lien depuis un site qui parle du même sujet que le vôtre aura plus de poids.
- La position : un lien dans le contenu principal d’une page compte plus qu’un lien dans le footer.
- Le texte d’ancrage : un lien avec un ancrage descriptif ("guide des liens cliquables") est plus utile qu’un "cliquez ici".
- Le contexte : un lien entouré de texte pertinent sera mieux interprété par les algorithmes.
Les liens toxiques : comment les repérer et s’en débarrasser
Tous les liens ne sont pas bons à prendre. Certains peuvent même nuire à votre référencement. C’est le cas des liens provenant de sites spammy, de fermes de liens, ou de réseaux de blogs créés uniquement pour manipuler les résultats de recherche. Google appelle ça des "liens toxiques", et il peut pénaliser votre site s’il en détecte trop.
Pour les repérer, utilisez des outils comme Google Search Console ou Ahrefs. Si vous trouvez des liens suspects, vous avez deux options :
1. Contactez le webmaster du site en question et demandez-lui de supprimer le lien.
2. Utilisez l’outil de désaveu de liens de Google pour indiquer que vous ne voulez pas que ces liens soient pris en compte.
Mais attention : le désaveu de liens est une arme à double tranchant. Si vous l’utilisez à tort et à travers, vous risquez de supprimer des liens qui vous aident. Alors avant de vous lancer, analysez bien la situation.
Les alternatives aux liens classiques (et quand les utiliser)
Un lien, c’est bien. Mais parfois, il faut sortir des sentiers battus. Parce que dans certains cas, un simple <a href> ne suffit pas. Heureusement, il existe des alternatives pour répondre à des besoins spécifiques.
Les boutons déguisés en liens (et vice versa)
Comme on l’a vu plus tôt, un lien et un bouton ne servent pas à la même chose. Mais parfois, on a envie que l’un ressemble à l’autre. Par exemple, vous voulez qu’un lien ait l’apparence d’un bouton, ou qu’un bouton se comporte comme un lien. Comment faire ?
Pour un lien qui ressemble à un bouton :
<a href="contact.html" class="bouton">Contactez-nous</a>
Et dans votre CSS :
.bouton {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
.bouton:hover {
background-color: #0056b3;
}
Pour un bouton qui se comporte comme un lien :
<button onclick="window.location.href='contact.html'">Contactez-nous</button>
Mais attention : cette dernière méthode pose des problèmes d’accessibilité. Les lecteurs d’écran ne reconnaîtront pas ce bouton comme un lien, et les utilisateurs qui naviguent au clavier ne pourront pas l’activer avec la touche Entrée. Alors à utiliser avec parcimonie.
Les liens JavaScript : quand le HTML ne suffit plus
Parfois, vous avez besoin qu’un lien fasse plus que simplement rediriger vers une autre page. Par exemple, vous voulez qu’il ouvre une popup, qu’il déclenche une animation, ou qu’il envoie des données à un serveur avant de rediriger. Dans ces cas-là, vous pouvez utiliser JavaScript.
Exemple avec un lien qui affiche une alerte avant de rediriger :
<a href="contact.html" onclick="alert('Vous allez être redirigé vers notre page de contact');">Contact</a>
Ou avec un lien qui envoie des données via AJAX :
<a href="#" onclick="envoyerDonnees(); return false;">Envoyer</a>
Mais là encore, prudence. Les liens JavaScript posent des problèmes d’accessibilité et de référencement. Les moteurs de recherche peuvent avoir du mal à les suivre, et les utilisateurs qui désactivent JavaScript ne pourront pas les utiliser. Alors réservez cette technique aux cas où elle est vraiment nécessaire.
Les erreurs qui tuent vos liens (et comment les éviter)
Créer un lien cliquable, c’est facile. Créer un lien qui fonctionne bien, qui est accessible, et qui ne nuit pas à votre SEO, c’est une autre paire de manches. Et dans ce domaine, les erreurs sont légion. En voici quelques-unes, parmi les plus courantes.
L’erreur n°1 : oublier l’attribut href
Un lien sans href, c’est comme une voiture sans moteur : ça a l’air d’une voiture, mais ça ne va nulle part. Pourtant, on voit souvent des choses comme ça :
<a>Ce lien ne mène nulle part</a>
Résultat : le texte est bleu et souligné, mais rien ne se passe quand on clique dessus. Pour éviter ça, vérifiez toujours que votre lien a bien un attribut href, même s’il ne pointe vers rien pour l’instant. Dans ce cas, utilisez href="#" ou href="javascript:void(0)".
L’erreur n°2 : utiliser des URL absolues partout
Les URL absolues (celles qui commencent par "https://") sont utiles pour les liens externes, mais pour les liens internes, elles peuvent poser problème. Par exemple :
<a href="/contact">Contact</a>
Si un jour vous changez de nom de domaine (par exemple, pour passer de "monsite.com" à "monsite.fr"), tous vos liens internes seront cassés. Pour éviter ça, utilisez des URL relatives pour les liens internes :
<a href="/contact">Contact</a>
Comme ça, même si votre domaine change, vos liens continueront de fonctionner.
L’erreur n°3 : négliger l’accessibilité
Un lien accessible, c’est un lien que tout le monde peut utiliser, quel que soit son handicap. Et pourtant, beaucoup de liens sont inaccessibles. Voici quelques bonnes pratiques à suivre :
- Utilisez un texte d’ancrage descriptif (pas de "cliquez ici").
- Assurez-vous que le contraste entre le texte du lien et son arrière-plan est suffisant.
- Ajoutez un attribut title si le contexte n’est pas clair.
- Utilisez aria-label pour les liens qui contiennent uniquement une icône.
Par exemple :
<a href="contact.html" aria-label="Formulaire de contact"><img src="icone-contact.png" alt=""></a>
Questions fréquentes (celles qu’on se pose tous un jour)
Pourquoi mon lien ne s’ouvre pas dans un nouvel onglet ?
Si vous avez ajouté target="_blank" mais que votre lien s’ouvre toujours dans le même onglet, vérifiez deux choses :
1. Que vous n’avez pas une extension de navigateur (comme un bloqueur de popups) qui empêche l’ouverture de nouveaux onglets.
2. Que votre code HTML est correct. Par exemple, si vous écrivez target="blank" (sans le underscore), ça ne marchera pas. Le bon attribut est target="_blank".
Et n’oubliez pas d’ajouter rel="noopener noreferrer" pour des raisons de sécurité.
Comment faire un lien qui télécharge un fichier ?
Pour forcer le téléchargement d’un fichier au lieu de l’ouvrir dans le navigateur, utilisez l’attribut download :
<a href="fichier.pdf" download>Télécharger le PDF</a>
Le navigateur proposera alors à l’utilisateur d’enregistrer le fichier plutôt que de l’afficher. Notez que cet attribut ne fonctionne pas avec les liens externes (ceux qui pointent vers un autre site). Il faut que le fichier soit hébergé sur votre propre serveur.
Est-ce que je peux mettre un lien dans un email ?
Oui, mais avec prudence. Les liens dans les emails sont souvent bloqués par les clients de messagerie pour des raisons de sécurité. Pour maximiser les chances que votre lien soit cliquable :
- Utilisez une URL complète (avec "https://").
- Évitez les liens trop longs (certains clients les tronquent).
- Testez votre email sur plusieurs clients (Gmail, Outlook, Apple Mail…) avant de l’envoyer.
Et surtout, ne mettez pas de liens vers des sites suspects. Votre email finira dans les spams avant même d’avoir été lu.
Comment savoir si mes liens sont suivis par Google ?
Pour vérifier si Google suit vos liens, vous pouvez utiliser l’outil Google Search Console. Allez dans l’onglet "Liens" pour voir quels sites pointent vers le vôtre, et quels liens internes sont les plus populaires. Vous pouvez aussi utiliser des outils comme Ahrefs ou Moz pour analyser votre profil de liens.
Si vous voulez savoir si un lien spécifique est suivi, regardez son code HTML. S’il contient rel="nofollow", Google ne le suivra pas. Sinon, il devrait être pris en compte dans l’algorithme de classement.
Verdict : faut-il encore s’embêter avec les liens en 2024 ?
Les liens cliquables existent depuis les débuts du web, et ils ne sont pas près de disparaître. Même avec l’avènement des applications mobiles, des réseaux sociaux, et des interfaces vocales, le bon vieux <a href> reste la pierre angulaire de la navigation en ligne. Alors oui, il faut encore s’embêter avec les liens. Mais pas n’importe comment.
La clé, c’est de ne pas les voir comme une simple balise HTML, mais comme un outil de communication. Un lien bien placé, avec un ancrage textuel pertinent et une destination utile, peut améliorer l’expérience utilisateur, booster votre SEO, et même augmenter vos conversions. À l’inverse, un lien mal conçu, cassé, ou inaccessible, peut frustrer vos visiteurs et nuire à votre crédibilité.
Alors la prochaine fois que vous créerez un lien, posez-vous les bonnes questions : Est-ce que ce lien apporte de la valeur ? Est-ce qu’il est visible et cliquable ? Est-ce qu’il respecte les bonnes pratiques en matière d’accessibilité et de sécurité ? Si la réponse est oui à tout, alors vous êtes sur la bonne voie. Sinon, il est temps de retourner à la case départ.
Et surtout, n’oubliez pas : un lien, c’est comme une poignée de main virtuelle. Si elle est molle, hésitante, ou pire, inexistante, votre visiteur ne vous fera pas confiance. Alors faites en sorte que chaque clic soit une expérience fluide, intuitive, et sans mauvaise surprise. Parce qu’au final, c’est ça, la magie des liens : transformer une simple interaction en une porte ouverte vers de nouvelles possibilités.