Comment faire une refonte de site internet ?

Récemment, une toute nouvelle version du site web de l’agence Walk The Line a été mise en ligne. À première vue, on constate un changement d’ordre visuel, graphique. Les plus observateurs auront également observé une refonte de notre logo ! Mais pourquoi avons-nous décidé de refondre notre site internet ? Comment réaliser une refonte de site ? Quels critères motivent une refonte de site web ? Et qu’est-ce qu’une refonte de site comprend, au juste ? Si vous vous posez ces questions et plus encore, poursuivez votre lecture. Nous allons répondre à chacune d’elles !

Pourquoi refondre son site web ?

Chez Walk The Line, nous nous retrouvons dans plusieurs de ces exemples. En bons professionnels du web, nous avions conscience qu’il était temps d’agir. Et c’est ce que nous avons fait ! Si vous vous demandez quels changements nous avons opérés sur le site, nous vous invitons à poursuivre votre lecture. Croyez-nous, cela pourrait vous donner quelques idées… 😉

Qu’est-ce qui a motivé la refonte du site de l’agence ?

Comme nous venons de le voir, il existe une myriade de raisons pouvant inciter un professionnel à refondre son site internet. Notre cas ne fait pas exception. Il y a de nombreuses raisons qui nous ont poussés à refondre le site de l’agence !

Toutefois, quelles que soient ces dernières, il existe un fil rouge qui les connecte ensemble. Au travers de la refonte graphique, technique, des nouvelles fonctionnalités… Toutes ces motivations abritent un seul et même objectif : offrir une expérience utilisateur optimale qui vous distingue de vos concurrents.

En effet, c’est votre unicité qui fait de vous (et de votre entreprise) un acteur incontournable. Que ce soit grâce à la qualité de vos produits, de vos services, de la compétence de vos équipes… Vos clients choisissent de travailler avec vous car vous vous distinguez de vos concurrents.

Un site internet professionnel, qu’il soit vitrine ou marchand, est l’extension de votre entreprise. Il en fait partie intégrante et doit proposer une expérience utilisateur aussi irréprochable que possible. Il en va de votre image de marque ! Et croyez-nous, vous pourriez être grandement surpris de l’impact d’un site internet offrant une expérience utilisateur discutable, voire médiocre, sur vos utilisateurs et clients…

C’est pourquoi nous avons pris la décision d’agir dès que le besoin s’en est fait sentir. Sans plus attendre, découvrons cela ensemble !

Offrir une expérience utilisateur (UX) optimale

Si vous avez lu cet article jusqu’ici, alors vous savez que l’optimisation de l’expérience utilisateur, ou UX pour user experience, est le critère phare d’une refonte web réussie. Vous aurez beau affiner votre offre de produits ou services, ajouter des couleurs tendances à votre design et des fonctionnalités en long et en large, tout cela ne vaut rien si votre UX est pauvre.

La précédente version du site internet de l’agence était la 1.0, conçue en 2019. Autrement dit, c’était notre toute première version ! À l’époque, elle avait été conçue pour répondre aux besoins du moment (logique, me direz-vous). Toutefois, nous avons depuis enrichi notre culture web et notre expérience d’un point de vue global. Nos besoins et ceux de nos clients avaient évolué et nous ne nous retrouvions plus dans cette interface. C’est le signal d’alarme ! Comment véhiculer un message clair et offrir une expérience utilisateur optimale si nous-mêmes n’en étions plus convaincus ?

L’équipe, qui a évolué depuis la version 1.0 du site, a donc amorcé une refonte du site. Elle s’est déroulée en plusieurs étapes. La finalité restait bien évidemment d’offrir une expérience utilisateur optimale.

Repositionnement SEO et optimisation SEO

Commençons par le repositionnement SEO, ou pivot SEO.
Aujourd’hui, l’agence Walk The Line est établie à Saint-Céré, dans le Lot (46). Toutefois, ça n’a pas toujours été le cas ! Après sa création en 2017, l’agence s’est installée à Bordeaux. Elle lui a préféré les côtes Basques au cours de l’année 2019. Autant vous dire que tous ces changements ont nécessité un travail SEO en profondeur.

Votre référencement naturel est capital pour votre site. Négliger celui-ci, c’est priver votre site d’une visibilité conséquente. Au niveau national certes, mais également au niveau local !

En effet, travailler des expressions valorisant des termes locaux (votre ville, votre zone de chalandise, votre département, etc) permet d’optimiser votre référencement naturel au niveau local. Par conséquent, vous favorisez ainsi vos chances de remonter dans les résultats de recherches de prospects de votre zone de chalandise.

L’agence a donc connu un repositionnement majeur, en ce qui concerne les expressions liées au référencement local. Tous les textes du site incluant des expressions locales devaient être retravaillés lors de notre phase de rédaction. “Lot”, “Saint-Céré”, “46”, “Occitanie” devaient remplacer “Bayonne”, “Landes” et autres “Pays-Basque”.

