Comment cacher un lien avec JS pour en favoriser un autre 

Si vous êtes développeur web, webmaster ou consultant SEO, vous avez probablement déjà cherché à cacher un lien avec JS pour en favoriser un autre. Cette technique, bien que discrète, répond à des besoins variés : améliorer l’expérience utilisateur, gérer le maillage interne, optimiser le SEO ou encore protéger une destination sensible. Dans cet article, nous allons regarder en détail comment cacher un lien avec JS pour en favoriser un autre, les motivations qui poussent à le faire, les méthodes techniques disponibles, ainsi que leurs implications en matière d’accessibilité et de référencement naturel. Préparez votre éditeur de code, nous commençons !

Pourquoi cacher un lien avec JS pour en favoriser un autre ?

Avant de plonger dans le code, il est essentiel de comprendre les raisons qui peuvent amener un développeur à vouloir cacher un lien avec JS pour en favoriser un autre. Contrairement à ce que l’on pourrait penser, ceci n’est pas une pratique malveillante dans la majorité des cours d’utilisation. Les motivations sont souvent légitimes et bien pensées.

Motivations et cas d’usage du masquage de liens

Parmi les sites les plus concernés, on trouve les plateformes de partage de contenu, les forums et les blogs. Voici quelques scénarios typiques :

• Protection de liens d’affiliation : cacher l’URL réelle derrière un lien plus propre pour éviter le vol de commission.
• Amélioration du maillage interne : favoriser un lien plutôt qu’un autre en masquer temporairement la version moins pertinente.
• Personnalisation dynamique : modifier la destination d’un lien en fonction du contexte utilisateur (membre connecté, pays, etc.).
• Redirect tracking : intercepter le clic avant de rediriger vers la destination finale pour analyser le comportement.

Rien ne vous empêche d’utiliser ces techniques tant que vous respectez les bonnes pratiques et l’expérience de l’utilisateur. La sécurité et la transparence doivent rester vos priorités.

Distinction entre masquer visuellement et cacher la destination

Il est essentiel de comprendre qu’il existe plusieurs niveaux de masquage :

• Masquer visuellement : le lien existe dans le code source mais n’est pas visible à l’écran (CSS display: none ou visibility: hidden).
• Cacher la destination : l’URL stockée dans l’attribut href est volontairement cachée ou modifiée via JavaScript, souvent en utilisant des data-attributes.
• Obfuscation complète : le lien est encodé (Base64 par exemple) et décodé au clic par une fonction JS.

Chaque approche a ses avantages et inconvénients que nous allons détailler dans la suite de cet article.

Techniques pour cacher un lien avec JS pour en favoriser un autre

Passons maintenant à la partie technique. Nous allons voir différentes méthodes pour cacher un lien avec JS pour en favoriser un autre, avec des exemples de code commentés pour chaque approche.

Cacher un lien avec JS pour en favoriser un autre via le DOM

La méthode la plus courante consiste à manipuler directement le DOM pour cacher un lien avec JS pour en favoriser un autre. Voici un exemple concret :

<!-- HTML --> <a href=\"https://example.com/ancien-lien\" id=\"lien1\">Ancien lien</a> <a href=\"https://example.com/nouveau-lien\" id=\"lien2\" class=\"cache\">Nouveau lien</a> <script> // JavaScript pour cacher un lien avec JS pour en favoriser un autre const ancienLien = document.getElementById('lien1'); const nouveauLien = document.getElementById('lien2'); // On cache l'ancien lien et on affiche le nouveau ancienLien.style.display = 'none'; nouveauLien.style.display = 'inline'; nouveauLien.classList.remove('cache'); </script>

Cette technique est simple et fonctionne dans tous les navigateurs modernes. L’élément caché ne prend plus de place dans le flux et n’est plus cliquable.

Utiliser javascript pour modifier l’affichage au survol de la souris

Une autre approche consiste à modifier dynamiquement l’URL affichée dans la barre d’état du navigateur lorsque l’utilisateur survole le lien avec sa souris. Cela permet de masquer temporairement une destination :

<a href=\"javascript:void(0)\" onmouseover=\"changerLien()\" onmouseout=\"restaurerLien()\"> Cliquez ici </a> <script> function changerLien() { // Afficher une fausse URL dans la barre d'état window.status = 'https://exemple-securise.com'; } function restaurerLien() { window.status = ''; } // Gestion du clic function ouvrirDestination() { window.location.href = 'https://destination-reelle.com'; } </script>

Notez que cette technique est limitée : la plupart des navigateurs modernes ne permettent plus de modifier window.status pour des raisons de sécurité.

Cacher un lien avec JS pour en favoriser un autre avec des data-attributes

Une méthode plus élégante et recommandée consiste à utiliser des data-attributes pour cacher un lien avec JS pour en favoriser un autre. L’URL réelle est stockée dans un attribut personnalisé et n’est récupérée qu’au moment du clic :

<!-- Structure HTML avec data-attributes --> <div id=\"conteneur\"> <a href=\"#\" class=\"lien-favori\" data-lien=\"https://www.site-prioritaire.com\"> Lien favorisé </a> <a href=\"#\" class=\"lien-secondaire\" data-lien=\"https://www.site-secondaire.com\"> Lien secondaire </a> </div> <script> // Avec querySelectorAll on sélectionne tous les liens const liens = document.querySelectorAll('.lien-favori, .lien-secondaire'); liens.forEach(function(lien) { lien.addEventListener('click', function(event) { event.preventDefault(); // On récupère la valeur de l'attribut data-lien stocké const destination = this.getAttribute('data-lien'); // On favorise un lien en fonction du contexte window.location.href = destination; }); }); </script>

