Url rewrite et htaccess en action

url rewriting la pratiqueNous voici à présent dans le gros de la pratique de l’url rewrite. Dans cet article des explications, des cas pratiques et du code pour comprendre et essayer soi-même.

Si vous n’avez pas installer l’url rewrite mon précédent article peut être utile. Si vous souhaitez plutôt suivre cette série d’articles sur l’url rewrite depuis le début c’est sur ce lien qu’il faut cliquer.

Explication du test de l’url rewrite

Dans l’article précédent nous avions testé la réécriture d’url en utilisant la méthode2 : utilisation de la page de test. Nous avions alors créé deux fichiers, un html pour visualiser notre page dans le navigateur « test.html » et un fichier .htaccess pour écrire notre règle de réécriture.

Le fichier .htaccess détaillé

Le fichier .htaccess utilisé était le suivant:

[sourcecode language=’html’]
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^accueil$ test.html [L]
[/sourcecode]

Voici quelques explications :
La première ligne « Options +FollowSymlinks» est facultative, elle peut causer une erreur 500. Retirez cette ligne et retentez si vous êtes dans cette situation.
Cette ligne autorise le serveur à suivre les liens symboliques dans ce répertoire. Généralement l’option est déjà activée sur les hébergeurs.
« RewriteEngine on » est la commande qui permet d’activer l’url rewrite, elle doit être présente dans tous fichiers .htaccess utilisant la réécriture d’url.
Enfin décomposons notre dernière ligne dans un tableau:

Éléments identifiésExplications
RewriteRuleCe terme introduit une règle de réécriture. il est indispensable pour le fonctionnement de celle-ci.
^accueil$Nous insérons ici l'url réécrite qui doit remplacer notre ancienne url. Elle est précédée du symbole "^" et suivie par le symbole "$" afin d'indiquer qu'aucun élément n'est présent avant et après. (c'est dans cette zone que nous utiliserons les règles des expressions régulières.)
test.htmlNous indiquons l'url qui doit être réécrite. Ici il s'agit d'une page html. (Dans cette zone il est possible de remplacer certaines parties de l'url par des variables du type: $1, $2, $3 etc.. afin de faire interagir le contenu de ces variables avec les éléments présents dans la zone où nous avons écrit la nouvelle url. Pour cela la condition est d'identifier les éléments de l'expression régulière en les entourant par des parenthèses. Ainsi les éléments de la première parenthèse correspondent à $1 puis ceux de la seconde $2 et ainsi de suite.)
[L]Cet élément fait partie d'un groupe que l'on nomme "flag" ou drapeau en français. Il se place en toute fin de ligne. On peut additionner plusieurs flags en les séparant avec une virgule ex: [L,NC]. Le flag [L] signifie qu'il s'agit de la dernière règle pour cette url, "L" pour "Last". Il indique que le serveur ne doit plus chercher à réécrire cette url par la suite.

Les règles d’écriture dans le fichier .htaccess

Nous allons maintenant nous intéresser aux principales règles d’expressions régulières utilisées pour la réécriture d’url:

Expressions régulières les plus utiles

