Menu
InformatiWeb
  • Index
  • Formations
  • Tutoriels
  • InformatiWeb Pro

Connexion

Inscription Mot de passe perdu ?
US
  • Informatique
    • Articles
    • BIOS
    • Live CD
    • MultiBoot
    • Sauvegardes
    • Sécurité
    • Virtualisation
    • Web
    • Windows
  • Jeux vidéo
    • Command & Conquer
    • TrackMania
  • InformatiWeb
  • Tutoriels
  • Informatique
  • Web
  • Rediriger un visiteur automatiquement (côté client en HTML ou JS ou côté serveur en PHP ou via .htaccess)
  • Web
  • 20 mai 2013 à 21:49
  • Lionel

Rediriger un visiteur automatiquement (côté client en HTML ou JS ou côté serveur en PHP ou via .htaccess)

Lorsque vous créez un site web et/ou que vous créez une nouvelle version de celui-ci (avec de nouvelles fonctionnalités, par exemple), vous aurez peut-être besoin de créer des redirections pour rediriger les visiteurs vers la nouvelle adresse d'une page, ...
Néanmoins, il existe différentes techniques pour rediriger un visiteur et certaines techniques sont plus adaptées pour certains cas que d'autres.
Par exemple, lors de la mise à jour d'un site, si une page change d'adresse (url), vous devrez rediriger les visiteurs grâce à des redirections serveur (via un fichier .htaccess ou via PHP) pour que les moteurs de recherches puissent mettre à jour leurs résultats de recherche sans que le référencement de votre site web et plus précisément de vos pages soit impacté.

  1. Redirection serveur (via un fichier .htaccess)
    1. Redirection (via mot clé)
    2. Redirection (via code HTTP)
    3. Explications des différences
  2. Redirection serveur (via PHP)
    1. Rafraichir la page pour rediriger le visiteur vers une autre page
    2. Rediriger le visiteur en renvoyant un code HTTP de redirection
  3. Redirection côté client (via une balise HTML)
  4. Redirection côté client (via JavaScript)
    1. Redirection automatique après x secondes au chargement de la page
    2. Redirection automatique après x secondes au clic

1. Redirection serveur (via un fichier .htaccess)

Si vous avez hébergé votre site web sur un hébergement web Linux (ce qui est le cas dans la majorité des cas), le serveur web utilisé par défaut sera Apache.
Pour effectuer des redirections serveur avec un serveur web Apache, vous devrez créer un fichier ".htaccess" et utiliser l'instruction "Redirect" du module "mod_alias".

1.1. Redirection (via mot clé)

Parmi les différentes redirections possibles, vous avez :

  • Redirect : Si aucun terme ci-dessous ou aucun code HTTP n'est spécifié, le code de redirection qui sera renvoyé sera : 302 (redirection temporaire)
  • Redirect permanent : Renvoie un code de redirection permanente (301), indiquant que la ressource a été définitivement déplacée.
  • Redirect temp : Renvoie un code de redirection temporaire (302). C'est le comportement par défaut.
  • Redirect seeother : Renvoie un code "See Other" (303) indiquant que la ressource a été remplacée par une autre.
  • Redirect gone : Renvoie un code "Gone" (410) indiquant que la ressource a été définitivement supprimée. Lorsque ce code est utilisé, on ne doit pas utiliser l'argument URL.

Exemples :

Apache

Redirect /dossier https://www.mon_site.com/dossier
Redirect permanent /dossier https://www.mon_site.com/dossier
Redirect temp /dossier https://www.mon_site.com/dossier
Redirect seeother /dossier https://www.mon_site.com/dossier
Redirect gone /dossier https://www.mon_site.com/dossier

1.2. Redirection (via code HTTP)

Vous pouvez aussi utiliser le code HTTP correspondant à la redirection que vous souhaitez effectuer.

Exemples :

Apache

