• Blog
  • Explications des valeurs noopener, noreferrer et nofollow
Explications des valeurs noopener, noreferrer et nofollow
Explications des valeurs noopener, noreferrer et nofollow

Publié le : 13 septembre 2021 - Mis à jour le : 8 avril 2022 - Lu 2369 fois - Temps de lecture : 6 minutes


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.

banniere cwv

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.

Plus de détails

L'utilisation du noopener indique effectivement au navigateur d'ouvrir un lien dans un nouvel onglet sans fournir l'accès contextuel à la page web qui a ouvert le lien. Pour ce faire, il ne définit pas la propriété window.opener et renvoie donc une valeur nulle. Demande au navigateur d'ouvrir le lien sans accorder au nouveau contexte de navigation l'accès au document qui l'a ouvert - en ne définissant pas la propriété window.opener sur la fenêtre ouverte (Ilrenvoie une valeur nulle).

En tant que tels, l'attribut et la valeur rel="noopener" n'affectent en rien l'optimisation des moteurs de recherche (SEO). Ils ne sont pas liés au référencement. Mais il doit être utilisé dans les cas où vous avez affaire à des liens dont la cible est vide.

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.

banniere cwv

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.

Quand faut-il utiliser nofollow ?

La règle générale est d'utiliser nofollow sur les liens dans les commentaires ou sur les forums. Le contenu généré par les utilisateurs peut être une source de spam et de liens de mauvaise qualité. Vous ne voulez pas que votre blog ou un site de forum transmette sa valeur à ces pages de mauvaise qualité.

De plus, Google et d'autres moteurs de recherche exigent que vous utilisiez nofollow sur tous les liens sponsorisés et les publicités. Il en va de même pour les liens dans les communiqués de presse et les différents types de liens payants.

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

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 

Découvrez
notre dossier complet
sur les Core Web Vitals

Découvrez le dossier complet de notre agence sur les Core Web Vitals

Eric Lamy
Bio rapide : Après avoir passé plus de 20 ans dans le marketing et l'optimisation de Système d'Information, j'ai créé l'agence Agerix en 2009 afin d'avoir une approche des projets tout aussi commerciale que technique. Fouiller, creuser, réfléchir et amener le projet au plus haut niveau qualité, c'est le Leitmotiv de notre bureau d'études et l'ADN que nous insufflons chaque jour dans nos projets. Que ce soit pour nos développements, nos projets d'intégration, ou même l'article que vous venez de lire, notre but est de livrer le meilleur.

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 

Suivez les lives sur agerix.fr

Nous vous donnons rendez-vous avec les directs de l'agence Agerix.
Pour ne pas rater d'infos et participer aux débats d'idées, inscrivez-vous maintenant sur notre liste de diffusion.

Genre


Agerix : Agence digitale Gauloise
4 rue Jean Moulin 33310 Lormont, France , Tel:+33 5 35 54 92 03 , Fax:+33 9 72 14 74 74 , E-mail: contact(at)agerix.fr
Confidentiel Agence Agerix ©2021 S.A.R.L au capital de 8500 euros. RCS Bordeaux 812 619 062.
A.P.E 6202A N° identification T.V.A FR42812619062