Qu’est-ce qu’un lien hy­per­texte ou hyperlien ?

Le terme « hy­per­texte » revient au phi­lo­sophe américain Ted Nelson. Gé­né­ra­le­ment, il ne s'agit pas né­ces­sai­re­ment de textes linéaires qui sont reliés à d'autres textes par des hy­per­liens. Le système hy­per­texte le plus répandu au monde est en réalité le Word Wide Web (en abrégé Web ou WWW). Dans le Web, des hy­per­liens sont mis en place à l'aide du langage de balisage HTML pour lier des pages Web et autres res­sources. Dans notre article, nous nous con­cen­tre­rons sur les liens hy­per­textes des documents Web et pré­sen­te­rons leur structure, leurs pro­prié­tés et leur uti­li­sa­tion.

Dans des documents HTML, les hy­per­liens sont in­tro­duits à l'aide des éléments <a> et <link>. Tandis que l’élément <a> définit la position d'un lien hy­per­texte dans la zone de contenu (body) d’un document HTML, l’élément <lien> dans la zone d’en-tête (head) est utilisé pour définir la relation avec les autres documents et res­sources.

Dans ce qui suit, nous nous con­cen­tre­rons sur l'élément <a> et donc sur les hy­per­liens du corps de texte HTML, qui sont visibles pour les visiteurs des pages Web, sur lesquels on peut cliquer, et qui per­met­tent, comme la barre d'adresse du na­vi­ga­teur et les champs de saisie des moteurs de recherche, une na­vi­ga­tion dans le Word Wide Web.

Les hy­per­liens sont im­plé­men­tés en utilisant l'élément Anchor a. Le schéma de base cor­res­pond au suivant :

L’élément a se compose d’une balise de début et d’une balise de fin. Il est introduit, comme d’habitude avec HTML, par des chevrons. Les balises com­por­tent de plus ce qu’on appelle le link text, c’est-à-dire l’élément de texte visible et cliquable.

Vous pouvez également en­re­gis­trer des éléments visuels avec les liens hy­per­textes. Dans ce cas, les balises de début et de fin de l’élément a con­tien­nent le code HTML per­met­tant d’intégrer l’image.

L’élément a va définir la cible du lien à l’aide de l'at­tri­but href, qui a besoin d’un iden­ti­fiant uniforme de ressource (URI). En règle général, il s’agit de l’URL d'une ressource Web ou d’un signet qui conduit à un autre passage de texte dans le même document. Les attributs HTML sont définis après un blanc dans la balise de départ de l'élément HTML cor­res­pon­dant.

Les exemples de liens ci-dessus mènent à une page Web qui a pour adresse "https://www.exemple.org". La trans­mis­sion s'ef­fec­tue via HTTPS. Par défaut, ce type d'hy­per­lien dirige les in­ter­nautes vers le haut de la page Web liée.

Cependant, s'il s'agit d'un lien vers une cible interne d’un document, un balisage HTML sera utilisé selon le schéma suivant :

Notez qu’ à partir de HTML5, les cibles des liens d’un document doivent être définies comme signets à l'aide d'ID uniques. Avec HTML4, l’attribut name est utilisé dans l’élément a.

