Faire un lien hypertexte : bien utiliser target et rel (noopener, noreferrer, nofollow)



Aujourd’hui, nous allons parler des liens que vous faites sur votre site, entre vos propres contenus, vers des contenus que vous trouvez intéressants, vers des sites marchands… Pour faire un lien hypertexte, on peut spécifier différents types de paramètres, notamment :

  • Une cible (la « target ») : elle correspond à la façon dont le lien va s’ouvrir (dans un nouvel onglet, dans le même onglet, etc).
  • Une relation (« rel ») : elle correspond au lien entre votre page et la page vers laquelle vous faites un lien. On peut en citer de nombreuses : nofollow, noreferrer, noopener, etc.

A quoi servent ces attributs ? Quel impact ont-ils en SEO et dans d’autres domaines ? C’est parti pour une plongée dans le (fabuleux) monde des liens !

Faire un lien hypertexte avec target et rel
Faire un lien hypertexte avec target et rel

Un lien, c’est quoi ?

Le lien est une dimension fondamentale d’Internet. On peut même considérer qu’il définit Internet. Vous pensez que j’exagère ? Regardez tout simplement les adresses de sites que vous tapez tous les jours dans votre navigateur : elles commencent généralement par « http »(s).

http pour « HyperText Transfer Protocol » (« protocole de transfert hypertexte »). Et l’hypertexte, c’est justement un texte contenant des liens vers d’autres textes.

Faire un lien hypertexte est donc ce qui permet de passer d’un site à l’autre… et ce principe est vrai aussi bien pour les visiteurs que pour les robots des moteurs de recherche, et même les robots de spam.

Anatomie d’un lien a href

Un lien ordinaire se présente comme ceci dans le code :

<a href="https://www.notuxedo.com">Mon blog</a>

On identifie :

  • Un attribut href, dont la valeur est entre guillemets : c’est l’adresse de la page vers laquelle vous faites un lien.
  • Une ancre : c’est le texte visible qui va s’afficher sur la page et sur lequel l’internaute pourra cliquer pour accéder au lien. Dans mon exemple, le texte est « Mon blog ».

Mais le lien peut aussi être enrichi, comme ceci par exemple :

<a href="https://www.notuxedo.com" target="_blank" rel="author">Mon blog</a>

La partie « target » correspond à la façon dont le lien va s’ouvrir… et la partie « rel » spécifie la relation entre l’article sur lequel nous sommes et la page vers laquelle je crée un lien.

Quelques mots sur la balise « link »

Notez qu’il existe aussi une balise « link ». Elle permet de spécifier un lien entre une page et une autre ressource, mais n’est pas utilisée pour faire un lien hypertexte visible sur la page en tant que tel.

Par exemple, vous allez trouver ce type d’écriture sur le site d’Amazon, pour indiquer le lien vers une feuille de style :

<link rel="stylesheet" href="https://images-eu.ssl-images-amazon.com/images/I/41ieo4B5GCL.css?AUIClients/AmazonGatewayAuiAssets#224544-T1" />

Target=_blank et autres cibles de liens

Target=_self, le comportement par défaut

Par défaut, un lien s’ouvre dans la même fenêtre, à la place de la page que vous étiez en train de consulter. La cible du lien est donc la même fenêtre ou le même onglet.

On peut changer ce comportement par défaut à l’échelle de toute une page web, en ajoutant une ligne de code dans le « head » du site pour dire par exemple que l’on souhaite que les liens s’ouvrent toujours dans un nouvel onglet (je ne vous le conseille pas !) :

<base href="https://www.monsite.com" target="_blank">

Si, ensuite, vous voulez faire une exception et faire en sorte qu’un lien s’ouvre dans la même fenêtre, il faudra « forcer ce comportement » en utilisant target="_self" dans le lien.

Dans la quasi-totalité des cas, cet attribut est inutilisé : on ne précise rien si on veut que le lien s’ouvre dans le même onglet, car c’est le comportement habituel d’un lien.

Target= »_blank » : ouvrir un lien dans une nouvelle fenêtre

Target="_blank" est beaucoup plus utilisé, notamment pour les liens externes (qui mènent à d’autres sites que le vôtre). Et ce pour une raison simple : vous acceptez que l’utilisateur aille consulter un autre contenu à partir du vôtre… mais en même temps, vous avez envie de le garder sur votre site. Le target="_blank" le permet justement.

Ca a longtemps été une façon de faire répandue sur le web : ouvrir les liens internes dans la même fenêtre, les liens externes dans une autre fenêtre. Une habitude si ancrée que l’on croit parfois qu’il s’agit d’une convention… et j’avoue moi-même fonctionner souvent comme ça.

