Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Qu’est-ce que rel= »noopener » dans WordPress ? (Expliqué)

Vous ajoutez un lien à votre contenu WordPress et souhaitez qu’il s’ouvre dans un nouvel onglet. C’est assez simple. Mais avez-vous notifié l’attribut rel="noopener" que WordPress ajoute automatiquement ?

D’après notre expérience, ce petit bout de code joue un rôle crucial dans la sécurité et l’expérience utilisateur de votre site. Mais il n’affecte en rien le référencement.

Cet article explique l’objectif de l’attribut rel="noopener", son impact sur votre site WordPress et pourquoi il est utile de l’avoir à portée de main.

What Is rel="noopener" in WordPress? (Explained)

Qu’est-ce que rel= »noopener » dans WordPress ?

Lorsque vous ajoutez des liens à votre site 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, un interrupteur à bascule vous permet de l’ouvrir dans un nouvel onglet.

Opening a Link in a New Tab

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>

Notez que certains attributs HTML ont été ajoutés au lien : rel="noopener" et rel="noreferrer". Ces attributs ont été ajoutés pour remédier à une faille de sécurité.

Le problème est que le code JavaScript peut être utilisé pour permettre à un nouvel onglet de prendre le contrôle de sa fenêtre de référence. Si vous créez un lien vers un site web externe affecté par le code malveillant, ce site web peut utiliser la propriété window.opener en JavaScript pour modifier la page web d’origine (sur votre site WordPress) afin de voler des informations et de diffuser un code malveillant.

WordPress ajoute l’attribut rel="noopener" pour empêcher le nouvel onglet de tirer parti de cette fonctionnalité JavaScript. De même, l’attribut rel="noreferrer" empêche de transmettre les informations du référent au nouvel onglet.

Comment rel= »noopener » affecte-t-il le référencement de WordPress ?

Ce n’est pas le cas.

Même si 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 le référencement de leur site.

Mais ce n’est qu’un mythe.

Elle n’a aucun impact sur le classement de votre site en matière de référencement ou sur les performances générales de WordPress.

Quelle est la différence entre « noopener » et « nofollow » ?

Il est facile de confondre rel="noopener" et rel="nofollow". Il s’agit pourtant d’attributs totalement distincts.

L’attribut noopener empêche le piratage intersite de votre site et améliore la sécurité de WordPress.

D’autre part, l’attribut nofollow empêche votre site de transmettre le 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 ce site. En revanche, ils ne tiennent pas compte de l’identifié noopener.

Par défaut, WordPress ne vous permet pas d’ajouter un nofollow à vos liens externes. Si vous souhaitez ajouter un nofollow dans WordPress, vous devrez utiliser une extension.

Pour en savoir plus, consultez notre article sur l’ajout de title et nofollow aux liens dans WordPress.

Est-ce que rel= »noreferrer » affecte les liens d’affiliation dans WordPress ?

Le rel="noreferrer" n’affecte pas les liens d’affiliation dans WordPress. Certains utilisateurs/utilisatrices pensent que c’est le cas parce que rel= "noreferrer" empêche les informations du référent de passer dans le nouvel onglet.

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

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

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

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

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

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

En effet, si vous retirez manuellement le lien rel="noopener", l’éditeur de blocs le réintègre automatiquement pour garantir la sécurité de votre site.

Une fois l’éditeur de blocs désactivé, vous devrez ajouter un extrait de code au fichier functions.php de votre thème ou à l’extension WPCode (recommandé). Vous pouvez apprendre à utiliser l’extension gratuite WPCode dans notre guide sur la façon d’ajouter facilement du code personnalisé dans WordPress.

Il suffit de copier le code suivant dans un nouvel extrait de PHP :

add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}
Adding a Code Snippet Using WPCode

Confirmez-vous que la case « Actif » est activée, puis cliquez sur le bouton « Enregistrer l’extrait ».

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

Vous souhaitez avoir encore plus de contrôle sur les attributs rel qui sont ajoutés à vos liens dans WordPress ? Nous vous recommandons d’utiliser l’extension AIOSEO car elle vous permet d’ajouter des attributs title, nofollow et d’autres attributs de liens directement dans l’éditeur de WordPress.

