Pourquoi ajouter rel=noopener à vos liens externes peut renforcer la sécurité de votre site web ?
Qu’est-ce que rel= »noopener »?
Quand vous cliquez sur un lien externe, votre navigateur ouvre une nouvelle fenêtre ou un nouvel onglet. L’attribut rel= »noopener » intervient ici. Il indique au navigateur de ne pas utiliser la même ‘processus’ pour la page nouvellement ouverte. Sans entrer dans les termes trop techniques, cela signifie que la nouvelle page ne pourra pas accéder à votre page d’origine via l’objet ‘window.opener’. Cela peut sembler anodin, mais son absence peut poser des risques sérieux de sécurité.
La question de la sécurité
- Protection contre les détournements : Sans le noreferrer, des scripts malveillants pourraient prendre le contrôle de la page d’origine.
- Amélioration de la performance : En créant une séparation nette entre les pages, votre site peut se charger plus rapidement, sans impact des scripts d’autres sites.
Le SEO et rel= »noopener »
Dans quelle mesure rel= »noopener » affecte-t-il le référencement? Rassurez-vous, son utilisation est transparente pour les moteurs de recherche. Les liens sont toujours suivis et aucune pénalité n’est appliquée pour son usage. Mais il apporte une nuance importante : l’amélioration indirecte de l’expérience utilisateur, élément que Google prend de plus en plus en compte dans son algorithme de classement.
L’expérience utilisateur et la performance
L’attribut noopener contribue à une expérience utilisateur sécurisée et fluide. En effet, rien n’est plus désagréable qu’un lien qui entraîne des problèmes de sécurité ou des performances médiocres lors de la navigation. En optimisant les performances, rel= »noopener » joue donc en faveur de votre SEO.
Comment utiliser rel= »noopener »
L’implémentation de l’attribut rel= »noopener » est simple et directe. Elle se fait directement dans la balise d’ancrage de votre lien HTML :
Visitez Exemple.com
Cette pratique est devenue un standard de sécurité recommandé, notamment par des plateformes influentes telles que WordPress qui l’ajoute automatiquement dans leur éditeur.
Rel= »noopener » face à rel= »noreferrer »
Une confusion courante survient entre les attributs « noopener » et « noreferrer ». Si le premier protège contre les abus de l’objet window.opener, le second masque le referer HTTP – l’adresse de la page précédente – lors du passage à une nouvelle page. Le choix entre les deux dépend de vos objectifs de sécurité et de suivi des données.
La compatibilité des navigateurs
Heureusement, la plupart des navigateurs modernes supportent l’attribut rel= »noopener ». Sur le plan de la compatibilité, vous ne rencontrerez des problèmes qu’avec de très anciennes versions de navigateurs. Cependant, il est toujours conseillé de vérifier la compatibilité si votre audience utilise des navigateurs peu répandus.
Le tableau de la compatibilité
Navigateur | Compatibilité |
---|---|
Chrome | Oui |
Firefox | Oui |
Safari | Oui |
Edge | Oui |
Internet Explorer (versions anciennes) | Non |