Cette approche est de plus en plus contestée car aujourd’hui, on tend à considérer que les internautes sont suffisamment matures et à l’aise avec le web pour décider eux-mêmes de la manière dont ils ouvrent un lien.

Laisser l'internaute décider de la façon dont il ouvre un lien
Laisser l’internaute décider de la façon dont il ouvre un lien

La seule exception sur laquelle les gens sont assez unanimes concerne les situations où l’expérience utilisateur risque d’être perturbée par le fait de fermer la page en cours :

  • Vous proposez un lien pour apporter un complément d’informations à un point spécifique d’un article, de la documentation… mais l’utilisateur n’a pas terminé sa lecture.
  • L’utilisateur est en train d’effectuer une action sur une page (compléter un formulaire par exemple) et charger une autre page à la place risque de lui faire perdre son travail en cours.
  • L’utilisateur est, par exemple, en train d’écouter un son (morceau, podcast) ou de regarder une vidéo sur une page web… et la présence de liens s’ouvrant dans la même fenêtre pourrait interrompre son expérience d’écoute ou de visionnage.

Dans ce genre de cas, l’utilisation de target="_blank" est recommandée pour faire un lien hypertexte optimal.

Notez enfin que l’attribut target="_blank" n’a pas d’impact SEO en l’état actuel des connaissances.

Target=_parent et target=_top, les délaissés !

"_parent" et "_top" sont deux autres cibles de liens possibles… qui sont quelque peu tombées en désuétude ! C’est un « truc de vieux » du web ;)

A une époque, on construisait des sites en définissant des zones précises dessus, les frames. Par exemple, vous aviez une zone centrale pour le contenu du site, une zone latérale pour la sidebar, etc.

Mettre un lien en target="_top" permettait qu’il s’ouvre en pleine page et pas juste dans la zone où il se trouvait. Et mettre un lien en target="_parent" le faisait s’ouvrir dans la frame parente.

Vous pouvez voir un exemple de target=_top ici et un exemple de target=_parent ici.

Les relations des liens : noopener, noreferrer, nofollow

Parlons à présent d’un autre volet des liens : les relations.

Quand vous décidez de faire un lien hypertexte vers une autre page, vous pouvez spécifier la relation entre votre site et cette autre page, à travers l’attribut « rel ». Il peut prendre différentes valeurs. Certaines sont interprétées par les moteurs de recherche, d’autres permettent simplement de donner du sens et du contexte à un lien.

Dans cet article, nous allons parler des plus répandues pour faire un lien hypertexte optimal.

Rel « nofollow »

Par défaut sur le web, les robots qui se promènent sur les sites suivent les liens (suivre, qui se dit « follow » en anglais). Google, par exemple, se sert des liens entre les pages pour explorer un site, puis visiter d’autres sites. Il tient aussi compte des liens pour essayer d’évaluer si un site est populaire et réputé ou non.

En effet, on peut supposer que si une page est citée par de nombreux sites, dans un contexte pertinent, et que ces sites jouissent eux-mêmes d’une certaine notoriété, alors cela signifie que la page présente de l’intérêt…

Cependant, il y a des cas où l’on souhaite interdire à un moteur de recherche de suivre les liens. On spécifie dans ce cas rel="nofollow" sur le lien. Ca n’empêche pas le moteur d’accéder à la page (il peut la trouver par le biais d’autres liens, ou par le biais du sitemap du site s’il répertorie la page en question), mais c’est au moins un signe qu’il ne doit pas perdre de temps à aller explorer ce lien.

J’ai écrit un article plus complet sur la façon de mettre un lien en nofollow.

Retenez qu’on le fait généralement :

  • Quand un lien n’est pas « naturel », qu’il y a une dimension commerciale derrière : par exemple, un lien effectué contre rémunération, un lien affilié, un lien ayant fait l’objet d’un partenariat, etc.
  • Quand il y a un risque de spam : par exemple, sur les blogs, les liens figurant dans les commentaires sont la plupart du temps en nofollow car ils échappent au contrôle du propriétaire du site, ne sont pas toujours pertinents par rapport à la thématique de l’article, etc.

Notez que depuis mars 2020, Google ne respecte plus systématiquement la directive nofollow, et peut décider de suivre un lien malgré tout s’il estime en avoir besoin dans le cadre de l’indexation du site ou pour déterminer le positionnement d’une page. Il faut donc le percevoir comme un « indice » qu’on lui transmet mais pas comme une règle absolue à laquelle le moteur obéira au doigt et à l’oeil.

Rel « ugc » et rel « sponsored »