Présenter nos nouvelles offres et rendre les existantes plus claires

Comme nous vous l’expliquions, la première version du site de l’agence datait de 2019. En trois ans, les services proposés par l’agence ont évolué. La raison derrière cela est simple. Nous avons à cœur de proposer des solutions au plus proches des besoins de nos clients.

Aussi, présenter nos nouvelles offres était indispensable. Dans la continuité, nous souhaitions actualiser nos services proposés en retirant ceux qui ne le sont plus aujourd’hui. Enfin, toutes les offres devaient être retravaillées, pour que leur présentation soit plus claire pour les utilisateurs.

Optimiser les performances web et le référencement naturel

Partie importante de l’expérience utilisateur mais également du référencement naturel, je parle bien des performances web. Pour faire simple, les performances web permettent de mesurer le niveau d’optimisation technique d’un site web. On mesure cela à l’aide de diverses données, appelées métriques ou metrics en anglais. Ces métriques peuvent être la vitesse d’affichage de la page, le poids des différents médias présents sur vos pages, la sécurité de votre site web, etc. De très nombreux critères sont pris en compte.

Le score de performance de votre site internet peut être évalué grâce à divers outils. S’assurer des performances de ses pages web est incontournable. En effet, elles témoignent d’une partie de l’expérience utilisateur. On peut facilement comprendre qu’un site web dont les pages prennent du temps pour s’afficher n’offre pas une expérience des plus agréable…

Les performances ont également un impact sur votre référencement. Comme dit plus haut, un site web aux performances web pauvres sera synonyme de mauvaise expérience utilisateur. Et un utilisateur mécontent est un utilisateur qui ne revient pas ! Pour les moteurs de recherche, dont Google, ceci est un premier signal d’alarme.
Ensuite, celui-ci a tendance à déprécier ces derniers. Plutôt, il va valoriser les pages d’un site web concurrent, aux performances plus optimisées.

Il était donc incontournable de travailler soigneusement cette partie-là.

En ce qui concerne le SEO, lui aussi à droit à sa part d’optimisation. Si le référencement naturel est un travail de fond, celui-ci résulte de mois de travail. Il y a le travail réalisé au moment de la phase de conception (avec l’étude de mots-clés, l’élaboration de l’arborescence, etc) mais aussi lors de la phase de développement, et même après la mise en ligne !

En effet, le SEO est non seulement sujet à évolution mais en plus de cela, il renferme une myriade d’axes d’optimisation. Si certains sont connus et répandus (optimisation des textes, titres correctement rédigés, nomenclature des médias, etc), d’autres le sont moins. Référencement par l’image, soin de balises title, création de logo optimisé… La liste est longue et abrite un travail permanent.

Refonte de site web : comment procéder

Alors, maintenant que l’on sait pourquoi refondre un site web et quels sont nos objectifs, comment on la met en place ? En voilà une excellente question ! Chez Walk The Line, nous réalisons nos refontes de site web selon la même méthodologie. Vous pouvez d’ailleurs retrouver toutes les étapes de notre méthodologie dans divers articles de notre blog !

Nous pouvons d’ores et déjà vous dire qu’entre une refonte de site et une création de site, des similitudes existent. Refonte ou création, si les objectifs attendus en termes de performances, SEO, expérience utilisateur et plus sont identiques, alors on peut travailler de la même manière, ou presque. Vous verrez que quelques différences existent malgré tout.

L’étape de conception d’une refonte de site

La phase de conception est la première étape d’une refonte de site. Celle-ci est cruciale ! Tout comme vous n’envisageriez pas de construire votre maison sur des fondations bâclées (à moins que vous n’ayez un goût prononcé pour le danger), il n’est pas recommandé d’avoir la main légère au moment de cette phase.

Comme nous vous l’expliquions précédemment, l’optimisation de votre SEO se fait dès la phase de conception, avec l’étude de mots-clés puis l’élaboration de l’arborescence en conséquence. 

Bien entendu, ces mots-clés ne sortent pas d’un chapeau magique (pas encore, du moins). Dans le cadre de la refonte de l’agence, nous avons donc utilisé divers outils pour nous y aider. UberSuggest, la Google Search Console ou encore YourTextGuru ont été nos principaux outils lors de cette phase. Tous les mots-clés ainsi obtenus ont été analysés, répertoriés et exportés. Une sélection manuelle a ensuite permis de dégager les mots-clés les plus pertinents en termes d’orientation SEO. Suite à quoi nous avons élaboré l’arborescence de la version 2.0 du site.

Cette étape est longue et peut être fastidieuse pour certain·e·s. Elle peut sembler assez abstraite également. Chez Walk The Line, nous avons cependant conscience qu’elle est essentielle dans un tel projet de refonte de site web. Une arborescence bien conçue et qui répond aux attentes des utilisateurs est également un élément phare lorsque l’on cherche à optimiser l’UX de son site.