Expressions régulièresExplications
^Définit le début de la ligne.
$Définit la fin de la ligne.
chien|chatla barre verticale permet de définir une alternative. chien ou chat.
[abcd]Les crochets permettent de définir les éléments autorisés. Ici nous acceptons les lettres a,b,c,d dans n'importe quel ordre et sans obligation de présence.
[a-z]Autorise pour un caractère toutes les lettres de l'alphabet .
\Permet d’échapper tout caractère qui possède une particularité. Par exemple le . signifie tout caractère, afin de lui faire perdre cet particularité on marque \. .
[0-9]Autorise pour un caractère tous les nombres.
+Indique que l'élément qui le précède peut être répété une ou plusieurs fois. {1,}
*Indique que l'élément qui le précède peut ne pas être répété ou être plusieurs fois répété. {0,}
?Indique que l'élément qui le précède peut ne pas être répété ou être répété une fois. {0,1}
.le point remplace n'importe quel caractère. (alphanumérique ou spécial)
([abcd]) ou (chien|chat)Les parenthèses peuvent être utilisées pour deux raisons.
Pour encadrer les éléments qui vont traiter la variable ($1,$2..$n) de la deuxième partie (cela s'appelle les références inversées ou retour).
Pour définir une alternative : (chien|chat), l'un ou l'autre. Attention l'ordre des lettres doit être respecté, hatc n'est pas valide.

Quelques flags pour l’url rewrite

flagsexplications
[L]Ce drapeau permet de dire: si la règle de réécriture située à cette ligne correspond à la demande d'un internaute, alors on ne recherche pas d'autres règles correspondant à la page demandée et on applique celle déjà trouvée.
[R] ou [R=code]Effectuer une redirection.
Dans le premier cas [R] la redirection sera appliquée par défaut. Elle aura pour code 302 (redirection temporaire).
Il est possible de préciser un code de redirection. Ainsi nous pouvons choisir une redirection 301 permanente ([R=301]).
[NC]Rend insensible à la casse. En effet la nouvelle adresse pourra être atteinte en tapant l'une de ces trois écritures:
Programme.php ou PROGRAMME.php ou PROGrammE.php

Cas pratiques sur la réécriture d’url

Nous allons voir plusieurs cas pratiques afin de mettre en situation ce que nous venons de voir:

Réécriture d’url des pages statiques

Afin de vérifier que vous avez bien assimilé le principe et la technique de réécriture d’url, je vous propose un petit exercice:
Exercice :
Nous avons créé le site www.buy-shoes.com.
Nous vendons des chaussures pour hommes et femmes et avons trois catégories de chaussures: sport, ville, bateau.
voici quelques url de notre site:
[sourcecode language=’html’]
www.buy-shoes.com/chaussures/sport/ASICS-Gel-Cumulus 13.html
www.buy-shoes.com/chaussures/ville/friis.html
www.buy-shoes.com/chaussures/bateau/sebago-docksides-2011-janvier.html
[/sourcecode]
La question :
Créer le fichier .htaccess qui permettra de transformer les trois url de notre site, en leurs url respectives ci-dessous.
[sourcecode language=’html’]
www.buy-shoes.com/chaussure-sport-homme/ASICS-Gel-Cumulus-13
www.buy-shoes.com/chaussure-ville-femme/hiver/friis
www.buy-shoes.com/chaussure/bateau/collection-2011/sebago-docksides
[/sourcecode]

Aide:Utiliser les références retour pour obtenir la date « 2011 » dans la troisième url. On pourrait le marquer directement dans la nouvelle écriture en dure, mais le but est de dynamiser un peu vos connaissances. La date « 2011 » doit être prise sur le nom du fichier html.
Afin de vérifier votre travail le mieux est de tester. Vous pouvez visualiser la correction ci-dessous si vous êtes un peu perdu ;).

[sourcecode language=’html’]
Options +FollowSymlinks

#activation de la réécriture
RewriteEngine on

#Mise en place des règles sous la forme: RewriteRule ^nouvelle url$ ancienne url [flags]
RewriteRule ^chaussure-sport-homme/ASICS-Gel-Cumulus-13$ chaussures/sport/ASICS-Gel-Cumulus-13.html [L,NC]
RewriteRule ^chaussure-ville-femme/hiver/friis$ chaussures/ville/friis.html [L,NC]
RewriteRule ^chaussure/bateau/collection-([0-9]+)/sebago-docksides$ chaussures/bateau/sebago-docksides-$1.html [L,NC]
[/sourcecode]
Les solutions proposées pour la réécriture ne sont pas forcément les plus adaptées au référencement, le but était ici de vous faire pratiquer l’url rewrite.

Des explications sur la réécriture des url de notre exercice?
Pour les deux premières url:
Il ne devrait pas y avoir de difficultés, mais vous pouvez vous aider du tableau d’explications de la méthode 2 plus haut si vous n’avez pas trouvé.
Pour la troisième voici comment j’ai procédé :

  1. J’inscris mon instruction de règle de réécriture (rewrite rule) : RewriteRule
  2. Je place entre les indicateurs de début et de fin ma nouvelle url que je souhaite obtenir :^ chaussure/bateau/collection-2011/sebago-docksides $
  3. Je place ensuite l’url actuelle à la suite :chaussures/bateau/sebago-docksides-2011- janvier.html
  4. Puis je remplace par $1 dans la partie de l’url actuelle l’élément qui doit être traité par la règle d’expression régulière, ici $1=2011- janvier
  5. Enfin j’entoure par des parenthèses la règle qui traite ma variable $1. Cette règle permet de ne récupérer que les chiffres : [0-9] et cela entre une et plusieurs fois : + .

En ce qui concerne l’utilisation des flags, le [L] permet d’arrêter la recherche lorsque notre url a été trouvée et le [NC] permettra si notre utilisateur inscrit par erreur en majuscule, d’aboutir sur notre site.

Réécriture d’url des pages dynamiques

L’url rewrite est avant tout utilisée pour le traitement des pages dynamiques. Cela s’explique simplement, il suffit de regarder une url dynamique et essayer de la mémoriser.
www.buy-shoes.com/article.php?cat=bateau&date-creation=2011-10-03&prod=sebago-docksides&color=black

