Avez-vous déjà navigué sur un site web, cliqué sur un lien, et réalisé que vous aviez quitté la page d'origine ? Cette situation frustrante est un problème courant. Une solution est d'utiliser l'attribut target en HTML. Comprendre comment gérer les liens externes est essentiel pour une expérience utilisateur fluide et agréable, préservant l'engagement des visiteurs. Ne pas le faire correctement peut augmenter le taux de rebond.
L'attribut target est un outil puissant qui, utilisé judicieusement, peut améliorer l'interaction des utilisateurs avec votre site web. Il permet de contrôler le comportement des liens, en particulier des liens externes, décidant s'ils doivent s'ouvrir dans le même onglet, un nouvel onglet, ou une autre fenêtre. Nous allons explorer en détail l'attribut target et son importance, en mettant l'accent sur les meilleures pratiques pour une navigation intuitive et une expérience utilisateur optimisée. Découvrez comment garder vos visiteurs engagés et les encourager à revenir.
Comprendre l'attribut target
L'attribut target en HTML spécifie où un lien hypertexte doit être ouvert. Il est utilisé dans la balise <a> (anchor tag) pour contrôler le comportement du navigateur au clic. Il indique si le lien s'ouvre dans l'onglet ou la fenêtre courant, ou dans un nouvel onglet ou une nouvelle fenêtre. Maîtriser cet élément est fondamental pour un développeur web soucieux de l'expérience utilisateur.
Valeurs possibles de l'attribut target
-
_self: C'est la valeur par défaut. Le lien s'ouvre dans le même onglet ou la même fenêtre. C'est le comportement standard des liens HTML, utilisé pour les liens internes. Il est inutile de spécifiertarget="_self"car c'est le comportement par défaut.
Exemple :<a href="https://www.example.com">Lien vers Example.com</a> -
_blank: Cette valeur ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre. C'est la valeur la plus couramment utilisée pour les liens externes, gardant le site web original ouvert pendant que l'utilisateur consulte le nouveau site. Cela améliore l'expérience utilisateur en permettant aux visiteurs de revenir facilement à votre contenu.
Exemple :<a href="https://www.example.com" target="_blank">Lien vers Example.com (nouvel onglet)</a> -
_parent: Ouvre le lien dans le frame parent. Cette valeur est utilisée dans les framesets, moins courants aujourd'hui. Si la page actuelle est un frame, le lien s'ouvrira dans le frame qui contient le frame actuel. Dans une structure sans frames,_parentse comporte comme_self.
Exemple (dans un contexte de frames) :<a href="https://www.example.com" target="_parent">Lien vers Example.com (frame parent)</a> -
_top: Ouvre le lien dans le document entier, supprimant tous les frames. Comme_parent, cette valeur est pertinente pour les framesets. Elle permet de "sortir" d'une structure de frames et d'afficher le lien dans la fenêtre entière.
Exemple (dans un contexte de frames) :<a href="https://www.example.com" target="_top">Lien vers Example.com (document entier)</a>
Cibler des noms de frame spécifiques
En plus des valeurs prédéfinies, vous pouvez cibler un frame spécifique en utilisant son nom. Cette fonctionnalité est moins utilisée aujourd'hui en raison du déclin des framesets, mais elle peut être utile dans certains contextes. Pour ce faire, attribuez un nom à votre frame avec l'attribut name , puis utilisez ce nom comme valeur de l'attribut target .
Par exemple, avec deux frames :
<frameset cols="25%,75%">
<frame src="menu.html" name="menuframe">
<frame src="main.html" name="mainframe">
</frameset> Pour ouvrir un lien dans le frame nommé "mainframe" :
<a href="https://www.example.com" target="mainframe">Ouvrir dans le frame principal</a> L'importance d'ouvrir les liens externes dans un nouvel Onglet/Fenêtre ( target="_blank" )
Ouvrir les liens externes dans un nouvel onglet ou une nouvelle fenêtre à l'aide de target="_blank" est essentiel pour améliorer l'expérience utilisateur et optimiser votre site web. Cette modification a un impact significatif sur l'engagement des visiteurs, le taux de rebond et le référencement (SEO). Comprendre les avantages est crucial.
Avantages pour l'utilisateur
- Maintien du Contexte : L'utilisateur ne quitte pas votre site web au clic sur un lien externe. Votre site reste ouvert, lui permettant de revenir facilement à votre contenu. Cela évite la frustration de perdre sa place.
- Navigation Plus Fluide : L'ouverture dans un nouvel onglet permet de consulter plusieurs sites web simultanément sans interrompre la navigation sur votre site. Ils peuvent facilement passer d'un site à l'autre, rendant l'expérience plus agréable.
- Réduction du Taux de Rebond : Empêcher les utilisateurs de quitter votre site réduit le taux de rebond, un indicateur clé. Un taux de rebond plus faible indique que les visiteurs trouvent votre contenu pertinent.
Meilleures pratiques SEO
- Lien
rel=""et ajoutezrel=" "pour sécurité et performance. - Éviter le "Link Juice Leaking" : Le "link juice" désigne la valeur de référencement transmise via un lien. En utilisant
rel=""etrel=" ", vous contrôlez mieux cette valeur.
Considérations d'accessibilité
- Avertissement Visuel : Signalez visuellement qu'un lien s'ouvrira dans une nouvelle fenêtre. Ajoutez une icône à côté du lien ou un texte comme "(s'ouvre dans une nouvelle fenêtre)". Cela aide les utilisateurs à anticiper et à éviter les surprises.
- Attributs ARIA : Améliorez l'accessibilité avec les attributs ARIA. Par exemple, utilisez
aria-labelpour une description plus détaillée du lien.
Exemple :<a href="https://www.example.com" target="_blank" rel=" " aria-label="Lien vers Example.com (s'ouvre dans une nouvelle fenêtre)">Example.com</a>
L'attributaria-labelpeut être associé à la balise ` ` pour expliciter la destination du lien pour les utilisateurs malvoyants utilisant un lecteur d'écran. Un autre attribut pertinent dans ce cas est `aria-roledescription`, qui permet de préciser le rôle du lien, par exemple, "lien externe". Combiner ces attributs contribue à une navigation plus inclusive.
Sécurité et performance : rel=" "
L'utilisation de target="_blank" peut introduire des risques de sécurité si elle n'est pas combinée avec rel=" " . Comprendre ces risques et comment les atténuer est crucial pour protéger vos utilisateurs et votre site web. Ces attributs améliorent la sécurité et la performance.
Le problème de sécurité window.opener
Quand un lien est ouvert avec target="_blank" sans rel="" , la nouvelle page a accès à l'objet window.opener de la page d'origine. Le site web ouvert peut manipuler la page d'origine, par exemple en la redirigeant vers une page malveillante.
Voici un exemple de code JavaScript illustrant cette vulnérabilité :
<script>
window.opener.location = 'https://evil.example.com';
</script> Ce code, inclus sur le site ouvert, redirigerait la page d'origine vers evil.example.com .
Fonctionnement de rel=""
L'attribut rel="" empêche la nouvelle page d'accéder à window.opener , éliminant la manipulation de la page d'origine. Il est fortement recommandé de l'ajouter à tous les liens utilisant target="_blank" , créant un environnement de navigation plus sûr.
Fonctionnement de rel=""
L'attribut rel="" a deux effets. Il a le même effet que rel="" , empêchant l'accès à window.opener . Ensuite, il empêche le navigateur d'envoyer l'information de référence (referrer) au site cible, protégeant la vie privée des utilisateurs.
Compatibilité navigateur et polyfills
L'attribut rel="" est largement supporté. Pour la compatibilité avec les anciens navigateurs, utilisez un polyfill JavaScript. Ces polyfills ajoutent des fonctionnalités manquantes, assurant une expérience cohérente.
Un exemple de polyfill simple pourrait ressembler à ceci :
<script>
if (typeof document.createElement('a').relList === 'undefined') {
var links = document.querySelectorAll('a[rel*=""]');
for (var i = 0; i < links.length; i++) {
links[i].rel = links[i].rel.replace('', '');
}
}
</script> Ce code vérifie si le navigateur supporte l'attribut `relList` (qui indique la liste des valeurs de l'attribut `rel`). Si ce n'est pas le cas (navigateur ancien), il supprime la valeur "" de l'attribut `rel` pour éviter des comportements inattendus. Cette approche garantit que même les anciens navigateurs fonctionneront correctement, bien que sans la protection de sécurité offerte par ``.
Impact sur la performance
L'utilisation de rel="" peut améliorer la performance. Empêcher le site cible d'accéder à window.opener réduit le travail du navigateur, accélérant le chargement de la page. C'est une meilleure gestion des ressources.
Design et expérience utilisateur
L'aspect visuel des liens externes et la présentation aux utilisateurs jouent un rôle crucial. Un design soigné et une signalisation claire améliorent la navigation, réduisant la confusion et renforçant la confiance.
Signaler visuellement les liens externes
- Icônes : Utilisez des icônes (flèche sortante ou fenêtre). Trouvez des icônes gratuites sur Font Awesome ou Material Icons.
Exemple :<a href="https://www.example.com" target="_blank" rel=" ">Example.com <i class="fas fa-external-link-alt"></i></a> - Texte : Ajoutez une mention textuelle discrète comme "(s'ouvre dans une nouvelle fenêtre)". Utile pour les utilisateurs de technologies d'assistance.
Exemple :<a href="https://www.example.com" target="_blank" rel=" ">Example.com (s'ouvre dans une nouvelle fenêtre)</a> - CSS : Stylisez les liens externes de manière cohérente avec CSS. Modifiez la couleur du lien, ajoutez une bordure ou modifiez le curseur.
Comparaison des options pour signaler les liens externes :
| Méthode | Avantages | Inconvénients | Meilleur Usage |
|---|---|---|---|
| Icône | Visuellement clair, facile à reconnaître | Nécessite une bibliothèque d'icônes | Liens dans le corps du texte |
| Texte | Accessible, facile à implémenter | Peut être redondant avec l'icône | Liens dans les menus ou les barres latérales |
| CSS | Personnalisable, cohérent | Nécessite des connaissances en CSS | Stylisation globale des liens |
Consistance
Appliquez la même convention à tous les liens externes. Cela crée une expérience utilisateur cohérente, renforçant la confiance.
Exceptions
Dans certains cas, il peut être préférable d'ouvrir les liens dans le même onglet. Les liens internes devraient s'ouvrir dans le même onglet. De même pour les formulaires devant être soumis dans le même contexte. Analysez chaque type de lien.
Tests utilisateurs
Validez que votre approche améliore l'expérience utilisateur en réalisant des tests utilisateurs. Observez l'interaction avec les liens externes et recueillez des commentaires. Les tests peuvent révéler des problèmes non identifiés.
Alternatives à target="_blank" (et pourquoi elles ne sont pas recommandées)
Bien que target="_blank" soit la méthode la plus courante, il existe des alternatives basées sur JavaScript. Ces alternatives présentent des inconvénients et sont généralement déconseillées. Il est important de comprendre pourquoi target="_blank" est préférable.
Javascript (façons de l'éviter)
Il est possible d'ouvrir un lien avec JavaScript ( window.open() ). Cependant, ces méthodes ont des inconvénients :
- Dépendance JavaScript : Si JavaScript est désactivé, ces méthodes ne fonctionnent pas.
- Problèmes d'Accessibilité : L'utilisation de JavaScript peut créer des problèmes d'accessibilité.
- Difficulté de Maintenance : Modifier le comportement d'un lien via JavaScript ajoute de la complexité au code.
Pourquoi ces alternatives sont généralement déconseillées
Les alternatives JavaScript sont déconseillées à cause de problèmes de maintenabilité, de performance et d'accessibilité. L'utilisation de target="_blank" combinée à rel=" " offre une solution simple, efficace et compatible. Utiliser JavaScript est souvent de l'over-engineering.
| Méthode | Avantages | Inconvénients |
|---|---|---|
target="_blank" rel=" " | Simple, compatible, sûr, accessible | Aucun inconvénient majeur |
JavaScript ( window.open() ) | Flexibilité | Dépendance JavaScript, problèmes d'accessibilité, maintenabilité |
Bien gérer les liens externes, un atout pour vos visiteurs
En conclusion, l'utilisation correcte de l'attribut target et de l'attribut rel=" " est essentielle pour une expérience utilisateur optimale, améliorant la sécurité de votre site web et préservant son référencement (SEO). Ouvrir les liens externes dans un nouvel onglet et utiliser les attributs de sécurité maintient l'engagement des visiteurs.
Mettez en pratique ces conseils et partagez-les ! Ensemble, créons un web plus sûr, accessible et agréable. Quelle est votre stratégie pour gérer les liens externes ?