Zoning et Design

La phase de conception entérinée, nous avons pu passer à l’étape suivante : la réalisation des zonings, puis des webdesigns. Les zonings, aussi appelés wireframes ou maquettes fil de fer, sont incontournables. Ces maquettes ont pour but de poser les bases de la future interface de chaque page. Peu de texte et aucun élément graphique à ce stade. On vient dessiner chaque paragraphe de texte, image, bannière, menu de navigation à l’aide de rectangles, de carrés, d’ovales, etc.

L’objectif est de se focaliser sur l’interface, sa navigabilité. Est-ce que mes parcours de navigation sont logiques ? Correspondent-ils aux attentes de mes futurs utilisateurs ? Il est essentiel de se poser ces questions. En effet, plus tôt on décèle les erreurs de conception, plus vite on peut les rectifier. Surtout, plus simplement ! Mieux vaut devoir défaire une demi-journée de travail que plusieurs mois…

Les zonings ainsi réalisés sont ensuite étudiés. Si rien n’est à redire sur l’interface, sa navigabilité et les liens prévus entre les différentes pages, alors le zoning est considéré comme validé. On peut dans ce cas passer à la phase de webdesign.

Autrement, le zoning repart pour correction. Dans ce cas, nous travaillons à son optimisation en prenant en compte les retours apportés. Ce système de navette est très répandu en méthode de travail Agile. Celle-ci repose sur une approche itérative et collaborative. En d’autres termes, on travaille en réalisant des “lots de tâches” (aussi appelés sprints). Chaque membre du projet en est un acteur à part entière. Travailler en méthode Agile, c’est aussi être capable de suivre à la fois l’expression de besoins initiale du client ainsi que les besoins liés aux évolutions du projet. La méthode Agile est donc l’éponyme de la capacité.

Ce n’est qu’après un nombre indéterminé de navettes entre le pôle chargé du design et celui chargé de piloter le projet que l’on peut passer à la phase de webdesign.

L’étape de webdesign est généralement l’une des plus appréciées par nos clients. Lors de celle-ci, nous reprenons les zonings précédemment réalisés et les dupliquons. Ne perdre aucune étape du projet est très important.

Ces éléments dupliqués vont servir de base à notre webdesign. Bien entendu, cette logique appliquée aux projets de nos clients l’est également dans le cadre de la refonte du site de l’agence.

À partir des zonings, qui placent les bases d’UX, nous apportons des modifications qui permettront de donner vie au futur site. En effet, c’est au cours de cette étape que les couleurs, typographies, photos, menus de navigations, boutons, voire les textes définitifs (et déjà optimisés pour le SEO bien entendu 😉) sont ajoutés. Cette liste d’éléments n’est pas exhaustive.

Pour résumer cette étape, le webdesign de chaque page doit être aussi fidèle que possible aux futures pages web. Nous verrons dans les faits qu’il arrive que ces dernières ne soient pas tout à fait conformes aux webdesigns, mais c’est un autre sujet.

Les webdesigns de l’agence ont été particulièrement intéressants à réaliser. Travailler pour son entreprise a toujours une saveur différente ! Qui plus est, il fallait créer ces derniers en se basant sur la nouvelle charte graphique de l’agence, les nouvelles offres… Une infinité de possibilités s’offrait à nous !

Pour y voir plus clair et déterminer une direction graphique à suivre, nous avons réalisé une veille graphique en amont. Celle-ci permet de garder l’œil ouvert sur les nouveautés graphiques, les tendances, mais aussi les bonnes idées en termes d’UI/UX. 

Il ne restait plus qu’à passer à l’action. Nous avons pour habitude, chez Walk The Line, de designer le header et le footer des pages en premier lieu. Ce projet a également été pensé mobil first, c’est-à-dire, pensé pour une utilisation mobile.

Il arrive souvent que les webdesigns des sites soient conçus pour une utilisation desktop (ordinateur). Cependant, il arrive très fréquemment que les sites web soient consultés sur mobile. En 2022, on estime à 92% le taux d’utilisateurs web mobile !

Alors lorsque les webdesigns conçus pour ordinateur doivent être adaptés pour les mobiles… Certains grincent des dents.

Imaginez : vous naviguez sur un site web “A” depuis votre ordinateur. L’expérience est satisfaisante et vous naviguez sans difficulté. Deux jours plus tard, vous souhaitez retourner sur ce site depuis votre mobile. Ce même site web “A” est presque méconnaissable : éléments masqués car pas adaptés à une consultation sur mobile, taille du texte trop petite, boutons trop rapprochés, animations qui ralentissent le chargement… Bref, ce site offre une expérience extrêmement décevante sur mobile.

À l’ère du tout numérique et à quelques rares exceptions, ne pas concevoir un site internet en mobile first est une grande erreur. Travailler dans cette logique permet d’assurer une adaptation parfaite, de l’affichage mobile vers l’affichage desktop.

