Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

URL absolue ou relative : quelle structure d’URL choisir ?

Créer et suivre les liens web peut être un défi, surtout si vous ne comprenez pas la différence entre les chemins absolus et relatifs. Ces 2 solutions...

Publié par Sebastien Turbe

Créer et suivre les liens web peut être un défi, surtout si vous ne comprenez pas la différence entre les chemins absolus et relatifs. Ces 2 solutions peuvent avoir un impact significatif sur les performances et la valeur SEO d’un site Web.

Ce petit guide entend vous expliquer les deux types de liens et vous aidera à déterminer le bon chemin pour chaque situation.

 

Chemin absolu  : plutôt pour les liens vers l’extérieur

Les chemins absolus contiennent l’URL complète, incluant le protocole, le nom de domaine du site Web et éventuellement un fichier, sous-dossier ou nom de page spécifique. Par exemple :

<a href="https ://www.codeur.com/page2/">Page 2</a>

L’URL ici, « https ://www.codeur.com/page2/ » peut être entrée dans la barre de recherche d’un navigateur, et vous serez conduit là où vous voulez aller. Certains navigateurs permettent de se passer du protocole, « https :// », vous devez l’inclure lorsque vous codez des liens absolus pour vous assurer qu’ils fonctionnent pour tous les visiteurs.

Les liens absolus sont utilisés pour créer des liens à la fois entre des sites Web distincts et en interne. Si vous créez un lien vers un site Web externe, il est préférable de cibler une fenêtre de navigateur vide pour que le lien s’ouvre dans un nouvel onglet plutôt que d’éloigner les visiteurs de votre site. De cette façon, l’utilisateur verra encore votre site lorsqu’il fermera la page liée. Pour demander au navigateur d’ouvrir un lien dans une nouvelle fenêtre, vous devez ajouter l’attribut « target= »_blank » ». Par exemple, vous feriez un lien vers la page d’accueil de Google comme ceci :

<a href="https ://www.google.com" target="_blank">Page d'accueil Google</a>

L’ouverture d’un lien dans un onglet ou une fenêtre dépend des paramètres du navigateur de l’utilisateur. À l’inverse, nous allons voir que les liens relatifs qui lient les pages de votre site web doivent toujours se charger dans la même page du navigateur.

Chemin relatif  : uniquement pour les liens internes

Un lien relatif quant à lui n’inclut que le nom d’un fichier ou d’une page spécifique, qui est relatif au chemin courant. Si vous conservez tous les fichiers de votre site Web dans un seul répertoire, vous pouvez établir des liens entre les pages comme suit :

<a href="page2/">Page 2</a>

Dans ce cas, le lien n’est valide que s’il est placé dans le répertoire où se trouve « page2.html ». Lorsqu’on clique, le navigateur recherche « page2.html » dans le répertoire de la page courante et l’affiche. Bien sûr, si vous collez « page2.html » directement dans la barre de recherche d’un navigateur, il ne vous mènera pas là où vous voulez aller. Le chemin du lien est relatif au document courant affiché par le navigateur, d’où son nom.

Vous devrez inclure un protocole et votre nom de domaine dans le lien pour le transformer en lien absolu :

<a href="https ://codeur.com/page2/">Page 2</a>

Parfois, vous devrez inclure plus d’informations que le nom d’un fichier pour créer un chemin relatif. Pour revenir au dernier exemple, si « page1 » réside dans le répertoire racine alors que « page2 » réside dans un sous-répertoire nommé « dossier», un lien relatif entre ces 2 pages doit inclure le dossier :

<a href="dossier/page2/">Page 2</a>

Attention, les noms de dossiers et de fichiers sont sensibles à la casse dans les URL ! Les noms de domaine, eux, ne le sont pas.

Supposons maintenant que vous vouliez créer un lien sur page2 qui vous ramène à page1. Pour créer un chemin relatif vers un répertoire supérieur, il vous suffit d’ajouter deux points suivis d’une barre oblique au début du lien :

<a href="../page1/">Page 1</a>

L’ajout de « ../ » indique au navigateur de chercher plus haut dans la hiérarchie des dossiers pour trouver le fichier souhaité.

 

Maintenant, imaginez une structure de dossiers comme suit  :

  • Racine  : Page1
    • DossierA  : Page2
    • DossierB  : Page3

Pour créer un lien entre la page 3 et la page 1, il faut procéder comme suit  :

<a href="../../../page1/">Retour à la page 1</a>

Vous pouvez simplement ajouter « ../ » à chaque fois que vous voulez vous déplacer vers le haut, mais que faire si vous avez besoin de vous déplacer vers le haut et puis vers le bas ?

 

Par exemple, imaginez que votre site ressemble à ça  :

  • Racine : Page1
    • DossierA : Page2
    • DossierB : Page3

Vous souhaitez aller de la page 3 à la page 2  : il faut d’abord ressortir du dossier B, puis redescendre dans le Dossier A.

<a href="../DossierA/page2/ ">Page 2</a>

Conclusion

Si vous ne faites que relier des pages qui sont toutes sur le même site web, l’usage veut qu’il soit préférable d’utiliser des liens relatifs. Et si vous changez votre nom de domaine, garder tous vos liens relatifs rendra la migration beaucoup plus facile.

Niveau référencement, l’utilisation des URL absolues est cependant préférable  : Dans certains cas, un lien relatif mal utilisé peut être source de duplication de contenu. Les liens relatifs sont également problématiques dans les flux RSS alors que l’utilisation de liens absolus garantit que le contenu s’affiche toujours correctement. Enfin, l’utilisation de liens absolus pour vos images vous permet de déclarer votre propriété dans les résultats de recherche d’images, ce qui est également un très bon point en matière de référencement.

Si vous utilisez des liens relatifs, mais avez des problèmes de duplicate, et que vous n’avez pas le temps ou les ressources pour corriger tous vos liens, la canonisation de toutes vos pages peut résoudre le problème. La balise « rel= »canonical » » indique qu’une URL mène à la copie principale d’une page Web, qui est la version qui s’affichera dans les résultats de recherche.

Comme toujours si vous avez un problème qu’un article ne saurait résoudre, je vous recommande vivement d’avoir recours à un professionnel. Codeur.com est là pour ça !

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Adobe XD : transformation 3D, design system amélioré et extension Visual Studio Code

Adobe XD encourage ses utilisateurs à opter pour un design system et veut faciliter les échanges entre les designers et les développeurs. L’article Adobe XD :...

Publié le par Thomas Coeffe
Webmarketing

ChatGPT : 200 millions de personnes utilisent le chatbot chaque semaine

L’agent conversationnel le plus populaire au monde, ChatGPT, vient de franchir la barre symbolique des 200 millions d’utilisateurs hebdomadaires.

Publié le par Matthieu Eugene