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 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 anchor 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 une URL/un lien. Par exemple, considérez la ligne de code suivante.

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

Vous pouvez voir qu'un attribut href (href venant de Hypertext REFerence) est utilisé et que la valeur de cet attribut est l'adresse web de la page d'accueil du site Agerix. Ce qui suit est le texte qui s'affiche pour vous en tant qu'utilisateur, pour que vous compreniez qu'il y a un lien et, ce serait l'idéal, que vous sachiez vers quel contenu pointe ce lien. En fonction de votre CSS et de votre navigateur, ce texte peut être souligné, coloré différemment, ou les deux.

La balise d'ancrage peut avoir de nombreux attributs différents, l'un d'eux étant rel (rel venant de RELationship). Le sujet principal de cet article de blog est noopener, noreferrer et nofollow, qui sont tous les trois des valeurs de l'attribut rel.

Considérons à nouveau la ligne de code suivante.

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

Vous pouvez rapidement remarquer trois valeurs de l'attribut rel. Mais maintenant, vous pouvez également voir l'attribut target avec la valeur _blank. Cette partie du code demande au navigateur Web d'ouvrir ce lien dans un nouvel onglet.

C'est la principale raison pour laquelle des valeurs comme noopener et noreferrer sont utilisées. C'est également la cause première des problèmes potentiels de sécurité et de phishing.

Discutons plus en détail de ces valeurs et de leur importance pour le référencement et la sécurité, et voyons quand vous devez ajouter rel, ajouter nofollow et quelle est l'importance d'ajouter rel noopener.

Qu'est-ce que noopener ?

Lorsque vous utilisez la valeur target=" _blank", quelque chose d'intéressant se produit. La page vers laquelle vous établissez un lien obtient l'accès partiel à la page de liaison. Elle le fait par le biais de l'objet window.opener.

Ensuite, la page de liaison peut utiliser window.opener.location pour ouvrir le site Web malveillant.

Cela peut être exploité pour des attaques de phishing. Considérez le scénario suivant.

Vous créez un site web malveillant et y mettez du contenu viral. Vous partagez ensuite ce site Web sur les médias sociaux ou d'autres sources qui ouvrent des liens externes à l'aide de la balise target="_blank". Facebook en est l'exemple type.

L'utilisateur peu méfiant clique sur le lien, et votre page web s'ouvre dans un nouvel onglet. À ce moment-là, votre site web malveillant a maintenant le contrôle de l'onglet précédent ("Facebook"). En utilisant window.opener.location, il navigue vers le nouveau site - par exemple, un formulaire de connexion émulant l'écran de connexion de Facebook avec un message : "Votre précédente session Facebook a expiré. Veuillez vous reconnecter pour continuer à utiliser Facebook".

L'utilisateur est alors incité à saisir ses informations de connexion et devient victime d'une attaque de phishing.

Il ne s'agit que d'un cas hypothétique puisque Facebook utilise therel="noopener" sur ses liens target=" _blank". Mais vous avez compris.

Qu'est-ce que noreferrer ?

Similaire dans sa fonction à noopener, noreferrer empêche également le site nouvellement ouvert de manipuler l'objet window.opener. Mais, en outre, noreferrer empêche le navigateur, lorsque vous naviguez vers une autre page, d'envoyer l'adresse de la page Web de référence.

En d'autres termes, la valeur noreferrer permet de masquer les informations relatives au référent lorsque le lien est cliqué. Par exemple, si quelqu'un publie votre lien sur sa page Web et utilise la valeur noreferrer, et que des utilisateurs cliquent sur ce lien, vous ne serez pas en mesure de dire d'où viennent ces utilisateurs. Dans votre logiciel d'analyse (par exemple, Google Analytics), cela apparaîtra comme du trafic direct, et non comme un renvoi.

Encore une fois, le terme "noreferrer" n'a aucun effet sur le référencement, mais il peut fausser les chiffres dans votre logiciel d'analyse et de suivi en signalant un trafic plus direct.

Il y a aussi quelques considérations concernant le marketing d'affiliation et le noreferrer, mais elles sortent du cadre de cet article. En général, les liens d'affiliation et les programmes d'affiliation utilisent maintenant des approches et des techniques qui ne dépendent pas de la valeur de noreferrer.

