Si vous lisez cet article, c'est que vous avez peut-être comme moi pas compris immédiatement la documentation de Webflow sur les redirections. 

La création de redirections sur Webflow est une opération fréquente pour quiconque gère le contenu et/ou le SEO sur ce type de solution no-code. En effet, à la suite de la suppression d'une page, à la refonte du maillage interne, ou à une migration, vous pouvez vous retrouver avec des liens indexés ou présents qui ne pointent plus vers des pages publiées et donc renvoient vers des 404. Dans certains cas, il peut être pertinent de rediriger ces anciennes pages vers des nouvelles.

Quand utiliser les redirections Webflow ?

Les redirections Webflow sont uniquement des redirections 301. Elles sont importantes puisqu'elles permettent à la "puissance SEO" d'être transférée automatiquement vers une autre page plutôt que se perdre sur une 404. C'est d'autant plus vrai si vous avez des backlinks pointant sur cette page. 

D'un point de vue expérience utilisateur, cela évitera aussi d'avoir des visiteurs qui terminent sur une page sans contenu. 

Ainsi, les redirections Webflow permettent de rediriger de manière permanente le trafic d'une ancienne URL vers une nouvelle, en conservant la "puissance SEO" de l'URL originale. C'est une pratique recommandée, surtout si vous souhaitez conserver votre positionnement dans les moteurs de recherche.

Si jamais vous faites le choix de mettre en place une redirection sur votre site internet en Webflow, cette redirection sera nécessairement une redirection 301 dite permanente et non 302 dite temporaire. 

Comment mettre en place une redirection Webflow

Dans la suite de l'article, nous allons voir différents cas de figures :

• Comment rediriger une page seule ;
• Comment rediriger un répertoire / un dossier ;
• Comment rediriger un domaine entier.

Comment accéder à l'interface de gestion des redirections ? 

Pour accéder au panneau de gestion des redirections dans Webflow, cela prend 2 clics et un scroll. 

Tout d'abord, rendez-vous dans le dashboard de Webflow :

Une fois sur l'écran ci-dessus, vous cliquez sur "" et ensuite vous descendez la page. Vous devriez alors arriver sur un écran comme celui ci-dessous :

Comme vous pouvez le voir, l'interface est relativement simple. Sous les domaines sur lesquels vous avez publié, vous arrivez à la partie "301 redirects" qui signifie tout simplement redirections 301. Cette partie est divisée en 4 éléments :

• "Old path" qui signifie "ancienne URL" ;
• "Redirect to path" qui signifie "Rediriger vers la (nouvelle) URL" ;
• "Add redirect path" qui est un bouton pour confirmer la création de la règle de redirection ;
• Puis le tableau que vous voyez sur mon impression d'écran en deux colonnes avec à gauche les anciennes URLs, et à droite les nouvelles URLs. Comme vous le voyez aussi, vous pouvez supprimer chaque redirection créée. 

Comment rediriger une page sur Webflow ?

Voici le cas le plus simple pour les redirections webflow. Imaginons que vous avez une page relative à un événement, après l'événement vous décidez de la dépublier et de la rediriger vers la page de la prochaine édition de l'événement. 

Dans ce cas, le process est simple :

1. il vous suffit le simplement mettre le "chemin" (path) de l'ancienne URL dans le champ Old Path ;
2. Puis l'URL (ou le "chemin" (path) de cette URL) dans le champ Redirect to path ;
3. Et enfin cliquer sur "Add redirect path" ;
4. Une fois réalisé, publiez votre site en utilisant le bouton publish puis saisissez l'ancienne URL dans votre navigateur et charger la page. Vous devez normalement être redirigé sur la nouvelle URL (vérifiez que l'URL change dans la barre d'adresse de votre navigateur). 

⚠️ J'insiste ici sur le terme path ou "chemin" en Français. Le "chemin" est ce qui suit le domaine. Par exemple, dans l'URL https://www.wegrowth.io/contact :

• L'URL complète est : https://www.wegrowth.io/contact ;
• Le "chemin" (path) est : /contact ;
• Le domaine est : wegrowth.io.

Si vous mettez l'URL complète dans la case old path, vous aurez le message d'erreur suivant : Path must start with “/”, can only contain alphanumeric characters, as well as the following characters: . _ ? = % + & / ( ) * - @

Néanmoins, cela n'est pas un problème pour le champ Redirect to path. Vous pouvez mettre l'URL complète.

Dans l'impression d'écran ci-dessous, je souhaite rediriger la page ayant le chemin (path) /maintenance-assistance-technique vers la page /nos-services/maintenance.

Après avoir cliqué sur Add redirect path et avoir publié le site, la redirection apparaît dans la liste.

Comment rediriger un répertoire dans Webflow ?

Ici nous allons avoir deux cas de figure :

1. Rediriger un répertoire contenant plusieurs pages vers une simple page ;
2. Rediriger un répertoire contenant plusieurs pages vers un autre répertoire contenant les mêmes pages. 

Rediriger un répertoire contenant plusieurs pages vers une simple page :

Imaginons la liste d'URL suivante :

• https://www.mondomaine.fr/services-webflow/design ;
• https://www.mondomaine.fr/services-webflow/conception ;
• https://www.mondomaine.fr/services-webflow/creation. 

Et, pour une raison qui vous appartient, vous souhaitez rediriger l'ensemble vers https://www.mondomaine.fr/expertises/webflow.

Dans ce cas, on va utiliser ce qu'on appelle un groupe de capture en Regex (ou group capture en Anglais) :

1. Ainsi, dans le champ old path, vous mettrez "/services-webflow/(.*)". Notez le "(.*)" ; c'est notamment l'ajout de l'astérisque "*" après le point "." qui permet de capturer toutes les possibles URLs dans le dossier /services-webflow/ ;
2. Puis dans le champ redirect path /expertises/webflow. 

