10 Déc 2011

Les urls jolies

Les urls jolies, c’est joli. Mais c’est plus compliqué à mettre en place. Cependant c’est joli ! Alors pourquoi s’en priver ? Si ce n’était que pour ça, on pourrait se poser la question. Mais quand on sait que c’est le premier élément que voient ou tapent vos visiteurs lorsqu’ils accèdent à votre site et qu’elles ont un poids considérable dans le référencement de votre site, il ne faut surtout pas s’en priver. Et en plus, c’est joli ! Qu’est-ce qu’une url jolie ? Comment gagner en référencement ou fidéliser vos clients grâce à elle ? Analyse.

Qu’est-ce qu’une url jolie ?

Les urls sont affichées sur le navigateur en haut de toutes les pages des sites. Autant vous dire qu’elles sont directement visibles. Ce sont d’ailleurs ces adresses qui sont mises en favoris. Bien trop souvent ignorées des développeurs, elles devraient au contraire être choyées.

Après cette petite introduction légère, il est temps de revenir aux affaires en prenant quelques exemples d’url pas jolies tirées de sites existants et maquillées pour ne pas leur faire du tort :

http://www.mondomaine.com/Java-project/page/view?name=homepage.html;JSESSIONID=7EBF48G9C&__campaingId=1376293
http://www.mondomaine.com/article.php?article_id=1743
http://www.mondomaine.com/cgi-bin/run.asp?page=4812&next=1812&prev=1987&parent=8732
http://www.mondomaine.com/render.jsp?page=http://www.mondomaine.com/page/homepage.html&mode=html
http://www.mondomaine.com/quisommesnous.html

Ce ne sont que quelques exemples, même pas caricaturaux. Ils ont même été simplifiés. Il y a bien pire ! Voyons en quoi ces exemples ne sont pas bons.

La première adresse cumule à elle seule plusieurs erreurs :

  • Java-project correspond au nom technique du projet, très certainement réalisé en Java, qui permet d’afficher le site. C’est une information technique qui n’a que peu d’intérêt pour l’utilisateur.
  • /page/view n’apporte pas non plus d’informations supplémentaires. Quand on visite un site, on est là pour voir des pages. Le préciser est inutile. C’est à nouveau une information technique sans intérêt.
  • name=homepage.html : cela n’apporte rien de fournir le nom de la page en paramètres, encore moins d’indiquer à cet endroit une extension en html. D’ailleurs, en termes techniques, c’est probablement faux.
  • JSESSIONID=7EBF48G9C : le Jsessionid est un code généré automatiquement par Java pour chaque nouvel utilisateur afin d’identifier des sessions. Celles-ci n’ont qu’une durée de vie limitée à quelques minutes. Elles ne doivent donc jamais apparaitre dans les adresses mais être transmises par des cookies. Cela n’a en effet aucun sens de stocker ce type d’information dans ses favoris.
  • __campaingId=1376293 : ce paramètre est très certainement là pour fournir une information sur l’origine du visiteur et ainsi rémunérer l’apporteur d’affaires. La présence de deux soulignés « __ » est malvenue car dans les normes de développement, cela correspond à des variables privées qui par définition ne doivent pas être montrées au public.

Passons à la deuxième adresse qui est beaucoup plus simple et donc moins sujette à erreur :

  • article.php : l’extension indique que le site a été développé en php. Cela n’a que peu d’intérêt pour le visiteur de connaitre le langage avec lequel a été développé le site.
  • article_id=1743 : proposer l’id technique de l’article plutôt que son nom apporte de la simplicité pour le développeur, pas vraiment pour l’utilisateur qui aura la plus grande difficulté pour différencier un article d’un autre, les nombres pouvant parfois être très proches. Ce type d’adresse offre par la même occasion un moyen aux hackers de récupérer toutes vos pages en utilisant tous les ids, en général en partant de 1 jusqu’au dernier nombre attribué.