Avant septembre 2019, il n’existait qu’une seule manière de signaler à Google un lien « artificiel », ayant fait l’objet d’une rémunération ou d’une affiliation, ou un lien « non contrôlé » par le propriétaire du site : le nofollow. En septembre 2019, Google a annoncé la création de deux nouveaux attributs pour marquer plus précisément ces liens : rel="ugc" et rel="sponsored".

rel="ugc" correspond aux liens créés par les utilisateurs (liens dans les commentaires, sur les forums, etc)… et rel="sponsored" aux liens affiliés ou sponsorisés.

Google recommande d’utiliser ces attributs plus précis soit à la place, soit en complément du nofollow (si vous listez plusieurs attributs, séparez-les par un espace ou une virgule).

<a href="https://www.monliensponso.com" rel="sponsored nofollow">Mon lien sponso</a>

Google indique également que le nofollow ne devient pas obsolète à ce stade, il est simplement moins précis que ces nouveaux attributs (et Google récolte donc moins d’informations sur votre site !). Il peut encore être utilisé pour les situations qui ne rentrent pas dans le cadre d’ugc ou de sponsored, lorsque vous estimez que vous n’avez pas à envoyer le moteur de recherche vers le site dont vous parlez.

En termes de SEO, un lien « sponsored » a fait l’objet d’une rémunération donc ne sera pas pris en compte par Google dans le calcul de la popularité d’une page. Pour le lien « ugc », le comportement est vraisemblablement similaire au nofollow (on envoie le signal qu’il ne faut pas suivre le lien… mais Google reste maître de ses choix !).

Vous pouvez en savoir plus sur ces attributs sponsored et ugc sur les pages d’aide de Google.

Rel « noopener » et rel « noreferrer »

Ces deux attributs sont « devenus célèbres » brutalement en 2017, quand le géant du web WordPress a décidé de les ajouter automatiquement aux liens externes qui s’ouvraient dans une nouvelle fenêtre.

Mais à quoi servent-ils donc ? Ils remplissent en réalité un rôle de sécurité informatique contre une forme de piratage.

Pour comprendre leur utilité, il faut savoir qu’avec le langage informatique JavaScript (et plus spécifiquement la propriété window.opener), on peut « prendre le contrôle » de la fenêtre web qui a créé la fenêtre actuelle. Qu’est-ce que ça signifie ?

Imaginons que vous fassiez un lien vers le site Tartempion.com, en target="_blank". Le lien s’ouvre donc dans une nouvelle fenêtre à l’initiative de votre site. Imaginons maintenant que Tartempion.com se soit fait pirater. Le pirate peut alors utiliser window.opener pour prendre le contrôle de la page qui a créé la fenêtre : la vôtre !

Cette forme de piratage peut par exemple être utilisée pour diffuser du spam mais aussi pour faire des tentatives de phishing.

En ajoutant noopener et noreferrer à un lien, vous empêchez la propriété window.opener de fonctionner, sur les navigateurs récents comme sur les plus anciens… et vous protégez votre site. Le lien se présentera comme ceci :

<a href="https://www.unsiteexterne.com" rel="noopener noreferrer" target="_blank">Lien vers un site externe</a>

Notez que ces attributs n’ont pas d’impact sur le référencement naturel. Vous pouvez en savoir plus sur leur mode de fonctionnement ici.

Rel « prev » et rel « next »

Ces attributs permettent de spécifier la pagination sur les contenus longs divisés en plusieurs pages. On marque à l’aide de cet attribut le lien vers la page suivante (« next ») ou vers la page précédente (« prev »).

Avant, Google avait besoin de ces attributs pour comprendre qu’il s’agissait du même contenu, segmenté sur plusieurs pages pour des raisons de lisibilité. Aujourd’hui, le moteur de recherche utilise toujours ces attributs dans le cadre de l’exploration d’un site mais n’en a plus besoin pour interpréter qu’il s’agit d’un contenu paginé.

Notez que rel="prev" et rel="next" sont aussi utilisés avec la balise « link », pas seulement avec la balise « a href ».

D’autres types de relations sur les liens

Faire un lien hypertexte peut aussi vous pousser à utiliser d’autres valeurs de l’attribut « rel » :

  • rel="author" permet d’indiquer que le lien renvoie à la page de présentation ou au site de l’auteur du contenu. Ca peut être utilisé, notamment quand on gère un média, pour mettre en avant le journaliste qui a rédigé un article, comme ici sur Le Figaro :
    Rel author sur un site média
    Rel author sur un site média
  • rel="external" permet simplement de spécifier que le lien mène à une ressource qui se trouve sur un autre site. Ce n’est pas un attribut indispensable, il n’a pas d’impact SEO.
  • rel="license" permet de faire un lien vers les conditions de licence d’un contenu (tous droits réservés, licence Creative Commons, etc). Le site de photos Flickr s’en sert par exemple pour indiquer les conditions d’utilisation d’un cliché :
    Rel License sur un site de photos
  • rel="help" permet de spécifier le lien vers une ressource d’aide.
  • rel="search" permet d’indiquer qu’un lien renvoie à une ressource permettant de faire une recherche sur le site.
  • rel="tag" sert à faire un lien vers un libellé qui caractérise un contenu (ce que l’on appelle par exemple les étiquettes sur WordPress).

