Explications des valeurs noopener, noreferrer et nofollow

Si vous êtes impliqué dans le développement web ou l'optimisation des moteurs de recherche (SEO), il y a de fortes chances que vous soyez tombé sur les termes noopener, noreferrer et nofollow. Qu'est-ce que noopener noreferrer ? Qu'en est-il du nofollow ? Dans cet article, nous vous expliquons tous ces termes, les dernières évolutions qui les concernent, et leurs implications sur le référencement et la sécurité web.

Tout savoir sur les valeurs noopener, noreferrer et nofollow

Petit rappel HTML

Les trois termes (noopener, noreferrer et nofollow) sont des valeurs de l'attribut rel de la balise <a> en HTML. On peut dire que le terme nofollow est le plus connu des développeurs web et des experts en référencement.

La balise d'ancrage <a> est couramment utilisée en HTML pour définir un lien. Par exemple :

<a href="https://www.agerix.fr">
  Cliquez ici pour visiter le site agerix.fr.
</a>

L'attribut href (Hypertext REFerence) contient l'adresse de la page cible. Ce qui suit est le texte cliquable visible à l'écran. Ce texte peut être souligné ou coloré selon votre CSS.

La balise peut comporter d'autres attributs, comme rel (pour "relationship"). Le sujet de cet article porte sur trois valeurs spécifiques de rel : noopener, noreferrer et nofollow.

Considérons l'exemple suivant :

<a href="https://www.agerix.fr"
   rel="noopener noreferrer nofollow"
   target="_blank">Cliquez ici pour voir le site de l'agence Agerix.
</a>

Ce lien s'ouvre dans un nouvel onglet (target="_blank") et utilise les trois valeurs de rel. Nous allons voir à quoi elles servent et pourquoi elles sont importantes aujourd'hui.

Qu'est-ce que noopener ?

Quand vous utilisez target="_blank", la page cible peut, par défaut, accéder à la page d’origine via window.opener. Ce comportement peut être détourné à des fins malveillantes, comme dans des attaques de type phishing (*reverse tabnabbing*).

Exemple : un site piégé ouvert depuis un lien _blank peut rediriger votre page Facebook encore ouverte vers une fausse page de connexion, dans le but de récupérer vos identifiants.

C'est là qu'intervient rel="noopener" : il indique au navigateur de ne pas transmettre l'objet window.opener. Cela empêche tout contrôle entre les pages ouvertes.

Qu'est-ce que noreferrer ?

Similaire à noopener, noreferrer empêche aussi l'accès à window.opener, mais en plus, il empêche l'envoi du référent HTTP à la page cible. Autrement dit, la page ouverte ne saura pas d'où vient l’utilisateur (son logiciel d’analyse verra du "trafic direct").

En termes de sécurité, noreferrer englobe déjà le comportement de noopener. C’est pourquoi on les utilise souvent ensemble (rel="noopener noreferrer"), notamment pour garantir la compatibilité maximale.

Attention avec l'affiliation : certains systèmes d'affiliation utilisent encore le référent HTTP pour valider les commissions. Dans ces cas-là, évitez d'utiliser noreferrer sur ces liens spécifiques, sauf si une autre méthode de suivi est utilisée.

SEO : aucune incidence sur le classement. Seules les statistiques d'origine du trafic peuvent être faussées.

Qu'est-ce que le nofollow ?

rel="nofollow" indique aux moteurs de recherche que vous ne souhaitez pas transmettre votre réputation (PageRank) au lien ciblé. Cela évite de "cautionner" un site externe.

Il est souvent utilisé dans les commentaires, les forums ou pour les liens sponsorisés. C'est aussi une exigence de Google pour les liens publicitaires.

<a href="https://www.agerix.fr"
   rel="noopener noreferrer nofollow"
   target="_blank">Cliquez ici pour voir le site de l'agence Agerix.
</a>

Quelques mots sur la terminologie

Ces éléments ne sont pas des balises HTML, mais des valeurs de l’attribut rel. Voici quelques rappels utiles :

• rel est un attribut de la balise <a>.
• noopener, noreferrer, nofollow, sponsored et ugc sont des valeurs de cet attribut.
• Le terme "dofollow" est souvent utilisé pour désigner un lien sans valeur rel spécifique. Il n'existe pas de rel="dofollow".

Conclusion

Voici les grandes lignes à retenir sur les valeurs de l’attribut rel :

• rel="noopener" empêche la page liée d’accéder à window.opener. Aujourd’hui, la plupart des navigateurs appliquent ce comportement automatiquement.
• rel="noreferrer" masque l’origine du trafic et empêche aussi l’accès à window.opener. Attention à son impact sur les liens d’affiliation.
• rel="nofollow" empêche le transfert de PageRank. C’est la seule valeur ici à effet SEO direct.
• rel="sponsored" précise qu’un lien est sponsorisé ou publicitaire.
• rel="ugc" signale un lien inséré par un utilisateur (commentaire, forum...).

Utilisez ces valeurs avec discernement. Elles renforcent la sécurité de vos visiteurs et la qualité de votre SEO, tout en clarifiant la nature des liens pour les moteurs de recherche.