Et maintenant la troisième adresse :

  • /cgi-bin : un rappel des contraintes du web de la première heure. A cette époque, pour qu’un script puisse être exécutable, il fallait qu’il soit dans le répertoire cgi-bin. Cela fait plus de quinze ans que cette contrainte est levée. Il est temps de se mettre à la page.
  • /run.asp : même remarque que tout à l’heure. Run est un mot générique sans intérêt pour l’utilisateur qui n’a pas non plus d’intérêt à savoir que le site a été développé en asp.
  • page=4812&next=1812&prev=1987&parent=8732 : sans reparler du fait que l’id technique de la page est utilisé, les paramètres next, prev et parent font très certainement référence aux ids techniques des pages suivantes, précédentes et parentes. C’est une erreur de conception du site de faire apparaître une logique de navigation, quelle qu’elle soit dans l’url.

Pour la quatrième adresse :

  • render.jsp : mot générique et script jsp, là encore des informations inutiles pour l’utilisateur.
  • page=http://www.mondomaine.com/page/homepage.html : rappeler l’url complète, domaine inclus laisse à penser à un trou de sécurité majeur. Et si l’on fournissait en paramètres l’url d’un site concurrent, juste pour essayer ? Ça donnerait quoi ? J’ai également vu en guise de domaine « localhost » ce qui est encore plus illogique puisque, comme son nom l’indique, cela correspond à une machine locale qui ne peut être accédée que par elle-même.
  • mode=html : il est très certainement indispensable de rappeler au script que les sites Internet ont besoin d’un format de sortie en html ! À bannir !

Et enfin pour la cinquième adresse :

  • quisommesnous.html : c’est déjà mieux, mais « quisommesnous » est illisible sans séparateur de mots et préciser l’extension html n’a pas d’intérêt. D’ailleurs, est-ce vraiment une page statique en html ? Il reste si peu de sites qui fonctionnent encore comme ça de nos jours que l’on pourrait en douter.

L’ensemble de ces erreurs peuvent être préjudiciables. Certains exemples incitent à faire des essais pour accéder à des pages auxquelles on pourrait ne pas avoir le droit d’accéder. Cela montre surtout une maîtrise imparfaite de ses développements. C’est le logiciel utilisé pour faire le site qui vous amène à avoir des urls pas jolies, certainement pas vous. C’est une maîtrise imparfaite de ce logiciel, ou une impossibilité, qui vous impose ces urls pas jolies. Faire des urls jolies, c’est aussi assurer une sécurité accrue de votre site en suivant des règles d’écriture strictes et bien définies.

Pour contraster avec ces exemples d’urls pas jolies, prenons l’exemple de l’url jolie de cet article que je connais à l’avance avant de publier l’article puisqu’elle est logique et ne fournit que des informations utiles au visiteur : /analyses-dexpert/les-urls-jolies

  • blog.beule.fr : indique bien que c’est un article de blog
  • analyses-dexpert : qui fait partie de la section des analyses d’expert
  • les-urls-jolies : le titre de l’article plutôt que son id technique, chaque mot étant séparé par un tiret pour une meilleure lisibilité, et pas d’extension pour indiquer le langage dans lequel le site est développé.

Le nom de domaine

Bien avant de s’attaquer aux urls jolies, il est impératif de choisir un nom de domaine clair et précis. Le nom de domaine correspond à la partie gauche de l’url, avant le premier caractère « / ». Pour une marque comme Coca Cola, le choix est facile. Ce sera http://www.coca-cola.com ET http://www.cocacola.com. Comme le nom de la société est en deux mots, il est nécessaire de posséder les deux domaines sans et avec séparateur « – ». Ce séparateur est la convention pour séparer les mots dans les urls. Il est toutefois préférable de communiquer sur le nom sans séparateur.

Les extensions

Posséder l’extension « .com » qui est la plus utilisée dans le monde est un réel plus, même si vous ne communiquez pas directement dessus. À partir du moment où votre activité s’étend sur plusieurs pays, vous devez posséder les domaines équivalents pour les extensions des pays où vous opérez, par exemple « .fr » pour la France ou « .be » pour la Belgique. L’extension « .eu » est intéressante si vous opérez dans plusieurs pays d’Europe. Si vous n’opérez qu’en France, il est préférable de communiquer avec l’extension « .fr ».

