Ce que rel=noopener, noreferrer et nofollow font réellement

La version courte

L’attribut rel d’un lien décrit la relation entre la page actuelle et la page liée. Cela semble abstrait, mais trois valeurs reviennent constamment dans le travail web quotidien :

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Ces trois jetons sont souvent collés ensemble comme s’ils faisaient une seule chose. Ce n’est pas le cas.

• noopener est un contrôle de sécurité du navigateur.
• noreferrer est un contrôle de confidentialité et d’analytics.
• nofollow est un signal pour les moteurs de recherche.

Ils peuvent être combinés, mais vous devez savoir pourquoi chacun est présent. Ajouter les trois à chaque lien sortant n’est pas toujours une erreur, mais c’est généralement paresseux.

rel=noopener empêche le tabnabbing inversé

rel="noopener" indique au navigateur de ne pas donner à la page nouvellement ouverte l’accès à la page d’origine via window.opener.

C’est surtout important lorsque vous ouvrez un lien dans un nouvel onglet ou une nouvelle fenêtre avec target="_blank" :

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Sans noopener, la page de destination peut être en mesure d’exécuter du JavaScript comme ceci :

window.opener.location = 'https://phishing.example';

Cette attaque est généralement appelée tabnabbing inversé. L’utilisateur clique sur un lien légitime, arrive sur un autre site, et l’onglet d’origine est discrètement redirigé vers une fausse page de connexion ou une autre destination malveillante.

Les navigateurs modernes se sont améliorés sur ce point. Dans le comportement actuel des navigateurs, target="_blank" est généralement traité comme si rel="noopener" était présent. C’est une bonne chose, mais cela ne rend pas l’attribut explicite inutile. noopener explicite reste utile parce que :

• il documente votre intention ;
• il protège les environnements de navigation plus anciens ou inhabituels ;
• il évite de dépendre du fait que chaque vue web intégrée se comporte comme un navigateur de bureau moderne ;
• il facilite la revue de code.

Pour les liens externes qui s’ouvrent dans un nouvel onglet, rel="noopener" est une valeur par défaut sensée.

noopener affecte-t-il le SEO ?

Non, pas de manière significative. noopener concerne le comportement du navigateur. Il n’indique pas aux moteurs de recherche si vous recommandez une page, si l’équité de lien doit être transmise, ou si le lien est payé.

Si votre politique SEO traite noopener comme une directive de classement, cette politique doit être corrigée.

rel=noreferrer masque la page référente

rel="noreferrer" indique au navigateur de ne pas envoyer l’en-tête HTTP Referer lorsque l’utilisateur suit le lien.

Oui, l’en-tête est historiquement mal orthographié sous la forme Referer. L’attribut s’écrit noreferrer.

Normalement, lorsqu’un utilisateur clique sur un lien de votre page vers un autre site, la destination peut recevoir une valeur de référent indiquant d’où vient la visite. Selon la Referrer-Policy de votre site, il peut s’agir de l’URL complète, seulement de l’origine, ou de rien du tout.

Par exemple, une destination peut voir :

Referer: https://www.example.com/pricing?plan=enterprise

ou seulement :

Referer: https://www.example.com/

Avec rel="noreferrer", le navigateur ne devrait pas envoyer cet en-tête pour cette navigation.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

En pratique, noreferrer se comporte aussi comme noopener dans les navigateurs modernes. Si vous utilisez noreferrer, vous n’avez généralement pas besoin de noopener pour la sécurité sur ce même lien. Beaucoup d’équipes écrivent encore les deux par clarté :

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

C’est acceptable. C’est redondant, mais lisible.

Quand noreferrer est utile

Utilisez noreferrer lorsque l’URL de la page actuelle ne doit pas être exposée à la destination.

Exemples courants :

• liens depuis des tableaux de bord privés ;
• liens depuis des environnements de prévisualisation non publiés ;
• liens depuis des URL contenant des paramètres de requête sensibles ;
• liens dans des outils d’administration, des files de modération, des écrans CRM ou des systèmes de support client ;
• liens pour lesquels la destination ne doit pas connaître la page source exacte.

Ce dernier point ne concerne pas toujours le secret. Il s’agit parfois de minimisation des données. Si la destination n’a pas besoin de connaître l’URL référente, ne l’envoyez pas.