Tout comme pour les zonings, les webdesigns sont soumis à un système de navette. Le fonctionnement est identique : méthode Agile, chaque tâche est soumise à vérification pour s’assurer que le projet ne comporte pas d’erreur ou d’anomalie.

Les webdesigns achevés, nous passons à l’intégration et au développement sur-mesure.

Intégration et développement sur mesure

Le travail réalisé par l’agence, y compris dans la refonte de son site web, est transversal. Les différentes étapes sont interconnectées. L’étape de l’intégration ne fait pas exception ! Ainsi, un soin particulier a été apporté au SEO, à la sécurité, aux performances web ainsi qu’à l’accessibilité tout au long de l’intégration des pages. Ceci a été rendu possible grâce aux connaissances de l’équipe, mais aussi grâce à des outils soigneusement choisis.

En effet, tout comme pour la première version du site, nous avons travaillé avec le CMS WordPress. Que ce soit pour sa sécurité, sa simplicité d’utilisation ou sa souplesse, des millions d’entreprises à travers le monde l’utilisent. C’est notamment pour cette dernière raison que nous avons choisi ce CMS. Il nous permettait de modeler un site web en phase complète avec nos besoins et ceux de nos clients. Dans notre cas, nous avions besoin de types de posts personnalisés.

Par défaut, WordPress propose deux types de posts différents. 

• Le type de post “pages”, qui permet de créer des pages web, ayant pour but de présenter du contenu statique,
• Le type de post “article”, qui permet de créer des articles de blog, ayant pour but de présenter du contenu dynamique.

Il arrive cependant que les besoins de nos clients, ou de nous-même dans notre cas, exigent davantage de types de posts. Par exemple, sur le site, vous pouvez trouver une FAQ. Celle-ci contient une liste de questions, associées à des réponses.

Pour rendre ces contenus aisément administrables par l’ensemble de l’équipe et assurer leur pérennité, nous avons développé un type de post personnalisé, que nous avons nommé “FAQ”. 

Tous les posts FAQ sont listés sur leur page d’archive, c’est-à-dire, la page qui recense l’intégralité d’un même type de post. Cette page, c’est la page “FAQ”. Chaque fois qu’une nouvelle question/réponse est ajoutée sous la forme d’un type de post FAQ, la page éponyme s’enrichit d’une nouvelle entrée.

Pourquoi faire cela plutôt que de renseigner manuellement chaque question/réponse directement via un constructeur de pages ? 🤔

• Gagner du temps : en créant un type de post sur mesure, on ajoute une nouvelle entrée au back office du site qui va permettre de gagner un temps considérable. Pas besoin de copier/coller des blocs Gutenberg, des lignes de code, des widgets Elementor ou autre outil. Ajouter une FAQ est aussi rapide pour nous que de créer une page !
• Accessible et simple d’utilisation : qui dit intégration rapide d’un type de post FAQ (ou tout autre type de post personnalisé 😉 ) dit forcément simplicité d’utilisation. Le fonctionnement est identique aux autres types de post : pas besoin d’apprendre de nouvelles fonctionnalités.
• Minimiser le risque d’erreur humaine : Multiplier les copiés/collés, se relire à chaque fois, vérifier maintes fois avant de valider… Cela vous exaspère ? Comme nous vous comprenons ! En plus de ça, plus nous manipulons des éléments, plus nous augmentons le risque d’erreur humaine. Les types de posts personnalisés permettent de minimiser drastiquement ce risque.
• Maintenance simple : Corriger une phrase, un tarif, des horaires ou plus encore est d’une simplicité enfantine. Les types de posts étant conçus pour des besoins précis, ils y répondent toujours entièrement. Aussi, leur maintenance se fait simplement, en allant directement à l’essentiel.

Cette liste n’est pas exhaustive, mais ces quelques avantages ont conquis nos cœurs de professionnels du web amoureux du travail efficace, pérenne et bien fait.

Pour créer des types de posts personnalisés (que vous pouvez abréger “CPT” pour Custom Post Type si vous voulez frimer un peu), encore faut-il savoir de quels types de posts nous avons besoin !

C’est pourquoi le webdesign est étudié par le pôle développement. Il va l’analyser pour déterminer plusieurs choses :

• les différents types de posts personnalisés à créer,
• les différents blocs Gutenberg à prévoir en développement, puisque nous avons décidé de n’utiliser aucun constructeur de page.

Comment fait-on ? C’est simple. On prend les webdesigns, on les imprime, et on annote chaque bloc ou type de post personnalisé que l’on identifie. Une fois que la liste est exhaustive, on peut passer à la suite, à savoir, la création des blocs Gutenberg et celle des CPT.