Redirect 301 /dossier https://www.nouveau_domaine.com/dossier
Redirect 302 /dossier https://www.nouveau_domaine.com/dossier
Redirect 303 /dossier https://www.nouveau_domaine.com/dossier
Redirect 304 /dossier https://www.nouveau_domaine.com/dossier

Note : pour + d'informations sur les codes HTTP, allez sur la page "Liste des codes HTTP" de Wikipedia.

1.3. Explications des différences

S'il y a plusieurs types de redirections, c'est simplement parce qu'elles n'ont pas toutes le même but.
Par exemple, si vous changez d'hébergeur et d'adresse, nous vous conseillons de créer une redirection 301. Cela vous évitera de perdre votre référencement dans les moteurs de recherche (dont Google) car cette redirection redirigera aussi bien les visiteurs que les moteurs de recherche. Lorsque Google arrivera sur l'ancien hébergement, celui-ci remplacera les anciennes url par les nouvelles sans vous faire perdre votre positionnement au niveau du référencement.
Dans ce cas, vous créerez un fichier ".htaccess" à la racine du site sur l'ancien hébergeur et vous indiquerez ceci à l'intérieur :

Apache

Redirect 301 / https://www.nouveau_domaine.com/

Pour + d'informations sur les redirections serveur avec Apache, nous vous proposons d'aller lire la documentation officielle d'Apache en suivant ce lien.

2. Redirection serveur (via PHP)

Si vous avez utilisé le langage PHP pour créer votre site web dynamique, vous pouvez créer des redirections permanentes, temporaires, 301, 302, ... via sa fonction "header".
Notez que si vous utilisez un framework PHP, tel que CakePHP, Symfony, ... vous trouverez probablement des fonctions de redirection dans leur documentation officielle.

Attention : Cette fonction doit être utilisée avant le moindre caractère HTML.
En effet, si un espace a été envoyé avant l'utilisation de cette fonction, PHP vous affichera l'erreur : Headers already sent by ...

2.1. Rafraichir la page pour rediriger le visiteur vers une autre page

Pour rafraichir la page et rediriger le visiteur, vous devez utiliser le mot clé Refresh et spécifier un délai en secondes.

PHP

<?php
// Infos de redirection
$delai=3; // Délai en secondes
$url='/test/'; // Adresse vers laquelle rediriger le visiteur
// Redirection dans x secondes
header('Refresh: '.$delai.';url='.$url);
?>

Attention : ne pas utiliser ce type de redirection si vous souhaitez aussi rediriger les moteurs de recherche comme Google ou Bing, par exemple.

2.2. Rediriger le visiteur en renvoyant un code HTTP de redirection

Pour créer une vraie redirection, c'est-à-dire en retournant un code HTTP de redirection, vous devez d'abord modifier l'info "Status" de l'en-tête et ensuite effectuer la redirection 301, 302 ou autre via le mot clé : Location.
Reportez-vous à "HTTP/1.1 Specification" pour plus d'informations sur les en-têtes HTTP.

Informations :

  • La différence entre 301 et 302 se trouve surtout au niveau du référencement par Google.
    Si Google reçoit un code 301 (redirection permanente), celui-ci va remplacer l'ancienne "url" par la nouvelle sans vous faire perdre votre référencement.
    Alors que s'il reçoit un code 302 (redirection temporaire), il continuera à indexer le contenu de l'ancienne url.
  • Si vous ne modifiez pas l'info "Status" avant d'effectuer la redirection, le code renvoyé sera un 302 (redirection temporaire).

PHP

<?php
// On modifie l'information : Status
header('Status: 301 Moved Permanently', false, 301);
// On effectue ensuite la redirection
header('Location: /test/');
?>

3. Redirection côté client (via une balise HTML)

Si vous souhaitez rediriger vos visiteurs vers une autre page automatiquement, vous pouvez utiliser la balise META "Refresh" qui vous permettra de définir un délai avant redirection si vous le souhaitez.
Néanmoins, sachez qu'il s'agit d'une redirection qui s'effectue côté client (car il s'agit d'une balise HTML) et non d'une redirection serveur (en PHP par exemple). Les moteurs de recherches (dont Google) ne suivront donc pas ces redirections HTML.
Cette balise META est à insérer entre les balises <head> et </head> de votre page.