Comment traiter une url dynamique?
La procédure est sensiblement identique à celle utilisée pour la 3e url de notre cas pratique sur les url statiques. La différence est que nous avons ici plusieurs variables à traiter car nous voulons avoir une url propre, par exemple:
www.buy-shoes.com/chaussure/bateau/collection-2011/sebago-docksides-black

Il convient de se rappeler que les éléments entre parenthèses seront identifiés dans l’ordre de gauche à droite. Ainsi la première parenthèse effectue le traitement de la variable $1 et nous retourne un résultat, la seconde traite $2 et ainsi de suite.

Voici une correction afin d’aboutir à l’url propre vue au dessus:

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^chaussure/([a-z]+)/collection-([0-9]{4})/([a-z-]+)-([a-z]+)$ article.php?cat=$1&date=$2&prod=$3&color=$4 [L,NC]

Deux petites nouveautés ici :

  • La règle qui traite $2: [0-9]{4}, ajouter des accolades avec un chiffre permet de choisir le nombre d’éléments que je souhaite recueillir.
  • La règle qui traite $3: ([a-z-]+), Il signifie que l’on souhaite obtenir des lettres et tiret une ou plusieurs fois.  j’ai utilisé cette combinaison pour le produit « sebago-docksides » qui possède un tiret de séparation.
alert

Afin que toutes les url de votre site changent, il ne faut pas oublier que des url internes à votre site sont peut être présentes en dure. Il vous faudra alors les trouver et les réécrire directement sur votre site afin d’avoir des url propres.

Plusieurs outils peuvent vous permettre de vérifier votre travail. Il s’agit de contrôler que chaque url s’associe bien à une page existante. Je vous conseille l’outil Xenu’s Link Sleuth.


Les redirections:

Nous allons finir nos cas pratiques par un élément très important, les redirections.
Plusieurs choix s’offrent à vous:

  • Redirection permanente (R=301): vous déplacez définitivement une ou des pages de votre site.
  • Redirection temporaire (R=302): vous réalisez une maintenance sur certaines pages de votre site.
  • La personnalisation des erreurs: Votre 404 n’a pas ce petit plus qui fait tout le charme d’une belle page d’erreur, personnalisez la! 😉

Voilà des exemples:

[sourcecode language=’html’]
Options +FollowSymlinks
RewriteEngine on

#Rediriger définitivement la page /info/article.html vers la page /news/index.html :
RewriteRule info/article.html /news/index.html [R=301]

#Il existe une autre façon de faire :
RedirectPermanent info/article.html http://www.votresite.com/news/

#Afin de rediriger les pages d’un répertoire vers le répertoire /maison/cuisines/ :
RedirectPermanent cuisines http://www.votresite.com/maison/cuisines

#Rediriger de manière temporaire le répertoire /administration vers la page /maintenance.htm :
RewriteRule administration /maintenance.htm [R=302]

#Définir une page d’erreur personnalisée :
ErrorDocument 404 /erreur-404.php
ErrorDocument 403 /erreur-403.php
[/sourcecode]

Voici quelques précisions:
Intéressons nous à la première redirection: RewriteRule info/article.html /news/index.html [R=301]
Mon fichier .htaccess étant à la même position dans l’arborescence de mon site que le dossier info, je n’est pas à préciser de chemin avant mon dossier.
Par contre pour la page vers laquelle je redirige, j’ai placé un slash afin de préciser que je débute la recherche de la page à partir de la racine de mon site.

Nous sommes arrivés à la fin de cet article. Nous avons fait un tour assez complet sur les bases de l’url rewrite en utilisant le fichier .htaccess.
N’hésitez pas à revenir plusieurs fois sur l’article pour bien assimiler ce contenu.
Bonne lecture.

A lire aussi:

 

2 Responses to Url rewrite et htaccess en action

  1. Bonjour.

    Le paragraphe de la redirection n’est pas clair en particulier ce qui concerne l’explication des 2 lignes :
    RewriteCond %{HTTP_HOST} !^www\.monsite\.com$ [NC]
    RewriteRule ^(.*) http://www.monsite.com/$1 [QSA,L,R=301]

    Est il possible de préciser les explications ?

    Merci

    • Traficat dit :

      Bonjour,

      Effectivement, je comprends ta remarque, mes exemples sont restés très techniques et je vais ajouter un poste à cette série d’articles afin de mettre en lumière l’utilité pour le référencement naturel de l’URL rewrite. Des bouts de code comme celui que tu proposes font partie des bonnes pratiques du SEO. Merci pour cette remarque, je vais compléter ma série d’articles.

Laisser un commentaire

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