Dans le second cas, on utilise le plugin “CPTUI” ainsi que le plugin “Custom Fields” pour créer, dans le cas du premier, les types de posts, et les groupes de champs à leur associer pour le second.

En effet, un type de post personnalisé, c’est uniquement une boîte vide. Dire de notre CPT FAQ qu’il est une FAQ en le nommant comme tel, ne fera pas de lui une FAQ.

Pour ce faire, nous devons lui assigner des champs (qui sont donc personnalisés également). Ces derniers contiennent le contenu de notre choix (texte, chiffres, adresse web, etc…) et permettent d’enrichir un CPT avec des informations choisies.

À titre d’exemple, nous avons réalisé la page “FAQ” en créant un CPT qui contient des champs personnalisés “question” et “réponse”. En plus de ces champs, nous avons ajouté un champ “catégorie”. Comme vous pouvez le constater, trois catégories de questions sont visibles sur cette page :

• A propos de WordPress,
• A propos de PrestaShop,
• A propos de l’agence.

Ces catégories ont pour objectif d’aider l’utilisateur à trouver rapidement et intuitivement les informations dont il a besoin (expérience utilisateur, navigabilité… Vous commencez à connaître nos maîtres-mots).

Pour être le plus efficace possible et minimiser au maximum le risque d’erreur, nous avons choisi d’assigner à chaque fois une catégorie à chaque type de post “FAQ”. 

Cela permet d’afficher dynamiquement le type de post au bon endroit dans la page dédiée, sans plus d’interventions.

Les custom post type ont donc de très nombreux avantages et permettent de répondre à une très large variété de besoins. Nous vous avons présenté nos types de post “FAQ”, mais nous avons également un type de post “projet” dont l’archive constitue l’intégralité des réalisations de l’agence. En ce qui concerne nos clients, nous avons créé des CPT “offre d’emploi” pour Aspire Work, un CPT “Exposants” et un autre “Fournisseurs” pour Rest’Hôtel, etc.

Évolution des offres de l’agence

Une refonte de site internet est aussi l’occasion de faire un peu de nettoyage du côté de vos offres. Proposez-vous toujours le même catalogue de prestations ? Avez-vous acquis du nouveau matériel, de nouvelles connaissances, suivi des formations ? Avez-vous cessé de proposer certains services ou au contraire, en proposez-vous de nouveaux ? Faire le point sur les produits et offres proposés est important, d’autant plus lors d’une refonte de site. 

Du côté de l’agence, nous avons actualisé nos offres. Nous avons supprimé du site celles qui ne sont plus d’actualité et en avons ajouté de nouvelles.

Du côté de nos prestations de création et refonte de site, nous avons refondu les pages qui leur sont consacrées. Explication des outils utilisés, des solutions techniques, retour d’expérience, partage de projet… Tout est fourni à nos utilisateurs pour trouver toutes les réponses à leurs questions et comprendre intégralement l’étendue de notre savoir-faire. C’est pourquoi nous avons distingué la création de site vitrine de la création de site ecommerce ainsi que de la refonte de site. Cela nous permet aussi de présenter distinctement les outils et solutions utilisées !

Ce n’est pas tout. Pour compléter cela, nous avons ajouté une nouvelle page. Celle-ci explique la méthodologie de l’agence en détail. Savoir comment chaque projet est traité au cœur de l’agence nous semblait être indispensable ! Au-delà d’attester de l’expérience de l’agence, elle est aussi la démonstration de ses valeurs. Travail en méthode Agile, approche centrée sur les besoins du client, articulation des projets… Autant d’éléments indispensables ! Cette page permet de comprendre la logique avec laquelle nous abordons chaque projet.

Une refonte de site internet, c’est aussi l’occasion de proposer des offres plus proches des besoins de ses clients. Dans notre cas, nous avons profité de cette opportunité pour lancer une nouvelle prestation : l’offre de suivi de site internet.

Après la mise en ligne de leur site internet, nos clients rencontrent souvent le même problème. Ils n’ont pas le temps d’apprendre à analyser ce qui se passe sur leur site web. Et pour cause ! L’analyse de données et l’élaboration d’un plan d’actions, c’est un métier à part entière (ou dans notre cas, un pan de notre métier). Pourtant, cette partie est nécessaire pour apprendre à mettre en place des actions web logiques et pertinentes.

En tous les cas, ceci prouve bien ce que nous vous expliquions un petit peu plus tôt : une refonte de site internet peut se jouer autant sur l’aspect graphique d’un site, que sur l’aspect technique ou d’un point de vue du contenu.

En ce qui concerne les formations données par l’agence, là aussi, une actualisation a été réalisée. L’agence compte désormais deux formations : la formation WordPress (que l’on ne présente plus !) et la formation Trafic Web. Celle-ci fait justement écho à l’offre de suivi de site internet dont nous vous parlions un peu plus tôt. Cette formation a pour objectif de transmettre à nos apprenants notre savoir-faire en termes d’analyse du trafic de son site internet mais aussi les actions qui peuvent être mises en place en conséquence. Celles-ci sont désormais centralisées sur une seule et unique page, dédiée à la présentation de nos formations.

