WordPress : rel=noopener, noreferrer : qu’est-ce que c’est ? Quels impacts ? Comment l’enlever ?

Depuis Avril 2017, tous les sites WordPress ayant réalisé la mise à jour 4.7.4 du CMS intègrent automatiquement les attributs noopener et noreferrer dans l’intégralité de leurs liens en target blank ! Voici concrètement ce que cela signifie, quels sont les impacts pour les utilisateurs, les sites maillés et comment il est possible de supprimer / désactiver cet ajout automatique du noopener noreferrer sur tous les liens sortants.

Sommaire :

• 1- WordPress 4.7.4 ajoute désormais automatiquement un rel=noopener, noreferrer à tous les liens en target blank !
• 2- Pourquoi WordPress ajoute désormais automatiquement le noreferrer et le noopener à tous les liens en target blank ?
• 3- Comment vérifier si mes liens en target blank disposent des attributs noopener et noreferrer ?
• 4- Quels impacts ? Pour qui ? Devez-vous modifier quelque chose ?
• 5- Rel=noreferrer, noopener : des impacts SEO à prévoir ?
• 6- Comment supprimer l’ajout automatique du rel=noopener et noreferrer sur WordPress ?

WordPress 4.7.4 ajoute désormais automatiquement un rel=noopener, noreferrer à tous les liens en target blank !

Depuis la version 4.7.4 de WordPress (20 Avril 2017), deux nouveaux attributs rel= »exotiques » sont récemment apparus sur tous les liens créés et configurés en target blank (qui s’ouvrent sur de nouvelles fenêtres) : noopener et noreferrer.

Si l’on a l’habitude de parler du rel=nofollow en SEO, de nombreux autres attributs peuvent être ajoutés à la balise rel=. Les attributs noopener et noreferrer en font partie et voici à quoi ils servent concrètement :

• Rel= »noopener » : un attribut pour mieux sécuriser les liens réalisés en target=blank.
• Rel= »noreferrer » : un attribut complémentaire au premier UNIQUEMENT pour Mozilla Firefox mais aussi et SURTOUT un attribut qui empêche tout site externe maillé d’obtenir l’origine du trafic (le referrer). En résumé, en présence de cet attribut noreferrer, un site A sous WordPress 4.7.4 ou supérieur qui réalise un lien vers un site B équipé d’un outil de suivi des visites ne pourra pas transmettre l’info qu’il est l’origine de ce trafic à l’outil de mesure. Le site B ne pourra donc pas savoir que le site A lui a envoyé N visites, ce qui peut être très problématique dans certains cas : ex : un partenariat :).

Pourquoi WordPress ajoute désormais automatiquement le noreferrer, noopener à tous les liens en target blank ?

Pour faire simple, WordPress se sert d’un éditeur de texte (WYSIWYG, pour les connaisseurs) édité par une société externe : TinyMCE.

Cette entreprise, a décidé de mettre à jour son éditeur de texte en Novembre 2016 pour y ajouter la sécurisation automatique de tous les liens ajoutés en target=blank via l’ajout automatique de ces deux attributs (un développeur avait en effet découvert une faille de sécurité dans ces liens si la balise « noopener » n’était pas ajoutée).

Ainsi, depuis cette mise à jour de TinyMCE, tous les liens créés en target=blank depuis l’éditeur en version 4.5.0 ou supérieure ajoutent automatiquement ces deux attributs rel=noopener et noreferrer.

Depuis quand est-ce en place sur WordPress ?

Qui dit mise à jour de TinyMCE ne signifie pas forcément mise en place directement sur tous les sites WordPress. Les développeurs qui travaillent sur le projet WordPress ont en effet uniquement jugé bon de mettre à jour l’éditeur de texte TinyMCE vers sa version 4.5.0 en Avril 2017 à l’occasion de la mise à jour 4.7.4 de WordPress (vous pouvez consulter la liste complète des changements ici).

Concrètement, cela veut donc dire que TOUT site qui a effectué la mise à jour de WordPress vers sa version 4.7.4 ou supérieure (ex WordPress 4.8) peut constater que TOUS ses liens (internes et externes) en target blank disposent de ces deux attributs noopener et noreferrer.

Comment vérifier si mes liens en target blank disposent des attributs noopener et noreferrer ?

Pour vérifier si votre site est impacté par cette mise à jour de TinyMCE et de WordPress, voici comment procéder :

1. Rendez-vous sur n’importe quelle page (ou article) sur laquelle vous avez ajouté un lien en target= »blank »
2. Sur Chrome, réalisez un clic droit => « Inspecter » sur le lien que vous soupçonnez (ceci ouvrira une console vous permettant d’analyser le code HTML de votre page)
3. Vérifier la balise HTML de ce lien et s’il comporte l’ajout rel= »noopener, noreferrer » ou non à côté de target= »_blank »
4. Si le lien ne comporte pas ces deux attributs, cela signifie que vous n’avez pas à vous en soucier (vous pouvez toutefois demander à vos développeurs de l’ajouter si l’aspect « plus sécurisé » vous intéresse)

