Rel noopener : comment utiliser cet attribut de lien

L’attribut rel="noopener" est bien plus qu’un simple ajout technique à vos liens. Il joue un rôle crucial dans la sécurité en protégeant votre site contre les attaques tout en offrant des avantages indirects en matière de performances et d’expérience utilisateur. La sécurité et le SEO étant étroitement liés, appliquer correctement cet attribut est essentiel pour tout propriétaire de site soucieux de fournir un environnement sûr et optimisé à ses visiteurs.

Qu’est-ce que rel=noopener ?

L’attribut rel="noopener" intégré à une balise <a> empêche une nouvelle page ouverte en target="_blank" d’accéder et de manipuler la page d’origine via JavaScript. Il protège ainsi contre les attaques de tabnabbing, où des scripts malveillants redirigent la page initiale vers un contenu trompeur.

Pourquoi utiliser rel=noopener ?

L’attribut rel="noopener" est utilisé pour optimiser les performances des navigateurs en exécutant l’ouverture d’une nouvelle page dans un processus distinct. De plus, il est utilisé dans les liens HTML pour renforcer la sécurité en empêchant les pages liées d’accéder à la page d’origine. Il offre alors une meilleure protection contre des attaques externes.

Les risques de ne pas utiliser rel=noopener

Ne pas utiliser rel="noopener" avec des liens s’ouvrant dans une nouvelle fenêtre expose à des risques. Le principal est le tabnabbing, où une page malveillante redirige la page d’origine vers un site trompeur, exploitant l’objet window.opener. Cela peut conduire à des attaques de phishing. De plus, l’absence de cet attribut peut impacter les performances du navigateur et, dans des cas rares, compromettre la sécurité des données de la page d’origine.

Comment intégrer rel=noopener dans vos liens

Ajout manuel de l’attribut

Pour ajouter manuellement l’attribut rel="noopener", vous devez directement le placer dans la balise HTML <a> de votre lien. Voici comment faire :

Localisez votre lien : trouvez la balise <a> qui contient le lien que vous souhaitez modifier.

<a href="https://www.creermalin.fr" target="_blank">Visiter le site Créer Malin</a>

Ajoutez l’attribut rel : intégrez l’attribut rel="noopener" à la balise <a>.

<a href="https://www.creermalin.fr/" target="_blank" rel="noopener">Visiter le site Créer Malin</a>

Vous avez maintenant ajouté l’attribut rel="noopener" à votre lien. Veillez à le faire pour tous les liens qui utilisent target="_blank" pour renforcer la sécurité de votre site web.

Utilisation de plugins ou d’outils pour l’ajout automatique

Selon que vous utilisiez un système de gestion de contenu (CMS) ou d’autres technologies, il existe des plugins et outils qui peuvent vous aider à ajouter automatiquement l’attribut rel="noopener" à vos liens. Voici quelques-uns des plus populaires :

WordPress

WP External Links : ce plugin gère tous les liens externes de votre site. Il ajoute automatiquement rel="noopener" ainsi que d’autres attributs en fonction de vos choix.
Scriptless Social Sharing : bien qu’étant principalement un plugin de partage social, il ajoute aussi rel="noopener" aux liens.
Autoptimize : c’est un plugin d’optimisation qui, parmi ses nombreuses fonctionnalités, peut ajouter rel="noopener" aux liens.

Joomla

External Links : ce plugin permet de gérer les liens externes en ajoutant automatiquement des attributs comme rel="noopener".

Drupal

External Links : tout comme son homologue pour Joomla, ce module ajoute des icônes aux liens externes et peut également ajouter rel="noopener".

Outils en ligne

Checkbot : c’est une extension de navigateur qui vérifie les meilleures pratiques SEO en temes de vitesse et de sécurité des sites web. Elle vous alerte si des liens n’ont pas l’attribut rel="noopener".

Extensions de navigateur

Noopener : cette extension pour Chrome ajoute automatiquement rel="noopener" aux liens avec l’attribut HTML target="_blank".

Lorsque vous choisissez un plugin ou un outil, vérifiez sa compatibilité avec la technologie employée sur votre site ainsi que la fréquence de ses mises à jour. En effet, ce sont elles qui garantiront aussi la sécurité de votre site en corrigeant les failles dès qu’elles sont connues.

Les avantages SEO de l’utilisation de rel=noopener

Amélioration de la sécurité du site

Si un site est compromis ou présente des vulnérabilités, cela peut avoir des conséquences négatives sur son référencement. Les moteurs de recherche, en particulier Google, accordent une grande importance à la sécurité des utilisateurs. Alors, si un site est identifié comme étant malveillant ou compromis, il peut être pénalisé dans les résultats de recherche.

L’attribut rel="noopener" protège contre les attaques de type tabnabbing. Sans cet attribut, si vous ouvrez un lien externe avec target="_blank", la nouvelle page a accès à la page d’origine via l’objet window.opener en JavaScript. Une page malveillante pourrait ainsi rediriger la page d’origine vers un contenu trompeur ou malveillant sans que l’utilisateur s’en rende compte. Cela pourrait conduire à des attaques de phishing, où les utilisateurs sont trompés pour fournir des informations sensibles.

En utilisant rel="noopener", vous empêchez cette vulnérabilité potentielle, renforçant ainsi la sécurité de votre site. Et, bien que l’ajout de rel="noopener" soit une mesure de sécurité plutôt qu’une optimisation SEO directe, la fiabilité globale d’un site est intrinsèquement liée à sa réputation et à sa performance dans les moteurs de recherche.

Optimisation des performances du site

L’attribut rel="noopener" offre également des avantages indirects en matière de performances. Dans certains navigateurs, l’utilisation de cet attribut avec target="_blank" permet d’ouvrir le lien dans un processus de navigation distinct, évitant ainsi que la nouvelle page, si elle est gourmande en ressources, n’affecte la performance de la page d’origine.

Une meilleure performance conduit à une amélioration de l’expérience utilisateur, ce qui peut réduire le taux de rebond et augmenter l’engagement des visiteurs. Ces signaux positifs peuvent être bénéfiques pour le SEO, car les moteurs de recherche valorisent les sites qui offrent une expérience rapide et fluide aux utilisateurs.

Meilleures pratiques d’utilisation de rel=noopener

L’attribut rel="noopener" est essentiel pour renforcer la sécurité et améliorer les performances de navigation. Voici les meilleures pratiques d’utilisation de cet attribut, en distinguant les liens vers des sites externes de ceux qui s’ouvrent dans une nouvelle fenêtre ou un nouvel onglet.

Liens vers des sites externes

L’attribut rel="noopener" est un outil majeur pour garantir la sécurité et les performances des sites web. Pour les liens pointant vers des sites externes, il est judicieux d’adopter rel="noopener" même si le lien ne s’ouvre pas dans un nouvel onglet, assurant ainsi une protection continue. Si vous souhaitez éviter de transmettre du « jus SEO » à un site externe, combinez rel="noopener" avec rel="nofollow".

Liens ouvrant dans une nouvelle fenêtre ou un nouvel onglet

Lorsque vous créez des liens s’ouvrant dans une nouvelle fenêtre ou un nouvel onglet (via target="_blank"), l’ajout de rel="noopener" est impératif pour se prémunir des attaques de tabnabbing. Si d’autres valeurs rel sont utilisées, comme noreferrer, elles peuvent être combinées avec noopener. Une vérification régulière des liens de votre site est recommandée pour s’assurer de la présence constante de cet attribut essentiel.