Trafic web et optimisations SEO

L’une des règles d’or lorsque l’on met en place une refonte de son site internet est la conservation du SEO et du trafic web. Créer de nouvelles pages, de nouveaux types de posts, produits et autres, c’est bien. En supprimer d’autres, qui ne sont plus d’actualité, c’est très bien aussi. Mais qu’advient-il du référencement naturel de ces pages ? Du trafic web qui en découlait ?

Excellentes questions, auxquelles nous allons apporter d’excellentes réponses 😉

Effectivement, supprimer une page web occasionne des dégâts tant d’un point de vue du référencement naturel que du trafic web. Cette page disparaissant du jour au lendemain laisse les robots des moteurs de recherche, chargés du SEO, et les utilisateurs, frustrés. Mais où est donc passé ce contenu ?

C’est pourquoi il est indispensable de mettre en place des redirections après toute suppression de page web. Ces redirections peuvent être aisément mises en place à l’aide d’une extension WordPress, par exemple. Une redirection consiste à faire pointer l’ancienne URL, celle qui sera supprimée, vers une nouvelle adresse. L’URL vers laquelle doit être effectuée la redirection doit être aussi pertinente que possible. Par exemple, si je ne vends plus de t-shirt bleu foncé mais que je vends des t-shirts bleu clair, je peux rediriger les utilisateurs vers ce produit. En effet, ces derniers seront probablement plus intéressés par un t-shirt bleu clair que par un parapluie violet, par exemple.

Les avantages d’une redirection sont multiples :

• pas de perte référencement naturel : en mettant en place une redirection, tout le jus SEO est transféré à la nouvelle URL. Autrement dit, aux yeux des robots de Google, on envoie le signal “je vous informe que cette page n’est plus disponible, mais à la place, il est important que celle-ci la remplace”.
• l’expérience utilisateur n’est pas impactée : une redirection est dans une très large majorité des cas effectuée sans même que l’utilisateur ne le ressente. Ainsi, il n’a pas la désagréable sensation de voir le contenu qu’il cherchait, disparu, avant d’être téléporté sur une autre page comme par magie. Tout se passe en un instant, rendant l’opération quasi-invisible.

Bien entendu, si vous avez cessé de proposer un service ou que vous n’avez aucun produit équivalent à proposer, vous pouvez rediriger vos utilisateurs vers une autre page. Il faut simplement garder en tête qu’une redirection doit être logique pour tout le monde et ne pas perturber l’expérience de navigation.

Ainsi, nos anciennes pages dédiées aux créations de site web avec Symfony, ou nos formations PrestaShop, redirigent respectivement vers notre page présentant nos prestations et notre page dédiée à la présentation de nos formations. Cependant, nous n’avons pas réalisé ces redirections à la main. Enfin, pas tout à fait. Je vous laisse imaginer le temps que cela prendrait pour rediriger les milliers de produits supprimés par un site ecommerce… En plus d’être un gouffre en ce qui concerne le temps passé, ça serait aussi un risque d’erreur potentiel extrêmement haut.

Pour mettre ces redirections en place facilement et en minimisant le risque d’erreur humaine, nous avons utilisé deux outils.
Le premier est SEOlyzer. Il s’agit d’un outil d’analyse de logs. Un log, c’est un évènement qui correspond à l‘accès à votre site internet par un utilisateur ou un user agent (robots des moteurs de recherche par exemple). Ces logs sont enregistrés dans un fichier et leur analyse permet d’en savoir plus sur la façon dont le site est crawlé par les robots.
SEOlyzer est aussi capable de lister de toutes les URL découvertes sur notre site. En d’autres termes, la liste des URL indexées comme non indexées.

Le second outil utilisé est l’extension WordPress « Export All URLs ». Cette extension permet, comme son nom l’indique, de réaliser un export contenant toutes les URL du site dans un fichier. Il suffit ensuite de comparer les URL découvertes avec SEOlyzer et celles avec Export All URLs. Une fois cela fait, on peut ensuite passer à l’étape de correspondance des URL !

Nos données ont donc été extraites sous forme d’un tableau au format CSV. Cela nous a permis de les importer dans Google Sheet. Nous avons désormais sous les yeux un tableau contenant toutes les URL de notre site. Il faut désormais dire, pour chacune d’entre elles, quelle page correspond. Pour les pages supprimées, il faut donc trouver une équivalence ou rediriger vers une page appropriée. Pour les pages conservées mais dont l’URL a été modifiée, il suffit de mettre dans la case correspondante du tableau l’URL actualisée.