Les extensions « .net » et « .org », initialement réservés pour les opérateurs de réseau et les associations à but non lucratif sont beaucoup moins porteuses. Encore moins intéressantes, les extensions « .biz », « .info », « .tel », « .mobi », « .xxx »… qui n’ont été créées que pour vous faire acheter plus de domaines. Il n’est pas intéressant pour vous de communiquer dessus, mais il vous est conseillé d’acheter votre domaine avec ces extensions avant que des concurrents le fassent pour vous et vous dénigrent au travers de ces adresses. Bien qu’ayant gain de cause en justice contre une telle pratique, il vous faudra du temps et des efforts financiers importants pour faire valoir vos droits. France Télévisions et la Maison-Blanche ont ainsi cohabité avec des sites pornographiques hébergés avec l’extension .org de leur domaine qu’ils n’avaient pas acheté.

Une adresse facilement mémorisable

L’adresse de votre site doit être facilement mémorisable et n’avoir aucune équivoque lorsqu’elle est prononcée à l’oral. Ainsi, la société « Arbo et Sens » qui a bâti son nom sur un jeu de mots a été obligée d’acheter un grand nombre de domaines :

  • arboetsens.fr et arbo-et-sens.fr, avec et sans séparateur pour l’adresse principale,
  • arboessence.fr et arbo-essence.fr, car le mot « essence » se prononce pareil que « et sens » et utilise le même domaine de vocabulaire autour de la nature, une essence de bois,
  • ainsi que toutes les déclinaisons d’extensions qu’ils ont jugées utiles d’acheter.

Des sociétés profitent de certaines extensions locales bienheureuses pour en détourner l’usage. Ainsi, les îles Tuvalu, inconnues du monde jusqu’alors, bénéficient d’une extension précieuse « .tv » qu’utilisent de nombreux opérateurs de télévision. La chaine germano-française Arte ne communique que sur arte.tv.

Une adresse prononçable

L’adresse doit enfin être prononçable. Devant la pénurie des mots disponibles, tous les mots du dictionnaire étant déjà pris, certaines sociétés créent de nouveaux produits avec des mots inventés qui ne sont parfois pas les mieux choisis.

Prenons comme exemple le nouveau concurrent hexagonal de Paypal : Kwixo.com. Le service proposé est intéressant, mais le nom choisi est imprononçable. Essayez par vous-même. La publicité vantant les mérites de ce service nous aide grâce à son slogan : « Le paiement so quick ». Un peu tiré par les cheveux, non ? Il est clair qu’avec un tel nom, ce service démarre avec une mauvaise étoile. Souhaitons-lui toutefois bonne chance !

www ou pas www ?

Nous avons l’habitude de voir www au début de chaque adresse. Seuls les internautes de la première heure, dans les années quatre-vingt dix, se souviendront de la signification de ces trois lettres : World Wide Web ou en français, la toile mondiale. Les sites Web étaient à l’époque peu nombreux et ils étaient différenciés des autres services Internet de cette manière. Aujourd’hui, pour le grand public, Internet n’est plus composé que de sites Web. Il y a également le mail, mais soit il est utilisé à travers un site Web, soit à l’aide d’un logiciel de mail qui est configuré la première fois, puis, plus jamais. Autant dire jamais pour un simple utilisateur. Gopher n’est plus utilisé par personne. Les newsgroups non plus, hormis une catégorie très précise d’utilisateurs. Peu de gens se souviennent de talk. Quelques rares personnes utilisent encore irc. Ftp n’est pas souvent utilisé par le grand public. Et j’en passe… Internet aujourd’hui, ce n’est plus que les sites Web. Il n’est donc plus utile de les différencier : www peut être retiré des communications.

Certaines personnes ayant l’habitude de mettre www à toutes les sauces, sans même savoir pourquoi, votre site doit toujours répondre avec ou sans le www. Je suis étonné de voir encore des sites grands publics, certains étant institutionnels, fonctionner correctement avec le www et afficher une page d’accueil de leur hébergeur sans le www. Et pourtant, ils utilisent les services de professionnels qui ont pignon sur rue. Tout le monde n’est pas encore au goût du jour.

