Vous avez décidé la refonte de votre blog. Ou vous y pensez. Mais une refonte n'est pas une opération anodine, elle ne s'improvise pas. Passons en revue les étapes essentielles à la réussite de ce projet.
Cet article prend 12 minutes à lire et comporte 2781 mots.
Décider de la refonte d’un site ou d’un blog n’est jamais une décision anodine. Vous avez un lectorat, et un référencement naturel acquis au fil des mois et des années. Et bien sûr, vous ne voulez perdre ni l’un, ni l’autre.
Si vous avez déjà tenté des modifications, même relativement légères (comme un changement d’extension), vous avez pu vous en rendre compte : ce n’est pas forcément aussi simple que ça en a l’air.
Techniquement déjà : il faut vérifier chaque page potentiellement impactée par la modification, procéder éventuellement à des ajustements — et parfois même (dans de rares cas) vous aurez à faire machine arrière.
Et psychologiquement aussi : le lecteur peut-être désorienté, refuser l’évolution, surtout en France où nous sommes tous plus ou moins râleurs (plutôt plus que moins, d’ailleurs), question de principe — il ne faudrait pas délaisser un sport national ?
Phases préliminaires
Alors une refonte, ce n’est pas une simple opération de maintenance que l’on va programmer pour le lendemain. Avant même de la lancer…
1 — Prenez le temps de la réflexion
Exactement comme vous feriez pour le lancement d’un nouveau site, d’un nouveau produit. Il y a des enjeux, la refonte a un prix et il faut calculer ce coût avant tout.
Par coût, je ne pense pas uniquement à l’aspect financier du projet. Il va falloir également investir des ressources humaines. Même pour votre blog perso, vous aurez a minima à vous investir personnellement.
La refonte n’est pas une fin en soi, si vous la souhaitez c’est pour obtenir des résultats. Alors posez-vous les bonnes questions :
- Est-ce le bon moment pour lancer la refonte ?
- Pourquoi ai-je besoin de refondre ou de restructurer mon blog ? Qu’est-ce que j’attends de cette opération ?
- De quelles nouvelles fonctionnalités ai-je besoin pour atteindre mes objectifs ?
- Et quelles sont les fonctionnalités dont je n’ai plus besoin (inutiles ou contre-productives) ?
- Quels sont les points annexes que je peux changer ou améliorer (autant profiter de la refonte) ?
De la réponse à ces premières questions, vous pourrez déjà tirer une ligne directrice. Si vous n’avez pas de réponse à plusieurs questions, et surtout aux questions 1 et 2, c’est que la refonte n’est certainement pas une priorité pour vous. Et tant que vous n’aurez pas de réponse, inutile de vous lancer dans un tel projet.
Prenez une feuille, un stylo et notez tout ce qui vous passe par la tête [ en rapport avec le projet — si vous vous souvenez qu’il faut organiser la fête d’anniversaire de la petite dernière, prenez une autre feuille, votre site n’a pas besoin de confettis et votre adorable pimprenelle n’a pas à être référencée sur Google 😉 ]
Utilisez des post-it : un par idée pour pouvoir les classer ensuite (important, secondaire, à conserver, à revoir…). Vous pouvez même utiliser des post-it de couleurs différentes pour classer par domaine (graphique, structurel, fonctionnel, etc.) ou en fonction de la personne qui a proposé la modification.
N’hésitez pas non plus à en parler autour de vous, et pas uniquement au premier cercle de personnes qui gravite autour de ce projet (votre moitié ou vos collaborateurs ne vont pas être objectifs). Notez bien les remarques que l’on vous fait sur une feuille — que ces remarques vous paraissent pertinentes ou non. Vous y reviendrez ultérieurement.
Quand j’ai décidé la refonte de mon blog, j’ai posé des questions à des lecteurs, à des amis, à des professionnels dans mon entourage, concernant leur ressenti par rapport aux points que je souhaitais modifier. Ce sont eux qui m’ont permis de valider le bien fondé de ma réflexion, et qui m’ont fait mettre le doigt sur des points auxquels je n’avais pas même pensé.
Vous n’en êtes peut-être pas non plus à votre première refonte, et vous avez dans ce cas à l’esprit les erreurs commises précédemment : notez-les, afin d’éviter de les refaire (vous en ferez de toute façon, les mêmes ou d’autres).
Votre feuille est toute gribouillée ? Plus rien à rajouter, a priori ? Alors utilisez-la et…
2 — Rédigez un cahier des charges
Il peut être très succinct, tenir en trois lignes ou en trois pages en fonction de votre projet de refonte : simple refonte visuelle, refonte structurelle (avec changement dans la structure des permaliens par exemple) ou refonte totale (visuelle, fonctionnelle, structurelle…), et en fonction de chaque élément identifié.
Si vous gardez le même thème par exemple, une ligne suffira pour en faire état. Et si vous repensez la structure complète (rubriques, hiérarchie des pages…) il va falloir décrire la nouvelle structure en détail, indiquer les correspondances et les différences avec la structure actuelle.
Pensez aussi aux implications qu’auront ces modifications sur votre référencement : il est indispensable de créer un instantané du site avant refonte (avec le fichier sitemap.xml par exemple) pour pouvoir créer les redirections qui vous permettront de conserver votre référencement.
Allez au-delà du périmètre initial : il serait dommage de ne pas profiter de la refonte pour revoir votre stratégie SEO par exemple, même si elle ne faisait pas partie des points auxquels vous aviez pensé initialement, de ne pas prendre en compte la qualité de l’hébergement alors que c’est un point essentiel tant pour améliorer le référencement que pour réduire le taux de rebond.
Trois points à considérer, même s’il ne s’agit pas des points que vous considérez comme essentiels, ou que vous n’aviez pas prévus d’inclure dans la refonte :
- passer votre blog en https
- avoir un design adaptatif, ou mieux, pensé pour les terminaux mobiles (mobile first)
- optimiser la taille et le poids de vos images
Ces trois points sont essentiels pour votre référencement, alors, si votre blog n’est pas aux normes actuelles, profitez de la refonte pour les mettre en place.
Après un premier jet, laissez votre cahier des charges de côté quelques jours, puis revenez‑y. Vous allez le peaufiner, y apporter des modifications, détailler certains points, peut-être en supprimer d’autres. Gardez-en quand même une trace, pour y revenir dans un troisième temps, avant de valider la version définitive du cahier des charges.
À moins que vous n’ayez déjà craqué pour un thème bien particulier ou pour une extension spécifique, ce n’est pas le moment de poser ces choix. Ils font partie des tâches que vous avez à lister, en définissant de manière plus ou moins exhaustive les points essentiels (exemple : thème adaptatif, ou ‘mobile first’, avec — ou sans — méga-menu, pré-optimisé, ‘AMP ready’ ou pas, livré avec des extensions particulières, etc.). N’oubliez pas : on est sur un cahier des charges, pas sur un storyboard.
Laissez à nouveau passer quelques jours (j’ai bien dit quelques jours, pas quelques heures — la refonte n’a pas lieu d’être lancée dans l’urgence). Reprenez vos notes initiales, revoyez chaque copie du cahier des charges en incluant les points supprimés en cours de route, pour élaborer la version finale.
À partir de cette étape, il vous faudra également décider de faire appel ou pas à un (des) professionnels(s) pour tout ou partie de ce projet. La décision peut-être prise plus tard, même après que vous ayez commencé la refonte en elle-même.
Cahier des charges validé ? Alors on passe à…
Pour certaines des étapes qui suivent, vous trouverez des ressources intéressantes sur ce blog ; je les cite à la fin de chaque étape.
3 — L’état des lieux
Récupérez toutes les données possibles pour la version actuelle de votre blog (les statistiques détaillées feront l’affaire) :
- le nombre de visiteur par jour, semaine, mois, année
- les pages les plus consultées
- le taux de rebond (même si cette donnée est à analyser avec précaution — elle n’a pas la même valeur sur un site marchand et sur un blog, un internaute qui a lu un article dans son intégralité doit-il être compté…)
- les clics sur vos liens internes (mots clés, barre latérale, liens dans l’article, etc.)
Vous pourrez ainsi comparer avec les données que vous récolterez ultérieurement, après refonte.
Effectuez une sauvegarde complète de votre blog et récupérez un plan complet du site (incluant toutes les pages, celles des fichiers médias incluses, si vous en faites usage). Vous en aurez besoin pour établir une correspondance exacte au niveau des liens entrants, depuis les moteurs de recherche et depuis les sites qui vous référencent.
Enfin, testez la rapidité de votre blog avec Pingdom par exemple. C’est un facteur important, surtout pour la navigation depuis un terminal mobile.
À lire sur le blog
Héberger son site WordPress sur un VPS OVH
La refonte du blog
4 — Choisissez les outils de la refonte
Avant de lancer les grands chantiers, c’est le moment de faire des choix concrets, pour l’hébergement, pour le moteur de blog éventuellement (mais vous avez choisi WordPress ), pour le thème, pour les extensions — en fait pour chaque point listé sur votre cahier des charges.
Si WordPress fait partie des nouveautés pour vous (vous pouvez très bien avoir un blog sous Medium, Ghost, Blogger, Tumblr, Movable Type, TypePad ou SquareSpace par exemple), il existe des outils pour migrer vos données. Et si par hasard vous avez décidé de quitter le monde merveilleux (même s’il n’est pas parfait) de WordPress, sachez que c’est inconcevable que c’est impossible possible aussi, chaque plateforme proposant ses propres outils d’import / export. Mais je ne pourrais pas vous conseiller… et toc ! 😛
En aparté, si vous avez décidé d’un choix de plateforme autre, et si la propriété de vos articles vous importe, lisez attentivement les conditions générales avant de vous engager : certaines plateformes s’approprient votre contenu, une fois migré, il leur appartient et ils peuvent en faire (plus ou moins) ce qu’ils veulent, donc par exemple le réutiliser sans même avoir à vous consulter.
La première place de marché pour la recherche de thèmes et d’extensions, c’est bien évidemment le site wordpress.org avec plus de 5 000 thèmes (dont le thème par défaut en 2017, Twenty Seventeen) et plus de 50 000 extensions (même si toutes ne sont pas compatibles avec la dernière version de WordPress). 100% gratuit, des versions light de thèmes commerciaux qui permettent de tester avant d’acheter — et d’éviter ainsi les mauvaises surprises. Vous serez toujours à même d’acheter la version premium une fois le thème testé.
La deuxième place de marché sur laquelle on trouve des thèmes et des extensions de bonne facture, c’est Envato et ses sites dédiés Themeforest et CodeCanyon. Mais attention ! La qualité y est très variable, on trouve de tout, de l’excellent au très mauvais pour ne pas dire médiocre. Les notes utilisateurs, le nombre de ventes et les commentaires vous permettront de vous faire une idée.
Pour les thèmes, prenez en compte la date de dernière mise à jour — si plus d’un an s’est écoulé depuis, il est probable que le thème ne soit plus maintenu. De même pour les extensions, une extension non compatible avec l’une des dernières versions de WordPress peut avoir été abandonnée par son auteur. Vous risquez de rencontrer des problèmes de compatibilité à plus ou moins long terme.
Si vous devez toucher au code du thème (au-delà de la feuille de style), vous avez le choix entre un éditeur avancé — atom est très prometteur, de même que brackets. Utiliser l’éditeur intégré à l’administration est fortement déconseillé.
À lire sur le blog
Archive des thèmes
Archive des extensions
Des extensions pour faciliter l’administration de WordPress
Centralisez vos bouts de code avec « Code Snippets »
Allégez votre blog avec « Plugin Organizer »
5 — La refonte elle-même
Inutile de vous rappeler qu’il ne faut pas effectuer les modifications sur un site en production, surtout si elles sont relativement lourdes… mais je prends quand même sur moi de vous le rappeler.
Quand on parle de site en production, on parle du site principal que visitent les internautes. Dans notre cas, du blog disponible à l’URL habituellement utilisée.
Deux solutions s’offrent à vous :
- Un site de test en ligne — c’est plus ou moins ce que proposent Siteground avec l’option One-click WordPress Staging disponible pour l’offre GoGeek et WP Serveur sur toutes leurs offres. Sur ces trois plateformes, c’est un clonage de votre site qui vous est proposé, et vous avez la possibilité de passer le site ainsi cloné en production d’un simple clic.
Plesk propose lui aussi de copier le site à des fins de clonage, si vous hébergez votre blog sur un VPS, mais je n’ai pas utilisé cette option (j’aurais dû), je ne peux donc pas vous dire à quel point elle est simple ou pas à utiliser.
Si vous êtes sur une plateforme qui ne propose pas ce service, vous pouvez par exemple créer un sous-domaine dédié à la refonte et passer l’ensemble en production une fois la refonte terminée. - Un clone installé sur votre ordinateur (avec Local by FlyWheel par exemple). Vous aurez par contre à transférer vos fichiers par FTP avec un logiciel tel que Filezilla, et votre base de donnée via PHPMyAdmin ou Adminer une fois la refonte terminée.
Au fur et à mesure de l’avancement de votre projet, commentez chaque point lors du démarrage, en cours d’exécution et en fin d’exécution. Si un point vous pose problème, notez-le et vérifiez bien en fin de refonte qu’il n’y a plus de problème.
6 — Vérifiez, vérifiez, vérifiez encore
Une fois la refonte terminée, reprenez la liste des actions à mener, la liste des actions menées, vérifiez que rien ne vous a échappé (il y aura forcément quelque chose qui va vous échapper, au final, mais vous aurez limité la casse en cas de dysfonctionnement, en vérifiant tout point par point).
7 — Effectuez une dernière sauvegarde
On n’est jamais assez prudent : mieux vaut avoir une sauvegarde de sécurité dont on ne se servira pas que de ne pas en avoir et d’en avoir besoin. C’est le principe des assurances : vous ne vous assurez pas parce que vous êtes certains d’avoir un accident, la probabilité que vous en ayez un est d’ailleurs faible, mais si vous avez un accident et que vous n’êtes pas assuré, c’est la catastrophe en plus de la catastrophe.
Juste avant de passer votre nouveau blog en production, une sauvegarde complète s’impose (fichiers et base de données) au cas où vous auriez un problème — un plantage du serveur par exemple, totalement indépendant de votre volonté. Ou au cas où la nouvelle version du site ne satisferait pas à vos exigences une fois mise en service.
À lire sur le blog :
Pourquoi vous devez avoir une sauvegarde de votre blog
8 — Passez votre clone en production
Il faut se lancer, et c’est le moment crucial. En fonction de votre hébergement, vous allez utiliser le FTP et un gestionnaire de base de données (PHPMyAdmin est le plus répandu), ou cliquer su le bouton de mise en ligne du clone. Et voilà, votre blog en version V(n+1) est enfin en ligne !
Après la mise en ligne
9 — Vérifiez, encore, en détail
C’est le moment de tout passer en revue. Prenez votre check-list finale, validez chaque point.
Parcourez votre blog dans tous les sens. Passez en revue chaque page, chaque article pour être certain de ne rien avoir laissé passer.
10 — Comparez les performances avant / après
Si vous avez suivi le conseil numéro 3, vous avez les statistiques et les performances de votre blog avant refonte.
Avez-vous gagné en termes de temps passé sur chaque page, de nouveaux visiteurs, de fidélisation de votre lectorat, de taux de rebond, de taux de conversion si vous proposez un service ou un produit ?
Avez-vous gagné quelques (milli)secondes au chargement des pages ?
Si oui, vous avez atteint votre but. Sinon, il vous reste à identifier les éventuels obstacles et à corriger la copie, rien n’est figé.
Un exemple ? Lors de la refonte de ce blog, j’ai utilisé la fonction par défaut incluse dans le thème pour les articles liés ; le taux de rebond ayant augmenté de manière significative, je suis revenu à mon extension favorite (que j’avais simplement désactivée) : Contextual Related Posts, et j’ai remplacé la fonction livrée avec le thème pour récupérer les articles liés par un appel à l’API de Contextual Related Posts. Le taux de rebond est rapidement redescendu, j’avais donc visé juste.
Pour la prochaine refonte
Pensez à garder les notes prises lors de la refonte, et à les mettre au propre si nécessaire : elles vous serviront pour la prochaine refonte, même si elle n’est pas prévue dans l’immédiat (en principe).
Et pourquoi ne pas utiliser ces notes pour un article, même si la thématique de votre blog ne concerne pas WordPress ? Votre expérience peut intéresser d’autres blogueurs, et leur être utile.
Vous avez mené à terme un projet important, les leçons apprises vous serviront, peut-être même dans d’autres domaines (rénover une maison n’est pas si éloigné que ça de la refonte d’un blog, du moins dans l’esprit).
Avez-vous déjà participé à la refonte d’un site web, que ce soit le vôtre ou non ?
Certains liens de cet article sont des liens affiliés, c’est à dire que si par exemple vous achetez un thème ou une extension, ou si vous prenez un hébergement en les suivant, je toucherai éventuellement une petite commission, mais vous, vous ne payerez pas un centime de plus.