On obtient donc un tableau avec une colonne “anciennes URL” et “nouvelles URL”. Tout ce qu’il reste à faire, c’est importer ce tableau dans l’outil de gestion des redirections d’URL de votre choix. Dans notre cas, nous ne travaillons qu’avec SEOPress. Cette extension WordPress 100% française est une vraie perle en termes de gestion et d’optimisation du référencement naturel de son site ! Dans cet exemple, il se charge de réaliser les redirections en se basant sur le fichier CSV que nous lui fournissons.

L’agence a également connu un repositionnement SEO, ou pivot SEO, en ce qui concerne les expressions liées au référencement local. Tous les textes du site incluant des expressions locales ont été retravaillés lors de notre phase de rédaction. “Lot”, “Saint-Céré”, “46”, “Occitanie” devaient remplacer “Bayonne”, “Landes” et autres “Pays-Basque”.

Le SEO est un travail de fond. Il ne faut pas s’attendre à obtenir des résultats immédiats ! Cela demandera plusieurs mois pour obtenir un positionnement sur ce genre d’expressions. Ce travail n’en reste pas moins crucial.

En ce qui concerne l’optimisation SEO, elle s’est jouée à plusieurs niveaux. Tout cela a débuté bien avant la rédaction des textes des pages !

En effet, nous avons commencé par travailler sur une recherche puis une étude de mots-clés. Celle-ci nous a permis de dégager des mots-clés exploitables pour nos pages web. Ils nous ont permis d’élaborer notre arborescence, c’est-à-dire les pages composant notre site web.

Pour rappel, un mot-clé en SEO est un mot ou groupe de mots correspondant à une intention de recherche d’un utilisateur. Par exemple, si je tape “machine à laver neuve”, il y a fort à parier que mon intention est de renouveler cette partie de mon équipement électroménager.

Chaque mot-clé doit correspondre à une intention de recherche. Chaque page doit être travaillée autour d’un mot-clé unique sur le site, dans l’objectif qu’elle se positionne sur celui-ci. Autrement dit, qu’elle obtienne un bon positionnement dans les résultats des moteurs de recherche sur le mot-clé sélectionné.

À la suite de cette étude, nous avons construit l’arborescence du site Walk The Line 2.0. La raison pour laquelle nous procédons dans ce sens et non l’inverse est simple. Est-il plus simple de porter une paire de chaussures en fonction de sa pointure, ou de choisir sa pointure en fonction des chaussures achetées ? Il va de soi que la première option est naturelle. Il en va de même (ou plutôt, il devrait en être de même) pour tous les sites web. C’est en élaborant l’arborescence de son site internet en fonction des attentes de nos utilisateurs que l’on assure un bon départ SEO à notre site.

Ce travail réalisé au commencement du projet est capital. Il participe grandement à la pérennité du site. Cela nécessite d’y investir un peu de temps, certes. Mais croyez-nous, cela en vaut vraiment la peine !

Bénéfices de la refonte du site : qu’en est-il aujourd’hui ?

Tout ce travail de refonte et d’optimisation, c’est bien beau, mais qu’en est-il au niveau des performances ? De l’expérience utilisateur ? Du référencement naturel ? Tout ceci a-t-il vraiment été utile ? On n’est pas du genre à spoiler, mais on peut déjà vous dire que oui 🤓

Du point de vue de l’expérience utilisateur, il n’existe pas d’outil à ce jour capable de mesurer quantitativement et qualitativement l’expérience utilisateur. Cependant, on peut se reposer sur diverses métriques pour s’en faire une idée aussi objective que possible.