Alors, quand devez-vous utiliser noreferrer et quand noopener ? Je vous suggère d'envisager d'utiliser les deux. La majorité des navigateurs modernes supportent noopener, mais dans certains cas, si noopener n'est pas supporté, vous pouvez utiliser noreferrer.

Cela signifie que, dans la pratique, il est logique d'utiliser les deux pour prendre en charge les navigateurs plus anciens également. Mais la meilleure approche consiste à éviter complètement l'utilisation de target="_blank". Sauf si vous avez une excellente raison de l'utiliser.

Découvrez les bonnes et mauvaises raisons d'utiliser la valeur _blank en lisant l'article de Chris Coyer : When to use target=”_blank”

Qu'est-ce que le nofollow ?

En matière d'optimisation des moteurs de recherche, il est essentiel d'obtenir de nombreux liens de valeur et de qualité vers votre page. Ces liens sont appelés backlinks. Mais tous les liens ne sont pas égaux.

En général, lorsqu'une page renvoie à la vôtre, elle lui transmet son jus de lien, c'est-à-dire qu'elle donne plus de crédibilité à votre site et signale aux moteurs de recherche qu'ils l'apprécient. En substance, vous pouvez considérer cela comme une approbation. Si une page Web de haute autorité établit un lien vers vous, elle vous soutient, et Google/Bing en tiendra compte comme facteur de classement. Google utilise le terme PageRank pour mesurer la quantité et la qualité des liens.

Cependant, il arrive que vous ne souhaitiez pas transmettre le jus des liens. C'est le cas, par exemple, lorsque vous créez des liens internes à vos pages. Vous ne souhaitez pas transmettre le jus des liens des pages les plus importantes à celles qui ne le sont pas.

C'est là qu'intervient rel="nofollow". Tout comme ses cousins noopener noreferrer, nofollow est une valeur de l'attribut rel. Lorsque vous ajoutez cette valeur, elle signale aux moteurs de recherche que vous ne souhaitez pas transmettre votre jus de lien/pageRank à la page vers laquelle vous établissez un lien.

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

Dans la ligne de code ci-dessus, nous avons mis les trois valeurs - en ajoutant la valeur nofollow, nous signalons à Google que le PageRank/le jus de lien n'est pas transmis au site agerix.fr.

Quelques mots sur la terminologie - noopener noreferrer nofollow

Vous remarquerez parfois que les gens mentionnent la balise noopener ou noreferrer. Dans d'autres cas, vous pouvez repérer l'attribut rel noreferrer. Bien que ces éléments soient compréhensibles par la plupart des développeurs Web, il convient de noter ce qui suit.

• noopener, noreferrer et nofollow ne sont pas des balises ou des attributs. Ce sont des valeurs d'attributs.
• rel n'est pas une balise. C'est un attribut de la balise anchor.
• <a> est une balise HTML. En tant que telle, elle possède des attributs (i.e., rel), et ces attributs ont des valeurs (noopener noreferrer nofollow).

Conclusion

Il existe trois valeurs fondamentales de l'attribut rel de la balise anchor. Il s'agit de noreferrer, noopener et nofollow.

• rel="noopener" que vous utilisez sur tous les liens s'ouvrant dans de nouveaux onglets en utilisant la cible _blank. Il y a des implications en matière de sécurité si vous n'utilisez pas la valeur noopener sur vos liens s'ouvrant dans de nouveaux onglets. Un attaquant malveillant peut utiliser l'objet window.opener pour modifier le contenu et l'emplacement de la page d'origine.
• rel="noreferrer" peut servir un objectif similaire à celui du noopener, en particulier dans les anciens navigateurs. Il est donc logique de les utiliser tous les deux. En outre, noreferrer peut affecter vos analyses et signaler le trafic comme direct au lieu de référentiel.
• rel="nofollow" informe les moteurs de recherche de ne pas transmettre le jus du lien à la page liée et ne transmet pas le PageRank. Vous pouvez la considérer comme une valeur utilisée lorsque vous souhaitez créer un lien vers une autre page, mais sans la "cautionner". C'est la seule valeur de lien de cette liste qui a un effet tangible sur les efforts de référencement.

Article mis à jour le 20 octobre 2021