Explications des valeurs noopener, noreferrer et nofollow

Explications des valeurs noopener, noreferrer et nofollow

paper pencil cartoon  Eric Lamy paper pencil cartoon  13 septembre 2021 paper pencil cartoon  23 septembre 2021 blue eyes  435 paper pencil cartoon  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.

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.

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.


Annonce agerix

Agerix newsletter

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 23 septembre 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é.
 

Eric Lamy
paper pencil cartoon Article rédigé par Eric Lamy
Bio rapide : Directeur de l'agence Agerix, sa formation en Système d'Information et en marketing lui permet d'avoir une approche des projets très commerciale et technique. Il est le garant d'une relation client de type Gagnant-Gagnant. Que ce soit pour nos développements ou pour nos projets d'intégration, son expertise place le projet client au plus haut niveau qualité.

Lire plus d'article sur le blog agerix.fr

À lire également dans cette catégorie


Dans ce monde hautement compétitif, la survie de votre entreprise dépend de la manière dont vous structurez et mettez en œuvre vos stratégies marketing.

Les stratégies marketing pour avoir une entreprise en bonne santé

Dans ce monde hautement compétitif, la survie de votre entreprise dépend de la manière dont vous structurez et mettez en œuvre vos stratégies marketing. Internet regorge de centaines de marques qui se battent littéralement pour attirer plus de clients jour après jour. Il est donc essentiel que vous tiriez parti de stratégies marketing solides pour que votre marque se distingue des autres.


paper pencil cartoon 08 août 2021 paper pencil cartoon 09/01/21 blue eyes 772

Pourquoi et comment le décodage progressif des images accélère le chargement des pages et améliore l'expérience de navigation sur le Web.

Améliorer l'expérience Web grâce au décodage progressif des images

Le décodage progressif des images est un excellent moyen d'accélérer le chargement des pages et donc d'améliorer l'expérience de navigation sur le Web. Ce billet explique pourquoi et détaille les développements récents de cette approche.


paper pencil cartoon 08 août 2021 paper pencil cartoon 08/17/21 blue eyes 697

Core Web Vitals : guide SEO complet pour des temps de chargement plus courts de vos pages

Core Web Vitals : guide complet pour optimiser les temps de chargement des pages

Qu'est-ce que la vitesse d'une page aujourd'hui, comment la mesurer et comment améliorer les scores de vos pages avec les Core Web Vitals ? Voyons cela ensemble..


paper pencil cartoon 08 août 2021 paper pencil cartoon 09/13/21 blue eyes 1020

Viva Connections : ce que votre intranet pourrait être

Viva Connections : ce que votre intranet pourrait être

Avec Microsoft Viva, les entreprises pourraient disposer d'une nouvelle plateforme pour l’expérience de l’employé (EXP) qui rassemble les communications, les connaissances, l'apprentissage, les ressources et les points de vue dans une collection d'applications livrées en équipes. Voici comment Viva Connections pourrait être la passerelle vers un intranet orienté Expérience des Employés.


paper pencil cartoon 02 février 2021 paper pencil cartoon 07/02/21 blue eyes 1359

Comment améliorer facilement votre classement SEO grâce à du contenu visuel

Améliorez facilement votre classement SEO grâce à du contenu visuel

Le contenu visuel est un outil puissant lorsqu'il est exploité et utilisé à son plein potentiel. Améliorez votre classement dans les moteurs de recherche grâce à ce contenu.


paper pencil cartoon 02 février 2021 paper pencil cartoon 09/17/21 blue eyes 218

Quelles sont les tendances du marketing numérique pour 2021 ?

Quelles sont les tendances du marketing numérique pour 2021?

L'industrie du jeu est l'une des plus prospères grâce à ses stratégies de marketing numérique. L'une des raisons de son succès est de rester à la pointe des nouvelles tendances et de s'adapter constamment aux changements. Dans un monde où les produits sont pratiquement indiscernables les uns des autres, nous devons concentrer tous nos efforts pour nous différencier de nos concurrents et dynamiser notre activité en utilisant à notre avantage les derniers développements du marketing numérique, et le casino en ligne est l'un des exemples à suivre. Quelles sont les tendances pour 2021 ?


paper pencil cartoon 01 janvier 2021 paper pencil cartoon 05/23/21 blue eyes 1100

Vous souhaitez créer
votre site web ?

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


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 © 2019 S.A.R.L au capital de 8500 euros. RCS Bordeaux 812 619 062.
A.P.E 6202A N° identification T.V.A FR42812619062