Cela s’inscrit dans l’évolution générale d’une conception web attentive à la confidentialité. Les navigateurs, les utilisateurs et les régulateurs ont tous évolué vers l’envoi par défaut de moins de données ambiantes. Si vous revisitez ce sujet, notre article sur ce qui a changé pour les cookies en 2026 et quoi faire à ce sujet couvre le même mouvement général : moins de suivi invisible, davantage de flux de données délibérés.

Le compromis côté analytics

noreferrer peut casser l’attribution pour le site vers lequel vous créez un lien. Ses analytics peuvent classer la visite comme trafic direct plutôt que comme trafic de référence.

Ce n’est pas votre problème principal, mais cela peut compter dans les partenariats, les relations d’affiliation, les parcours client et les écosystèmes internes entre domaines. Si votre équipe marketing s’attend à ce que des sites partenaires voient du trafic de référence depuis votre domaine, un noreferrer généralisé peut créer de la confusion.

Pour de nombreux liens éditoriaux ordinaires, la meilleure approche consiste à définir un en-tête Referrer-Policy à l’échelle du site plutôt qu’à ajouter noreferrer partout. Par exemple :

Referrer-Policy: strict-origin-when-cross-origin

Cette politique envoie l’URL complète pour la navigation de même origine, envoie seulement l’origine vers les destinations inter-origines sécurisées, et n’envoie aucun référent lors d’un passage de HTTPS à HTTP. C’est une valeur par défaut pratique pour beaucoup de sites.

Si vous devez inspecter le comportement des en-têtes en production, une vérification HTTP brute est souvent plus claire que des suppositions à partir de tableaux de bord analytics. Le flux de travail présenté dans une petite boîte à outils pour déboguer les redirections et les en-têtes HTTP en production s’applique directement au débogage de referrer-policy.

rel=nofollow est destiné aux moteurs de recherche, pas aux navigateurs

rel="nofollow" indique aux moteurs de recherche que vous ne voulez pas impliquer une recommandation de la page liée.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

À l’origine, nofollow a été introduit pour lutter contre le spam dans les commentaires. L’idée était simple : si les liens dans les commentaires ne transmettaient pas de crédit de classement, les spammeurs auraient moins d’incitation à inonder les blogs et les forums.

Aujourd’hui, Google traite nofollow comme un indice plutôt que comme une directive absolue. Cette distinction est importante. Elle signifie que les moteurs de recherche peuvent utiliser le lien pour la découverte ou les systèmes de classement dans certains contextes, mais que vous signalez clairement que le lien ne doit pas être traité comme une recommandation éditoriale normale.

Quand utiliser nofollow

Utilisez nofollow lorsque vous créez un lien mais ne voulez pas vous porter garant de la destination.

Exemples raisonnables :

• liens générés par des utilisateurs non fiables ;
• liens dans des commentaires publics ou des profils ;
• liens vers des sites mentionnés comme exemples de mauvais comportement ;
• liens inclus comme référence, mais non comme recommandation ;
• liens dans des zones où la modération est limitée.

Pour les liens payés ou sponsorisés, préférez rel="sponsored". Pour le contenu généré par les utilisateurs, préférez rel="ugc". Vous pouvez combiner les valeurs si nécessaire :

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

Si vous exploitez des formulaires publics, des commentaires, des annuaires ou des pages de profil, les attributs de lien ne sont qu’une partie du problème d’abus. Le spam commence généralement plus tôt dans le flux de soumission. Nous avons une analyse séparée de pourquoi votre formulaire de contact est votre plus grande faiblesse face au spam, et la même leçon s’applique ici : n’attendez pas de nofollow qu’il compense une modération faible.

Ce que nofollow ne fait pas

nofollow n’empêche pas les utilisateurs de cliquer sur le lien. Il ne bloque pas l’envoi d’un référent par le navigateur. Il ne masque pas la destination à l’affichage. Il ne sécurise pas target="_blank".

Il ne garantit pas non plus qu’une URL ne sera jamais explorée. Si les moteurs de recherche trouvent l’URL ailleurs, ils peuvent toujours l’explorer. Si vous devez empêcher l’indexation, utilisez les contrôles robots appropriés sur la page de destination, comme noindex, et non un attribut nofollow sur le lien de quelqu’un d’autre.