HTML

<META http-EQUIV="Refresh" CONTENT="Temps; url=https://www.informatiweb.net/">

Pour configurer cette redirection, remplacez Temps par le nombre de secondes à attendre avant de rediriger le visiteur et indiquez la nouvelle adresse après "url=".

4. Redirection côté client (via JavaScript)

Si vous souhaitez rediriger vos visiteurs vers une autre page automatiquement, vous pouvez utiliser une fonction javascript qui vous permettra de définir un délai avant redirection si vous le souhaitez.
Néanmoins, il s'agira d'une redirection client (car le javascript est exécuté coté client) et non d'une redirection serveur.
Ce script doit être placé entre les balises <body> et </body> de votre page web.
L'avantage d'utiliser une redirection javascript est le fait de pouvoir la déclencher après un clic sur un bouton ou toute autre action faite par le visiteur.

4.1. Redirection automatique après x secondes au chargement de la page

Dans ce cas, le compte à rebours démarre dès le chargement de la page sur laquelle vous insérez ce code.

Si vous souhaitez rediriger le visiteur après x secondes, à partir du chargement de la page. Il vous suffit de taper ce pre dans votre page.
Note : de préférence, à la fin de la page. Avant la balise </body>.

Javascript

<script type="text/javascript">
var delai=3; // Delai en secondes
var url='/dossier/page_de_destination.php'; // Url de destination
setTimeout("document.location.replace(url)", delai + '000');
</script>

4.2. Redirection automatique après x secondes au clic

Si vous souhaitez déclencher cette redirection suite à un clic sur un bouton ou autre, nous vous conseillons de placer ce pre dans une fonction. Il vous suffira ensuite, d'appeler cette fonction via l'évènement souhaité.

Voici la fonction :

Javascript

<script type="text/javascript">
function redirection_js(url,delai){
  setTimeout("document.location.replace('"+url+"')", delai + '000');
}
</script>

Et voici comment l'utiliser pour l'évènement click (ou onclick). Vous pouvez bien sûr utiliser d'autres évènements comme "onmousedown", "onmouseover", ...

Pour utiliser notre fonction, on passe simplement les paramètres suivants :
- url : l'adresse vers laquelle rediriger le visiteur
- delai : délai en secondes avant redirection

Javascript

<input type="submit" name="mon_bouton" id="mon_bouton" value="Texte du bouton" onclick="redirection_js('/dossier/page_de_destination.php','3')" />

Partager ce tutoriel

Partager
Tweet

A voir également

  • Activer l'extension curl de PHP sous Windows

    Web 18/11/2013

    Activer l'extension curl de PHP sous Windows

  • Adobe Fireworks - Créer une image animée (gif) à partir de plusieurs images

    Web 9/3/2013

    Adobe Fireworks - Créer une image animée (gif) à partir de plusieurs images

  • Adobe Fireworks - Traitement par lots

    Web 12/6/2014

    Adobe Fireworks - Traitement par lots

  • Configurer et sécuriser votre réseau Wifi

    Web 3/11/2013

    Configurer et sécuriser votre réseau Wifi

Commentaires

Vous devez être connecté pour pouvoir poster un commentaire

Donnez-nous votre avis

Contenu épinglé

  • Logiciels utiles
  • Nos programmes
  • Conditions générales
  • Donnez votre avis

InformatiWeb Pro

  • Administration Win. Server
  • Administration Linux
  • Virtualisation

Contact

  • Livre d'or
  • Support technique
  • Contact

® InformatiWeb.net 2008-2022 - © Lionel Eppe - Tous droits réservés.

Toute reproduction totale ou partielle de ce site est interdite et constituerait une contrefaçon sanctionnée par les articles L.335-2 et suivants du Code de la propriété intellectuelle.