Qu'est-ce que rel=”noopener” dans WordPress ? (Expliqué)

Nous avons eu un client dont les visiteurs du site étaient redirigés vers des sites web douteux après avoir cliqué sur des liens externes. Le problème était un petit bout de code manquant qui créait une faille de sécurité majeure.

C'est une pensée effrayante, mais cette vulnérabilité peut affecter n'importe quel site WordPress. Un jargon technique comme rel="noopener" peut sembler déroutant, vous laissant inquiet quant à la sécurité réelle de votre site web pour vos visiteurs.

Chez WPBeginner, nous avons sécurisé des milliers de sites et appris que ces petits détails font une énorme différence. Nous allons expliquer ce qu'est rel="noopener" en termes simples et pourquoi c'est si important.

Examinons comment cet petit attribut vous protège, vous et vos utilisateurs.

Qu'est-ce que rel=”noopener” dans WordPress ?

Lorsque vous ajoutez des liens à votre site web WordPress, vous pouvez utiliser des attributs HTML pour contrôler ce qui se passe lorsque vous cliquez sur le lien.

Par exemple, lorsque vous créez un lien, il y a un interrupteur qui vous permet de l'ouvrir dans un nouvel onglet.

Le code HTML généré par WordPress pour ce lien ressemble à ceci :

<a href="http://example.com" target="_blank" rel="noreferrer noopener">external link</a>

Remarquez que certains attributs HTML ont été ajoutés au lien : rel="noopener" et rel="noreferrer". Ces attributs sont ajoutés pour résoudre une vulnérabilité de sécurité.

Lorsque vous utilisez target="_blank" pour qu'un lien s'ouvre dans un nouvel onglet, il se passe quelque chose d'inattendu par défaut en arrière-plan. Le nouvel onglet établit en fait une sorte de connexion avec l'onglet d'origine sur lequel vous étiez.

Cette connexion est établie par un élément des navigateurs web appelé window.opener. La page dans le nouvel onglet peut accéder et même contrôler certaines propriétés de l'onglet d'origine, comme modifier l'adresse de la page (window.opener.location).

Cela crée une vulnérabilité de sécurité.

Imaginez que vous cliquez sur un lien sur un site web de confiance, et qu'il ouvre une page malveillante dans un nouvel onglet. En raison de cette connexion window.opener, cette page malveillante pourrait potentiellement transformer la page de confiance d'origine que vous étiez en train de consulter en une fausse page de connexion (une escroquerie par hameçonnage), vous trompant lorsque vous revenez à l'onglet d'origine.

L'attribut de lien noopener est conçu pour prévenir ce risque de sécurité spécifique.

Lorsque vous ajoutez rel="noopener" à un lien qui s'ouvre dans un nouvel onglet, vous indiquez au navigateur de ne pas créer cette connexion window.opener entre les deux onglets. Cela protège vos utilisateurs contre les escroqueries et les tentatives de hameçonnage.

Comment rel=”noopener” affecte-t-il votre SEO WordPress ?

Il n'affecte pas.

Bien que l'attribut rel="noopener" améliore la sécurité de votre site WordPress, certains utilisateurs évitent de l'utiliser car ils pensent qu'il aura un impact sur leur SEO WordPress.

Mais ce n'est qu'un mythe.

Il n'a aucun impact sur les classements SEO de votre site ni sur vos performances WordPress globales.

Quelle est la différence entre “noopener” et “nofollow” ?

Il est facile de confondre rel="noopener" avec rel="nofollow". Cependant, ce sont des attributs complètement distincts.

L'attribut noopener empêche votre site Web d'être piraté inter-sites et améliore la sécurité de WordPress.

D'autre part, l'attribut nofollow empêche votre site Web de transmettre du jus de lien SEO au site Web lié.

Les moteurs de recherche recherchent et prennent en compte l'attribut nofollow lorsqu'ils suivent un lien sur votre site Web. Cependant, ils ne tiennent aucun compte de la balise noopener.

L'attribut nofollow indique aux moteurs de recherche de ne pas transmettre d'autorité SEO au site web vers lequel vous faites un lien. Bien que l'éditeur de blocs WordPress dispose d'un interrupteur intégré pour ajouter nofollow à un lien, un plugin est souvent nécessaire pour un contrôle plus avancé.

Par exemple, vous pourriez vouloir appliquer automatiquement la balise nofollow à tous les liens externes de votre site, c'est là qu'un plugin SEO devient essentiel.

Pour en savoir plus, consultez notre article sur la façon d'ajouter un titre et nofollow aux liens dans WordPress.

Le rel= »noreferrer » affecte-t-il les liens d’affiliation dans WordPress ?

Le rel="noreferrer" n’affecte pas les liens d’affiliation dans WordPress. Certains utilisateurs pensent que c’est le cas car rel="noreferrer" empêche le passage des informations de référent vers le nouvel onglet.