Combinaisons courantes

Lien externe s’ouvrant dans un nouvel onglet

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

C’est la base. Elle traite le problème de sécurité créé par l’ouverture d’un nouveau contexte de navigation.

Si vous ne voulez pas non plus envoyer de données de référent :

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Placement payé

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

Vous pouvez ajouter noopener s’il s’ouvre dans un nouvel onglet :

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

N’utilisez pas nofollow comme substitut vague à la divulgation de liens payés. Les moteurs de recherche disposent maintenant d’une valeur plus spécifique pour cela : sponsored.

Lien généré par un utilisateur

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

Cela indique aux moteurs de recherche que le lien a été fourni par un utilisateur et ne doit pas être traité comme un vote éditorial normal.

Liens internes

La plupart des liens internes n’ont besoin d’aucune de ces valeurs.

N’ajoutez pas nofollow aux liens internes comme tactique courante de sculpture. Cela crée généralement plus de confusion que de bénéfices. Si une page ne doit pas être indexée, traitez cela directement. Si une page ne doit pas être explorée, réfléchissez soigneusement aux règles robots, à l’authentification, à la canonicalisation et à l’architecture du site.

Pour les liens internes qui s’ouvrent dans un nouvel onglet, noopener reste inoffensif et peut être approprié. Mais la meilleure question est de savoir pourquoi le lien interne doit ouvrir un nouvel onglet tout court.

Une politique pratique pour les équipes

Un style maison simple évite la plupart des erreurs :

1. Ajoutez rel="noopener" aux liens avec target="_blank", en particulier les liens externes.
2. Ajoutez noreferrer seulement lorsque masquer l’URL source est intentionnel.
3. Ajoutez nofollow seulement lorsque vous ne recommandez pas la destination.
4. Utilisez sponsored pour les liens payés et ugc pour les liens soumis par des utilisateurs.
5. N’utilisez pas les attributs de lien comme substitut au contrôle d’accès, à la modération ou aux règles d’indexation.

L’essentiel est l’intention. Chaque jeton dans rel doit répondre à une question précise :

• Sécurité : la nouvelle page doit-elle être isolée de l’ouvreur ?
• Confidentialité : la destination doit-elle recevoir des informations de référent ?
• SEO : recommandons-nous ce lien comme référence éditoriale ?

Si personne dans l’équipe ne peut répondre à ces questions, l’attribut relève probablement du HTML cargo cult.

Comment tester ce qui se passe

Pour noopener, ouvrez le lien et vérifiez si la destination peut accéder à window.opener. Dans une page de test contrôlée, window.opener doit être null lorsque noopener est actif.

Pour noreferrer, inspectez la requête réseau du côté de la destination ou utilisez un journal de requêtes dans un environnement de test. Les outils de développement du navigateur peuvent afficher les en-têtes de requête sortants, mais les journaux côté serveur sont souvent plus fiables.

Pour nofollow, le test est moins immédiat parce qu’il s’agit d’une interprétation par les moteurs de recherche, pas d’un comportement du navigateur. Votre meilleure vérification est l’inspection du code source : confirmez que le HTML rendu contient la valeur rel attendue. Si votre framework frontend réécrit les liens, inspectez le DOM final, pas seulement le template.

L’essentiel

Ces attributs sont petits, mais ils se situent à l’intersection de la sécurité, de la confidentialité et du SEO. Les traiter comme interchangeables crée de mauvaises habitudes.

Utilisez généreusement noopener avec les liens ouvrant un nouvel onglet. Utilisez noreferrer délibérément lorsque la confidentialité du référent compte. Utilisez nofollow lorsque vous faites une déclaration destinée aux moteurs de recherche concernant la recommandation. Et lorsqu’un lien est payé ou généré par un utilisateur, utilisez les valeurs modernes plus spécifiques : sponsored et ugc.

C’est suffisant pour la plupart des sites. L’objectif n’est pas de décorer chaque lien. L’objectif est que chaque lien dise au navigateur et aux moteurs de recherche exactement ce qu’ils doivent savoir.