• Réaliser un recueil d’avis : auprès d’un échantillon d’utilisateurs, demander des avis sur la navigabilité, l’accessibilité, l’impression générale, etc. Vous pouvez déterminer autant de critères que vous le souhaitez en fonction de l’objectif de votre enquête. Dans notre cas, nous avons recueilli l’avis d’un groupe d’utilisateurs d’âge, de profession et aux habitudes de navigation différents. D’un point de vue général, tous ont déterminé que la navigation sur le site en version desktop et mobile était agréable et intuitive. Aucun problème de navigabilité n’a été avancé et le contenu a été jugé suffisamment clair. Voilà un bon point qui a ravi l’équipe ! 🤓
• Se fier aux outils de mesure tels que Hotjar : Hotjar est un outil multifonction. Il permet de collecter puis d’analyser les comportements de vos utilisateurs. L’objectif est d’aider à comprendre ce que les visiteurs font réellement sur notre site. Pour cela, on va suivre le comportement du curseur de la souris de l’utilisateur. En effet, entre l’utilisation théorique de celui-ci et son utilisation réelle, il y a parfois un gap ! L’outil fonctionne grâce à un principe de zones chaudes, opposées à des zones froides. Plus l’utilisateur (et son curseur de souris) reste sur une zone, plus celle-ci est qualifiée de chaude. L’inverse se vérifie également. Vous vous demandez pourquoi aucun utilisateur ne semble visiter telle ou telle page de votre site ? Un outil comme Hotjar peut vous aider à le comprendre en analysant le parcours réalisé par vos utilisateurs. Call-to-action trop petit, lien à l’ancre peu explicite ou lien mort, interface pas assez claire… Les raisons sont nombreuses ! Rien ne vaut l’analyse d’une navigation en conditions réelles pour y voir plus clair. Dans notre cas, nous n’avons pas encore utilisé Hotjar. Nous laissons le temps à nos visiteurs d’accomplir leurs premiers parcours.
• Se fier aux données analytiques telles que Google Analytics : si vous voulez des données quantitatives ET qualitatives, rien ne vaut Google Analytics ! Si en plus vous aimez l’analyse de données et les jolis graphiques, vous allez être servi. On ne présente plus l’outil d’analyse d’audience de Google. Présent sur de très nombreux sites web, il permet de suivre la navigation de vos utilisateurs, à condition qu’ils consentent au dépôt de cookies. Bien que son utilisation en France ne soit aujourd’hui plus conforme aux lois RGPD (nous vous en parlerons davantage dans un article à venir), elle l’était encore à l’époque de la première version du site de l’agence. Cela nous a permis d’analyser et comprendre notre trafic web. À partir de l’analyse du comportement de nos utilisateurs, nous avons pu aiguiller notre prise de décision pour la version 2.0 du site. Réaliser des pages avec moins de scroll, des call-to-action plus nombreux et explicites, clarifier la navigation, réduire la profondeur de pages… Les possibilités sont nombreuses. Avec une telle mine d’or d’informations, l’agence n’a pas hésité à prendre le temps de les décortiquer !

D’un point de vue SEO, il est encore un peu tôt pour se prononcer. Rappelons que celui-ci est un travail de fond. Optimisations dès la phase de conception du site, alimentation en contenu riche des pages, alimentation en articles de blog, etc. Là encore, de nombreux axes existent. Cependant, pour mesurer les retombées de ces derniers, il faut du temps ! Le référencement naturel est une question de patience. Ça tombe bien, à l’agence, nous en avons à revendre. Soyez sûrs que nous rédigerons un bel article une fois que nous en saurons davantage.

Nous réalisons toutefois un monitoring des pages avec SEOlyzer, et un autre avec la Google Search Console. SEOlyzer nous permet de suivre le crawl des pages. Quantité de pages crawlés, de pages indexées, profondeur de catégorie parcourue, etc. Cela nous permet de comprendre le comportement des robots des moteurs de recherche et de prendre des décisions en conséquence.

Quant à la Google Search Console, son utilisation nous permet non seulement de suivre la bonne indexation des URL, mais aussi de corriger les problèmes d’indexation le cas échéant. Autre aspect très utile, nous nous servons de cet outil pour connaître les mots-clés sur lesquels nos pages se positionnent.

D’un point de vue performances web, les scores sont sans appel. Grâce à l’outil PageSpeed Insights, nous avons pu obtenir un score de performances. Celui-ci est noté sur 100. Selon la note obtenue, divers axes d’amélioration sont proposés. Optimisation des médias, concaténation des fichiers JS, réduction des ressources non utilisées, préchargement des polices web en cas de polices personnalisées… Les possibilités sont encore une fois nombreuses. Tout ceci est grandement utile ! Un vrai gain de temps pour optimiser ses performances web efficacement.

En ce qui concerne le score obtenu par l’agence, nous vous laissons constater cela par vous-même. Que ce soit en desktop ou sur mobile, nous ne sommes pas loin du sans-faute ! Ce score n’est pas à prendre pour argent comptant, mais il reste un indicateur fiable. Un score trop bas peut être révélateur d’une mauvaise expérience utilisateur. Souvenez-vous de l’expérience utilisateur intrinsèquement liée aux performances web… 😉

En conclusion, la refonte du site de l’agence est bénéfique sur divers plans. Si certains ont déjà prouvé que la refonte avait porté ses fruits, d’autres ne tarderont sans doute pas. Au-delà de ça, voir son site web professionnel coller parfaitement à son image de marque est fantastique ! 

En effet, le site internet de votre entreprise constitue également votre carte de visite. Elle témoigne de votre professionnalisme, de votre expertise, etc. Savez-vous que 75% des internautes se font une idée du sérieux de l’entreprise après seulement quelques secondes de navigation sur son site ? Mieux vaut viser juste.

C’est pourquoi il est faux de reléguer la refonte de site au rôle de prestation secondaire. Chez Walk The Line, nous accordons le même soin à la refonte de site internet qu’à leur création.

Nous espérons que cet article expliquant la refonte de notre site web vous a été utile. Si vous êtes ici, c’est peut-être parce que vous envisagez de refondre le vôtre. Si tel est le cas, pourquoi ne pas confier votre projet à une agence web qui a parfaitement cerné les enjeux d’une refonte de site web ? 😉

Dans la même catégorie