Cependant, la plupart des programmes d’affiliation vous fournissent une URL unique contenant votre identifiant d’affilié. Cela signifie que votre identifiant d’affilié est transmis sous forme de paramètre d’URL pour que l’autre site web puisse le suivre.

Deuxièmement, la plupart des spécialistes du marketing d’affiliation utilisent un plugin de masquage de liens pour leurs liens d’affiliation.

Avec le masquage de liens, le lien d’affiliation sur lequel vos utilisateurs cliquent est en réalité l’URL de votre propre site web, qui redirige ensuite les utilisateurs vers l’URL de destination.

Comment désactiver rel= »noopener » dans WordPress ?

Il n’est pas nécessaire de supprimer rel="noopener" des liens sur votre site web. C’est bon pour la sécurité de votre site web et cela n’a aucun impact sur les performances ou le référencement de votre site web.

Cependant, si vous devez le supprimer, vous devrez désactiver l’éditeur de blocs Gutenberg dans WordPress et utiliser l’éditeur classique.

C’est parce que si vous supprimez rel="noopener" du lien manuellement, l’éditeur de blocs l’ajoutera automatiquement pour assurer la sécurité de votre site web.

Une fois l'éditeur de blocs désactivé, vous devrez ajouter un extrait de code au fichier functions.php de votre thème ou au plugin WPCode (recommandé). Vous pouvez apprendre à utiliser le plugin WPCode gratuit dans notre guide sur comment ajouter facilement du code personnalisé dans WordPress.

Copiez simplement le code suivant dans un nouvel extrait PHP :

add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

Assurez-vous d'activer le bouton bascule « Actif », puis cliquez sur le bouton « Enregistrer l'extrait ».

Cela empêchera WordPress d'ajouter rel="noopener" aux nouveaux liens. Vous devrez également modifier manuellement les anciens liens pour supprimer l'attribut.

Pour encore plus de contrôle sur les attributs de vos liens, nous recommandons d'utiliser le plugin All in One SEO (AIOSEO). AIOSEO vous permet d'ajouter facilement des attributs comme nofollow ou sponsored directement dans l'éditeur WordPress, vous aidant à gérer vos liens externes pour les meilleures pratiques SEO.

Questions fréquemment posées sur rel=”noopener”

Voici les réponses à certaines des questions les plus courantes que nous recevons concernant l'attribut « noopener » dans WordPress.

1. Quel est le but principal de l'utilisation de rel=”noopener” ?

L'objectif principal de rel="noopener" est la sécurité. Il empêche un nouvel onglet de pouvoir contrôler l'onglet d'origine qui l'a ouvert, ce qui protège vos visiteurs contre les escroqueries de phishing malveillantes.

2. Est-ce que rel=”noopener” est bon pour le SEO ?

L'attribut rel="noopener" n'a aucun impact direct, positif ou négatif, sur le SEO de votre site web. Sa fonction est purement de sécurité, et les moteurs de recherche ne l'utilisent pas comme facteur de classement.

3. Dois-je supprimer rel=”noopener” de mes liens ?

Non, il n'y a aucune bonne raison de supprimer rel="noopener". Il offre un avantage de sécurité important sans effets secondaires négatifs sur le SEO ou les performances du site, il est donc préférable de le laisser en place.

4. WordPress ajoute-t-il rel=”noopener” automatiquement ?

Oui, WordPress ajoute automatiquement rel="noopener" aux liens configurés pour s'ouvrir dans un nouvel onglet. Cette fonctionnalité de sécurité importante a été introduite pour la première fois dans WordPress 4.7.4 et fait partie intégrante de l'éditeur de blocs moderne.

Guides d'experts sur l'utilisation des liens dans WordPress

Nous espérons que cet article vous a aidé à en savoir plus sur rel="noopener" dans WordPress. Vous voudrez peut-être aussi consulter d'autres guides sur l'utilisation des liens dans WordPress :

• Guide pour débutants sur la façon d'ajouter un lien dans WordPress
• Comment ouvrir les liens externes dans une nouvelle fenêtre ou un nouvel onglet avec WordPress
• Comment ajouter des liens Nofollow dans WordPress (Guide simple pour débutants)
• Comment ajouter un titre et Nofollow à la fenêtre contextuelle Insérer un lien dans WordPress
• Comment ajouter Nofollow à tous les liens externes dans WordPress
• Comment suivre les clics sur les liens et les clics sur les boutons dans WordPress (méthode facile)
• Comment suivre les liens sortants dans WordPress
• Comment changer la couleur des liens dans WordPress (Guide pour débutants)
• Liens internes pour le SEO : Le guide ultime des meilleures pratiques
• Comment précharger les liens dans WordPress pour des temps de chargement plus rapides
• Comment trouver et corriger les liens brisés dans WordPress (étape par étape)
• Meilleurs plugins de liens internes pour WordPress (automatique + manuel)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.