http :// ?

Certains journalistes de radio répètent encore le fameux http:// qui précède chaque adresse de sites Web. Aujourd’hui, c’est carrément ridicule de le faire. Au point que les navigateurs modernes, comme Chrome et Firefox, ne l’affichent plus du tout. Cela va aider à son oubli. Dans 99,9 % des cas, on accède à http://. Les autres protocoles exploitables avec un navigateur sont rarement utilisés par le grand public (cf. les logiciels du paragraphe précédent). Seul https est largement utilisé pour les connexions sécurisées.

L’usage veut que l’utilisateur n’accède jamais directement à une page en https. Il doit être possible d’accéder à une page équivalente en http qui génèrera une redirection vers son homologue en https.

Ainsi, http:// tout comme www doivent être bannis de toute communication. Il ne reste plus qu’à communiquer sur mondomaine.fr ce qui est bien plus court.

Vous pouvez en revanche faire référence à un sous-domaine pour accéder à une partie spécifique de votre site. Le site Internet Cobrason vend des téléviseurs, des chaînes Hifi et autres matériels multimédia. On y accède naturellement avec l’adresse cobrason.com ou, pour les accrocs du www, www.cobrason.com. Cette société a également un blog, qui est un tout autre site, que l’on retrouve à l’adresse blog.cobrason.com, sans www avant. D’ailleurs avec, cela ne fonctionne pas.

Et le reste de l’url ?

Le reste de l’url, c’est-à-dire la partie à droite du premier « / », ne doit pas contenir d’informations techniques, mais une série de titres qui correspondent à l’arborescence de votre site que l’on retrouve également dans le fil de fer, suivi du titre de la page courante. Ainsi, la page « Qui sommes-nous ? » de la section « L’entreprise » sera accessible avec le chemin « /l-entreprise/qui-sommes-nous ». La page « /l-entreprise » correspond à la page d’accueil de la section « L’entreprise ».

Ce n’est pas la peine de mettre une extension pour indiquer le format du langage utilisé pour développer le site, ni l’id de l’article, ni aucune autre prouesse décrite au début de cet article.

Il peut arriver dans certains cas, notamment dans des forums, que deux articles aient le même titre. Étant accessibles par la même arborescence, ils auraient alors la même adresse, ce qui est impossible. Selon le contexte, trois solutions s’offrent à vous :

  • l’url contient dans son chemin la date d’écriture de la page, ce qui ne résout pas le cas peu probable où deux articles de même titre soient écrits le même jour,
  • l’url contient à la fois l’id technique de l’article et le titre de l’article, le titre ne devenant alors que décoratif,
  • un système de détection des doublons utilisé lors de la sauvegarde du nouvel article rajoute un indice en fin du titre de l’article pour dédoublonner son adresse.

La troisième solution est à préférer si cela est possible.

Les urls jolies pour le référencement

En plus d’être plus facile à lire et à mémoriser, les urls jolies apportent un atout indéniable au référencement. En effet, un moteur de recherche va indexer tous les mots de la page, y compris son url et va donner un poids plus fort aux mots qui sont dans l’url, puis dans le titre de la page par rapport au reste de la page. D’où l’intérêt d’avoir des mots représentatifs de l’article dans l’url.

Comment construire une url jolie ?

La construction d’une url jolie est très simple. Prenez le titre de la page, passez-le en minuscules et conservez uniquement les lettres de l’alphabet, les caractères accentués et les chiffres. Remplacez tous les autres caractères par des tirets « – ». Remplacez ensuite les caractères accentués par leur racine non accentué (é, è, ê => e). Les tirets en doublons ainsi que ceux en début et fin de phrase sont supprimés. Vous avez alors une url parfaitement jolie.

Cette transformation se fait à l’aide d’une simple fonction avec une expression régulière. Vous trouverez facilement des exemples fonctionnels dans votre langage de prédilection. Soyez attentifs lors de la transformation des caractères accentués de le faire avec le bon encoding.

Voici un exemple en PHP :