Si, par contre, vous souhaitez sauter vers une partie précise d’un document externe, ajoutez à la fin de l’URL un hachtag (#) puis l’ID cor­res­pon­dant au signet souhaité.

L'élément a ne présente en principe pas d'élé­ments obli­ga­toires. Si un hyperlien doit être inséré, la cible du lien doit tout de même être spécifiée grâce à href. En outre, l’élément a prend en charge divers attributs qui peuvent être ajoutés si né­ces­saire pour fournir des in­for­ma­tions ad­di­tion­nelles aux uti­li­sa­teurs ou aux agents uti­li­sa­teurs.

Le tableau ci-dessous regroupe les attributs de l’élément a les plus in­té­res­sants :

Pour lier des pages entre elles, on utilise des liens hy­per­textes de dif­fé­rentes fonctions. Selon l’usage habituel utilisé par les com­mu­nau­tés sur Internet, divers types de liens ont été établis. Pour faire court, ils peuvent être divisés en hy­per­liens internes et externes. Les liens internes désignent tous les liens entre les pages d’un même domaine. Les liens externes relient quant à eux dif­fé­rents domaines entre-eux. Les liens internes et externes sont utiles pour les visiteurs de sites Web dans leur na­vi­ga­tion. Avec l’avènement de Google, une autre uti­li­sa­tion des hy­per­liens dans le cadre des tech­niques de ré­fé­ren­ce­ment naturel (Search Engine Op­ti­mi­za­tion ou SEO) est apparue : en effet, les bots, et avant tout les robots de moteurs de recherche, utilisent également les liens hy­per­textes. Pendant longtemps, les hy­per­liens ont constitué un critère central pour juger si un site Web était pertinent ; ils jouaient donc un rôle décisif dans le po­si­tion­ne­ment des sites sur le moteur de recherche. Au­jour­d'hui, l'im­por­tance du lien hy­per­texte est devenue plus relative. Les al­go­rithmes modernes des moteurs de recherche utilisent une multitude de facteurs de clas­se­ment pour classer les résultats les plus per­ti­nents pour chaque requête de recherche. Néanmoins, les liens internes et le profil de backlinks restent très im­por­tants comme nous allons le voir.

L'or­ga­ni­sa­tion de liens internes au sein d'un site Web suit des struc­tures dis­tinctes. Ces dernières sont basées sur des con­si­dé­ra­tions stra­té­giques. L'ob­jec­tif est d’orienter le flux des visiteurs, le chemin d’accès par clic.

Les chemins d’accès sont gé­né­ra­le­ment orientés selon un but précis : par exemple, les ad­mi­nis­tra­teurs de boutiques en ligne peuvent aspirer à vendre des biens et des services, à attirer des abonnés pour leur news­let­ter ou encore à en­cou­ra­ger les visiteurs à par­ti­ci­per à un concours.

Pour les liens internes, on trouvera prin­ci­pa­le­ment des struc­tures linéaires, ar­bo­res­centes, en étoile ou en réseau.

• Structure linéaire : au sein d'une structure de liens linéaires, les sous-pages d'un projet Web sont reliées de telle sorte qu'un chemin prédéfini est créé. Les visiteurs se déplacent sur le site Web selon l’ordre souhaité par l’ad­mi­nis­tra­teur. Ce dernier dispose donc d’un contrôle maximal sur le chemin possible. Cependant, les visiteurs peuvent se sentir un peu piégés dans cette structure. La structure de liens linéaires est typique pour les projets Web dy­na­miques tels que les blogs. 

• Ar­bo­res­cence : si l’or­ga­ni­sa­tion des liens suit une structure ar­bo­res­cente, le site Web repose sur une or­ga­ni­sa­tion à dif­fé­rents niveaux hié­rar­chiques. Cette dernière est typique pour les boutiques en ligne. Le visiteur accède gé­né­ra­le­ment d'abord à une page de des­ti­na­tion optimisée pour le moteur de recherche, puis clique sur les pages de ca­té­go­ries et de produits sou­hai­tées. L'orien­ta­tion thé­ma­tique des pages Web (catégorie, sous-catégorie, produit, article) est plus spé­ci­fique au fur et à mesure que le client entre dans les niveaux in­fé­rieurs du site.

• Structure en étoile : ce schéma est défini lorsqu’une page Web offre plusieurs liens vers d’autres pages Web gé­né­ra­le­ment équi­va­lentes. Un tel principe d’or­ga­ni­sa­tion est typique pour des dic­tion­naires en ligne comme Wikipédia. Dans chaque article, les uti­li­sa­teurs trou­ve­ront des hy­per­liens vers d'autres articles per­ti­nents dans lesquels les termes liés sont expliqués plus en détail. L’uti­li­sa­teur a ainsi le choix des sujets qu’il souhaite ap­pro­fon­dir.   

• Structure en réseau : les struc­tures de liens en réseau sont ca­rac­té­ri­sées par le fait que presque toutes les sous-pages d'un projet Web sont liées. Un visiteur de site Web a ainsi la pos­si­bi­lité d'at­teindre la sous-page désirée depuis chacune de ses pages.

Il est important de com­prendre que les struc­tures de liens pré­sen­tées ci-dessus ne doivent pas être prises en compte de manière stricte. En règle générale, les ad­mi­nis­tra­teurs de sites Web combinent ces dif­fé­rentes stra­té­gies de struc­tures. Par exemple, une boutique en ligne peut adopter une structure ar­bo­res­cente et en même temps offrir une structure de liens en réseau via les menus de na­vi­ga­tion, les barres latérales et le pied de page. Cela donne aux clients po­ten­tiels la pos­si­bi­lité de pouvoir quitter le parcours de clics qu’ils em­prun­tent à tout moment et de passer fa­ci­le­ment à d’autres ca­té­go­ries, produits ou autres pages.

Les hy­per­liens internes sont d'une im­por­tance capitale pour l’usabilité d’un site. Un projet Web pré­sen­tant une bonne structure de liens offre aux uti­li­sa­teurs des parcours de clics courts vers le contenu désiré et les encourage à découvrir d’autres parties du site. Ainsi, un bon réseau de lien interne contribue également à augmenter le temps passé par un visiteur sur le site. Les experts en ré­fé­ren­ce­ment con­si­dè­rent également qu’une bonne or­ga­ni­sa­tion de liens internes est l’un des facteurs centraux d’un bon clas­se­ment dans les moteurs de recherche. 

Les hy­per­liens externes cor­res­pon­dent aux liens d'un site vers un autre. Selon le point de vue, un lien entre deux domaines sera qualifié d’entrant ou de sortant.

Les hy­per­liens sortants (outbound links en anglais) se réfèrent à tous les liens hy­per­textes de votre site qui renvoient à une ressource Web d'un autre domaine. En règle générale, les liens externes sont utilisés pour indiquer ses sources d’in­for­ma­tions ou pour re­com­man­der d'autres contenus.

Notez que des liens hy­per­textes externes con­dui­sent les in­ter­nautes de votre site vers un autre. Cela comporte donc un risque de perdre ses visiteurs. Vous pouvez toutefois essayer de con­tour­ner le problème en utilisant l'at­tri­but HTML target. Selon le schéma détaillé ci-dessous, la page cible du lien externe s'ouvre dans un nouvel onglet ou une nouvelle fenêtre (suivant les con­fi­gu­ra­tions du na­vi­ga­teur). Votre site reste ainsi ouvert et dis­po­nible pour le visiteur.

Un in­con­vé­nient de l'at­tri­but target est que les visiteurs du site Web ne peuvent pas décider par eux-mêmes où ouvrir le lien cliqué. Pour des raisons de sécurité, si target="_blank" est utilisé, employez toujours l’attribut rel avec la valeur noopener :

Il serait une erreur d’affirmer que le fait qu'un site Web contienne des liens sortants a une influence positive directe sur les clas­se­ments dans les moteurs de recherche. C’est ce qu’a expliqué clai­re­ment le salarié de Google John Mueller en mai 2016 dans une session Webmaster Hangout sur YouTube. Toutefois, les liens hy­per­textes qui offrent une valeur ajoutée au visiteur en se référant à des contenus fiables et de haute qualité aug­men­tent, selon J. Mueller, la qualité d'un site Web. Par con­sé­quent, il n’est pas con­seil­ler de faire l’impasse totale sur les hy­per­liens sortants.  Ce qui est in­con­tes­table, c’est que les hy­per­liens sortants peuvent avoir une influence négative sur le clas­se­ment d’un site Web. Dans le cas de sites qui in­cor­po­rent de nombreux liens sortants de manière non naturelle, le danger est que les moteurs de recherche le classent comme spam et réa­gis­sent avec des sanctions, ce que l'on appelle penalty.

En tant qu'ad­mi­nis­tra­teur de site Web, vous devez faire preuve de prudence lors de l'uti­li­sa­tion de liens hy­per­textes externes, car faire référence à d'autres sites Web peut éven­tuel­le­ment avoir des con­sé­quences ju­ri­diques - par exemple, en cas de violation des droits d'auteur ou de contenus illégaux tels que des offres de jeu illégales. Si vous voulez empêcher qu'un lien sortant sur votre site Web ne soit considéré comme une re­com­man­da­tion par les moteurs de recherche, vous pouvez demander au crawler d'ignorer le lien en question. Pour ce faire, utilisez l'at­tri­but rel avec la valeur nofollow comme décrit ci-dessus. Les liens nofollow ne sont pas pris en compte dans l’éva­lua­tion des al­go­rithmes des moteurs de recherche. Cette cons­truc­tion de lien s'est imposé comme la norme en par­ti­cu­lier pour les projets Web dans lesquels les visiteurs peuvent également publier leur propre contenu, y compris des hy­per­liens. Les forums en ligne, pla­te­formes d’avis d’uti­li­sa­teurs, magazines ou encore wikis se protègent ainsi des contenus de spam, qui servent uni­que­ment à cons­truire des liens pour des pratiques douteuses de black hat SEO.