Cette approche offre une grande flexibilité. L’utilisateur ne voit qu’un href vide ou une ancre (#), tandis que la vraie destination est cachée dans le code source. Vous pouvez facilement modifier le comportement pour favoriser un lien plutôt qu’un autre selon vos critères.

Extension de la zone cliquable et autres techniques avancées

Vous pouvez également cacher un lien en étendant la zone cliquable d’un autre lien pour en favoriser un autre. Grâce à du CSS et un peu de JS, on peut superposer des éléments :

<div class=\"zone-cliquable\" style=\"position: relative;\"> <a href=\"https://favori.com\" class=\"lien-principal\">Lien favorisé</a> <p>Ce paragraphe se trouve <span class=\"cache\">dans la zone</span> du conteneur.</p> </div> <style> .lien-principal::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .cache { display: none; } </style>

Le pseudo-élément ::after permet d’étendre la zone cliquable sur tout le conteneur, rendant invisible le lien secondaire tout en favorisant le lien principal.

Implications SEO et considérations d’accessibilité

Cacher des liens avec JavaScript n’est pas sans conséquence. Regardons les impacts sur le SEO et l’expérience utilisateur.

Impact sur le référencement et le SEO

Googlebot interprète le HTML et suit les liens qu’il trouve dans la balise href. Si vous cachez complètement un lien avec display: none ou visibility: hidden, Googlebot peut décider de ne pas suivre ce lien, ce qui affecte le SEO et le PR Scultping. Voici quelques points à considérer :

• Googlebot exécute JavaScript dans une certaine mesure, mais pas toujours de la même manière qu’un navigateur classique.
• Si vous masquer un lien via CSS (display: none), Google peut ne pas transmettre le jus de lien.
• L’utilisation d’attributs data-* ou de scripts pour charger les URL dynamiquement peut ne pas être interprétée par Google.
• Le cloaking (afficher un contenu différent à Google et aux utilisateurs) est strictement sanctionné.

Cependant, si vous cacher un lien avec JS pour en favoriser un autre de manière légitime (par exemple, pour personnaliser l’expérience d’un membre connecté), cela ne pose généralement pas de problème SEO majeur, à condition que Google puisse toujours accéder à au moins un lien crawlable.

Accessibilité pour les utilisateurs et lecteurs d’écran

Les utilisateurs qui naviguent sans JavaScript ou avec un lecteur d’écran ne pourront pas interagir avec les liens qui dépendent uniquement du JS. C’est un problème d’accessibilité majeur :

• Les lecteurs d’écran lisent tous les liens présents dans le HTML, même ceux cachés visuellement avec display: none.
• Si un lien est masqué mais pas retiré du DOM, il reste accessible via la navigation au clavier (touche Tab).
• Il est recommandé d’ajouter un texte alternatif et des attributs ARIA pour informer les utilisateurs de lecteurs d’écran.

Bonnes pratiques et alternatives au masquage de liens avec JS

Pour terminer cet article, voici quelques recommandations pour cacher un lien avec JS pour en favoriser un autre de manière responsable.

Alternatives côté serveur et redirections php

Lorsque c’est possible, privilégiez les solutions côté serveur :

• Utilisez des redirections PHP (header(‘Location’)) pour modifier la destination sans manipuler le HTML côté client.
• Les fichiers .htaccess ou les scripts serveur permettent de gérer les URL sans dépendre du JS.
• Pour les liens internes, utilisez des URL relatives pour faciliter la navigation et le crawl.

Cette approche garantit que tous les utilisateurs, y compris ceux qui désactivent JavaScript, peuvent accéder à vos liens.

Sécurité et éthique du masquage de liens avec JS

N’oubliez pas que cacher un lien peut être perçu comme trompeur. Voici quelques règles d’or :

• Évitez d’utiliser target=”_blank” sans rel=”noopener noreferrer” pour des raisons de sécurité.
• N’utilisez pas ces techniques pour du phishing ou pour rediriger vers des sites malveillants.
• Préférez un bouton <button> pour les actions JS qui ne correspondent pas à une navigation.
• Informez toujours l’utilisateur si un lien s’ouvre dans un nouvel onglet ou fenêtre.

Adopter une approche discrète pour cacher un lien avec JS pour en favoriser un autre

Cacher un lien avec JS pour en favoriser un autre est une technique puissante mais qui doit être utilisée avec discernement. Nous avons vu plusieurs méthodes : manipulation du DOM, utilisation des data-attributes, extension de la zone cliquable ou encore modification de l’affichage au survol. Chaque approche a ses avantages et inconvénients en termes de SEO, d’accessibilité et de sécurité.

Pour rappel, la meilleure approche reste de combiner HTML sémantique, CSS pour le style et JavaScript pour l’interaction, sans jamais tromper l’utilisateur ni Googlebot. Si vous respectez ces principes, cacher un lien avec JS pour en favoriser un autre deviendra un outil précieux dans votre boîte à outils de développeur web.