Passons maintenant à un cas un peu plus complexe. 

Rediriger un dossier de pages vers un autre dossier

Imaginons que vous aviez une liste d'articles tels que :

• https://www.mondomaine.fr/blog/titre-article-1 ;
• https://www.mondomaine.fr/blog/titre-article-2 ;
• https://www.mondomaine.fr/blog/titre-article-3.

Et que vous souhaitez rediriger vers :

• https://www.mondomaine.fr/magazine/decoration/titre-article-1 ;
• https://www.mondomaine.fr/magazine/decoration/titre-article-2 ;
• https://www.mondomaine.fr/magazine/decoration/titre-article-3.

Dans notre cas, le chemin (path) de l'article reste le même. Mais le dossier change puisque maintenant les articles sont dans le dossier /decoration/ lui-même dans le répertoire /blog/. Une situation fréquente que l'on peut retrouver en SEO lors d'une migration ou pour améliorer le PageRank Sculpting. 

Dans cette situation, la redirection la capture de groupe à utiliser est différente. 

1. Dans le champ old path, vous devrez saisir /blog/(.) ;
2. Dans le champ Redirect to path, vous devrez mettre alors /magazine/decoration/%1. Notez le "%1". Cela signifie que les chemins qui suivent le répertoire /blog/ doivent être conservés à la suite des répertoires /magazine/decoration. 

Et ce concept de groupe de capture "%1" est cumulable. Imaginons que vous souhaitez rediriger

• https://www.mondomaine.fr/blog/decoration/titre-article-1 ;
• https://www.mondomaine.fr/blog/decoration/titre-article-2 ;
• https://www.mondomaine.fr/blog/peinture/titre-article-1 ;
• https://www.mondomaine.fr/blog/peinture/titre-article-2 ;
• https://www.mondomaine.fr/blog/cuisine/titre-article-1.
• https://www.mondomaine.fr/blog/cuisine/titre-article-2.

vers :

• https://www.mondomaine.fr/magazine/decoration/titre-article-1 ;
• https://www.mondomaine.fr/magazine/decoration/titre-article-2 ;
• https://www.mondomaine.fr/magazine/peinture/titre-article-1 ;
• https://www.mondomaine.fr/magazine/peinture/titre-article-2 ;
• https://www.mondomaine.fr/magazine/cuisine/titre-article-1.
• https://www.mondomaine.fr/magazine/cuisine/titre-article-2.

Dans ce cas :

1. Dans le champ Old path, vous saisissez /blog/(.)/(.) ; Notez le premier (.) qui correspond aux catégories décoration, peinture, et cuisine, et le second (.) qui correspond à chaque article ;
2. Dans le champ Redirect to path, vous saisissez alors /magazine/%1/%2. 

Ainsi, toutes les redirections seront automatiques faisant que l'article https://www.mondomaine.fr/blog/peinture/titre-article-2 sera redirigé vers https://www.mondomaine.fr/magazine/peinture/titre-article-2. 

Vous aurez sûrement remarqué que j'utilise dans un cas le groupe de capture (.) et dans un autre cas le groupe de capture (.*) ? En effet, l'expression (.) capture l'élément entre deux barres obliques "/". A l'inverse, l'expression (.*) capture tout ce qui suit qu'il y ait une barre oblique ou non. 

Rediriger un domaine sur webflow

Ici, rien de plus simple :

1. Connectez les anciens et nouveaux domaines à votre site ;
2. Définissez le nouveau domaine comme par défaut ;
3. Publiez votre site. 

L'ancien domaine sera alors automatiquement redirigé vers le nouveau domaine. 

Pourquoi mes redirections ne fonctionnent pas sur Webflow ?

Il y a 4 raisons pour lesquelles vos redirections ne peuvent pas marcher :

1. Vous avez négligé un caractère spécial dans le old path tel que "-" ;
2. Vous avez fait une faute de saisie (ou de copier-coller) dans le old path ;
3. La page vers laquelle vous souhaitez redirigée n'existe pas (vous ne l'avez pas publiée ou vous vous êtes trompé dans l'URL ;
4. Vous avez oublié de publier le site après avoir rajouter votre ou vos redirections webflow. 

Les raisons ci-dessus sont du vécu... 

Mais je souhaite revenir à la raison 1 qui est souvent la raison principale pour laquelle cela ne marche pas : vous utilisez des caractères spéciaux dans le chemin (old path) à rediriger. 

Par exemple, vous décidez de supprimer quelques dizaines de pages à faible contenu que vous redirigez vers une nouvelle et unique page qui agrège l'ensemble de ces courts contenus. Vous devez alors rediriger les urls du dossier /nos-depeches/(.*) vers /news/. Comme vous avez un caractère spécial qui est le "-", vous devez le faire précéder du signe pourcentage "%". Ainsi, vous devez saisir dans le champ old path /nos%-depeches/(.*) comme dans l'image ci-dessous :

Et si j'insiste sur ce problème, c'est que je n'avais pas compris cette règle avant récemment. Et au long de ma carrière, j'ai du copier-coller quelques centaines de liens à la main... 

Les Caractères d'Échappement à prendre en compte

Les caractères d'échappement sont des caractères spéciaux en informatique qui modifient comment un système peut interpréter une suite de caractères. Voici la liste de caractères d'échappement que vous devez faire précéder du symbole pourcentage "%" dans webflow :

• %
• -
• &
• *
• (
• )
• _
• =
• +
• ?

Donc, si vous souhaitez rediriger une URL assez récurrente en e-commerce telle que /boutique/lunettes?verre=solaire vers /boutique/lunettes/solaires, vous devrez saisir /boutique/lunettes%?verre%=solaire dans le champ old path.