function url_jolie($string)
{
	$string = strtolower($string);
	$map = array(
			'/à|á|å|â/' => 'a',
			'/è|é|ê|ë/' => 'e', // manque le e tilde
			'/ì|í|î/' => 'i',
			'/ò|ó|ô|ø/' => 'o',
			'/ù|ú|u|û/' => 'u',
			'/ç/' => 'c',
			'/ñ/' => 'n',
			'/ä|æ/' => 'ae',
			'/ö/' => 'oe',
			'/ü/' => 'ue',
			'/Ä/' => 'Ae',
			'/Ü/' => 'Ue',
			'/Ö/' => 'Oe',
			'/ß/' => 'ss',
			'/[^\w\s]/' => ' ',
			'/\\s+/' => '-',
			'/-$/' => '',
			'/^-/' => '',
	);
	return preg_replace(array_keys($map), array_values($map), $string);
}

Comment associer les urls jolies avec le bon script ?

Pour bénéficier des urls jolies, vous devez utiliser les Rewrite rules d’Apache. Ce sont des règles de réécriture qui permettre de transformer vos url en une adresse qui correspond à un script réel.

Dans les principes de développement MVC (Modèle, Vue, Contrôleur), toutes les pages aboutissent à un et un seul script principal. Associé à ce script, une liste de routes vous permettra, à partir de règles, une pour chaque page du site, ou de règles génériques, d’accéder au script à même de traiter votre page.

Ceci peut paraître long à mettre en place, mais si votre site a été développé avec une logique MVC, vous verrez que c’est d’une simplicité enfantine et que le nombre de routes à décrire n’est pas si important que cela.

Voici un exemple de rewrite rule Apache :

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^(.*)$ pacha.php?url=$1 [L,QSA]
</IfModule>

Le but de l’article n’étant pas de décrire en détails ce qu’est une rewrite rule, sachez juste que celle décrite ci-dessus réagit à toutes les pages inexistantes du site et appelle le script générique pacha.php avec comme paramètre url, celle qui a été saisie par l’utilisateur. Ce dernier ne voit pas que le site est en php, à charge au script pacha.php de charger le bon script selon le paramètre url. Tous les fichiers existants du site sont chargés directement sans transformation par les rewrite rules.

Toutes les urls doivent-elles être jolies ?

La réponse est non. Cette règle s’applique uniquement aux pages du site, celles qui s’affichent sur le navigateur. Tous les éléments secondaires de la page, css, javascript et images, ne doivent pas être jolis. Les extensions de ces fichiers doivent impérativement être utilisées pour les différencier des autres pages du site. Ce qui n’empêche pas d’avoir un nom de fichier joli.

Vous devez par ailleurs respecter les règles basiques suivantes :

  • les fichiers css sont dans le répertoire /css et portent l’extension « .css »,
  • les fichiers javascript sont dans le répertoire /js et portent l’extension « .js »,
  • les images sont dans le répertoire /img et portent l’extension « .png » pour les aplats et les logos, « .jpg » pour les paysages, les fichiers « .gif » ne doivent plus être utilisés,
  • lorsqu’il y a des galeries d’images, elles doivent être stockées dans des répertoires séparés, un répertoire par galerie et leurs versions miniatures dans un autre répertoire.

Il existe des logiciels dits minifieurs qui permettent de réduire les fichiers css et javascript afin qu’ils prennent moins de place, en supprimant les espaces inutiles et remplaçant les mots techniques longs par des mots plus courts. Ces logiciels permettent par la même occasion de regrouper tous les fichiers d’un même type en un seul. Avec moins de fichiers à charger et plus petits, les temps de chargement de vos pages sont réduits. En plus, les fichiers sont plus difficilement lisibles pour des hackers qui voudraient en savoir plus sur le fonctionnement de votre site. Cela ne vous empêche nullement de continuer vos développements avec des fichiers multiples non compressés.

Alors convaincus d’utiliser les urls jolies ? Cela a certes un petit coût au démarrage. Mais à la longue, le gain est indéniable. D’ailleurs, votre concurrent le fait déjà…

Franck Beulé
Chef de projet Agile, expert des technologies de l’Internet et en ergonomie du Web

Mots clés : , , , ,

Ajoutez un commentaire