Il y a aussi des relations qui sont plutôt utilisées avec des balises « link », notamment rel="alternate". Cet attribut permet de spécifier les « alternatives » à une page donnée, par exemple les équivalents que possède la page dans une langue étrangère dans le cas d’un site multilingue, ou encore l’existence d’une version mobile.

On peut aussi citer rel="preload" (pour précharger une ressource), ou encore rel="canonical", un attribut très important en référencement qui permet de spécifier la version d’une page que le moteur de recherche doit prendre en compte lorsqu’un contenu est accessible depuis plusieurs URL.

Prenons l’exemple d’un site e-commerce comme Sephora. Ce site donne la possibilité de trier les sélections de produits par prix, par note ou encore en fonction des meilleures ventes. Le fait d’effectuer cette sélection modifie l’URL de la page.

Par exemple, si je trie les vernis à ongles par prix croissant, j’ai cette URL :

https://www.sephora.fr/shop/maquillage/ongles/soin-des-ongles-c378/?srule=Price-Low-to-High&start=0&sz=28

Et en fonction des meilleures ventes, j’ai cette URL :

https://www.sephora.fr/shop/maquillage/ongles/soin-des-ongles-c378/?srule=Sorting%20Rule%20-%20Best%20Sellers&start=0&sz=28

Mais in fine, la sélection de produits présentée reste la même, elle apparaît juste dans un ordre différent. Pour éviter que cela ne cause un préjudice en termes de référencement, on spécifie une URL canonique sans aucun paramètre, qui indique aux moteurs de recherche que c’est la seule et unique version dont ils doivent se préoccuper.

Une URL canonique avec rel canonical

J’ai expliqué davantage dans un article dédié les challenges spécifiques posés par la navigation à facettes en e-commerce si vous voulez en savoir plus.


Faire un lien web, simple et complexe à la fois !

Comme vous pouvez le voir dans cet article, beaucoup de choses peuvent se cacher derrière le simple fait de faire un lien hypertexte, les « target » et les « rel » en font partie.

Au coeur d’enjeux de sécurité, de référencement, d’accessibilité ou tout simplement de respect des « bonnes pratiques », ils comptent parmi les multiples petites choses à apprivoiser quand on gère un blog !


    Poster un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

    5 commentaires sur “Faire un lien hypertexte : bien utiliser target et rel (noopener, noreferrer, nofollow)

    • Amandine

      Merci pour cet article extrêmement précis et pédagogique !

      Répondre à Amandine
    • Stéphane

      Bonjour Marlène,
      Merci pour cet article. Juste une précision sur l’attribut noreferrer : ce n’est pas sur la sécurité qu’il influe mais bien sur le SEO, indirectement en tout cas. Si un lien en noreferrer pointe sur un site distant, ce site distant ne pourra pas voir l’origine du backlink dans Google Analytics, ce qui peut parfois être gênant dans le cadre de partenariats. C’est la raison pour laquelle j’utilise beaucoup moins le target= »_blank », histoire que les propriétaires des sites vers lesquels je fais des liens puissent déterminer l’origine.

      Répondre à Stéphane
      • Marlène

        Hello Stéphane, effectivement avec noreferrer le trafic est catégorisé comme « direct ». En revanche, la dimension sécurité est réelle, d’après ce que j’avais lu au moment où WordPress a commencé à ajouter l’attribut, c’était pour éviter le tabnabbing, une forme de phishing où le pirate exploite les onglets ouverts sur le navigateur de la cible, le noreferrer complétait le noopener pour masquer les informations de site référent sur les anciens navigateurs qui ne supportaient pas noopener.

        Le fait de ne pas connaître l’origine d’un backlink est « dérangeant », je le conçois… mais en soi, ça n’influe pas sur le positionnement SEO.

        Répondre à Marlène
    • Musardise

      Hello Marlène

      Merci pour tous ces trucs bien utiles pour tous les blogs, petits et grands !

      Répondre à Musardise
      • Marlène

        Hello, merci d’avoir pris le temps de laisser un commentaire !

        Répondre à Marlène


    Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.