Quels impacts ? Pour qui ? Devez-vous modifier quelque chose ?

Comme évoqué précédemment :

• L’ajout de l’attribut noopener est globalement très recommandé sur tous les liens en target= »_blank » pour corriger la faille de sécurité découverte
• L’ajout de l’attribut noreferrer a lui un intérêt beaucoup plus discutable. Il peut vous poser problème à différents niveaux :
  • Les sites que vous maillés ne pourront pas détecter que vous parlez d’eux et que vous êtes une source de trafic intéressante pour eux (c’est dommage et ça peut vous poser problèmes dans de nombreux cas, surtout dans le cas de partenariats par exemple)
  • L’attribut noreferrer est uniquement utile en complément du noopener pour Firefox (même si cela reste un navigateur web très utilisé en France, ce n’est pas Google Chrome et les risques sont déjà plus limités)

En résumé, la plupart des utilisateurs de WordPress n’ont pas intérêt à modifier ceci car c’est une mise à jour plutôt bénéfique au global.

Rel=noreferrer, noopener : des impacts SEO à prévoir ?

Non, rien à voir avec le SEO (les visites générées pour les sites externes passeront en revanche dans leurs « Accès direct », ils ne pourront donc pas évaluer le poids de votre site dans leur trafic référent, ce qui peut être très gênant encore une fois).

Comment supprimer l’ajout automatique du rel=noopener et noreferrer sur WordPress ?

PS : Ne pas mettre de liens en target blank (« ouvrir dans un nouvel onglet ») est la plus simple, fiable et pérenne des solutions ;).

3 solutions existent, mais nous allons dans un premier temps vous présenter la méthode la plus simple.

La première option consiste à télécharger, installer et activer le plugin « Remove noreferrer« . Ce dernier, va automatiquement supprimer, de tous les liens qui s’ouvrent dans un nouvel onglet, la mention « noreferrer » qui était préalablement ajoutée.

La deuxième option consiste simplement rechercher, installer et activer ce plugin dédié : No noopener noreferrer – Don’t add rel= »noopener noreferrer ». Une fois activé, vous n’aurez plus rien à faire si ce n’est vérifier que les liens en target blank n’ajoutent plus les deux attributs.

La troisièeme option, moins pérenne et moins recommandée, consiste à ajouter 2 lignes de code au fichier functions.php de votre Thème WordPress. Voici la procédure à suivre :

• Connectez-vous à votre FTP
• Rendez-vous dans le dossier « wp-content » puis => « themes » puis => « votre-theme« . Une fois le dossier contenant votre thème ouvert, recherchez le fichier functions.php
• Réalisez un backup du fichier avant de modifier quoi que ce soit en le renommant : ex: backup-functions.php
• Une fois le backup réalisé, ouvrez le second fichier dans n’importe quel logiciel permettant d’éditer du PHP (ex: dreamweaver, sumblimetext, notepad ++…)
• Rajoutez ensuite ce code à la fin du fichier functions.php (vous pouvez garder ou supprimer les commentaires, à vous de voir)
• Retournez sur votre FTP et remplacez l’ancien fichier functions.php par celui édité
• Voilà, vous n’avez plus qu’à vérifier les changements en prod 🙂

Voici le code à ajouter dans votre fichier functions.php si vous souhaitez désactiver l’ajout automatique du rel=noopener, noreferrer sur tous les liens en target blank :

// L’utilisation de ce code n’est pas recommandé pour la plupart des sites car il désactive la mise à jour de sécurité concernant les liens en target blank de WordPress et TinyMCE

add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');

function tinymce_allow_unsafe_link_target( $mceInit ) {

$mceInit['allow_unsafe_link_target']=true;

return $mceInit;

}

Vous avez des questions sur ces deux attributs noopener et noreferrer ? N’hésitez pas à les partager dans les commentaires, nous tenterons d’y répondre dans la limite de nos connaissances sur le sujet :).

Vincent Brossas

Fondateur de LEPTIDIGITAL et consultant SEO senior, je suis un grand passionné de marketing digital et de SEO. Avant d’être indépendant à 100 %, j’ai travaillé en tant qu’SEO manager et responsable e-commerce pour différentes sociétés (Altice Media, Infopro Digital, Voyage Privé, Groupe ERAM). (Sur le plan perso, je suis un grand curieux aussi passionné par l’IA, la photographie et les voyages !). PS : Si vous souhaitez me contactez, privilégiez LinkedIn ou l’email. Pour me contacter : [email protected]

www.leptidigital.fr