AIOSEO Adds NoFollow and Title Attributes to the Insert Link Popup

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

Nous espérons que cet article vous a aidé à apprendre ce qu’est un rel="noopener" dans WordPress. Vous pouvez également consulter d’autres guides sur l’utilisation des liens dans WordPress :

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

26 commentairesLaisser une réponse

  1. Moinuddin Waheed

    This is very helpful guide for me as I have been teaching html and css to my students and this for have not talked about these two attributes. Most of the teachers only bother to tell target equals blank attribute for opening link in new tabs.
    The best part is that we have all these options at our end in wordpress as well.
    noopener is good for security reasons as it protects from cross site hacking.
    Thanks for this detailed tutorial.

    • WPBeginner Support

      Glad we could share this :)

      Administrateur

  2. Oleg Bibik

    Great info, thanks. I now know the difference between noopener and nofollow.

    • WPBeginner Support

      Glad we could help clear that up :)

      Administrateur

  3. April

    The noopener is also present with the WordPress Classic editor.

    • WPBeginner Support

      True, we cover the block editor as that is the default editor for WordPress.

      Administrateur

  4. Maria

    Is that ok If i am using « noopener & Noreferrer » for interlinking?

    • WPBeginner Support

      You normally shouldn’t add that for internal links but you can if you would like.

      Administrateur

  5. Navneet Kumar

    Can we say rel= »noopener no referrer  » provide dofollow backlink to external website?

    I mean if we receive this attribute then we received dofollow backlinks or nofollow backlinks?

    Thanks in advance

    • WPBeginner Support

      These attributes would not affect if a link is dofollow or nofollow, that would be determined if the link is nofollow or not.

      Administrateur

  6. Nadya

    is it ok to use rel= »noopener noreferrer nofollow » in any position?

    like

    rel= »nofollow noopener noreferrer »
    rel= »noreferrer nofollow noopener »

    • WPBeginner Support

      You shouldn’t need to worry about the order :)

      Administrateur

  7. Ryan

    Thank you for your article.

    I checked my website on web.dev, and I was confused what is noopener and noreferrer.

    After I put it to all of link with target= »_blank », my best practice score went from <80 to 86.

    Thank you.

    • WPBeginner Support

      Glad our guide could help, don’t forget that sites with scores like that are mainly suggestions :)

      Administrateur

  8. Jill

    Hello,

    What about the custom templates used in Wordpress? Should rel= »noopener » be used in the links in the custom posts templates? Especially, internal linking?

    • WPBeginner Support

      You would not need to worry about noopener in the links to the templates for your posts and custom post types.

      Administrateur

  9. Graham

    does this affect Analytics? Yes or no?

    • WPBeginner Support

      noreferrer will prevent Google Analytics from tracking the site that the link came from.

      Administrateur

  10. Lory

    Can we use noopener but remove noreferrer? Its driving me crazy messing up my analytics. Not only can I not see referral traffic, but I also cannot see which posts have done well over time since referral traffic now shows as direct traffic to my home page. If noopener is the important tag, why is noreferrer included with it? There has to be some way around this.

    • WPBeginner Support

      Unless I hear otherwise, we do not have a specific built-in method to set that up but there are plugins available if you are wanting to remove that from your links.

      Administrateur

  11. Zol

    Hye WPbeginner Support, O/

    I don’t use plugin to cloak my affiliate links on my website and I just manually add rel= »nofollow » to affiliate links in html editor.

    My question..is this a good practice for SEO ?
    Should I cloak it?

    Thanks in advanced for your reply.. ;)

    • WPBeginner Support

      Hi Zol,

      It is good practice to cloak URLs. It allows you to better manage links, track your affiliate traffic, and makes your URLs look more understandable by both humans and machines.

      Administrateur

  12. Shyam Mahanta

    My wordpress have ssl certificate (auto ssl from the hosting company) but why the secure lock icon doesn’t appear in the Url? It opens in https but shows connection is not secure. Help is really appreciated.

  13. Seleno

    Hello
    I have affiliate website and since wordpress addded noopener my earnings droped down,

    But i was not sure if it can cause this

    So noopener will never effect the affiliate links ?

    Usualy i’m removing it

    And it will not effect the seo or internal links ?
    Thanks

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.