L’expérience d’une refonte : le cas « Trucs de grand-mère »

Certains d’entre vous qui me suivent sur Twitter ou ailleurs, le savent déjà, je viens de mettre en ligne la nouvelle version du site « Trucs de grand-mère ». Pour la petite histoire, ce site web est géré en interne par l’Agence 404 et c’est Renaud Varoqueaux (le boss) qui en est le créateur.

Cette refonte n’aura pas été une tasse de thé. Elle fût même bien plus complexe que ce que j’avais pu imaginer (c’est là qu’on aimerait avoir plus d’expérience). Je souhaitais revenir sur ce travail qui m’aura suivi 6 mois.

Pourquoi avoir souhaité refondre ce site web ?

Trucs de grand-mère est un site à fort potentiel qui se rémunère grâce à la publicité. Le site est positionné sur de nombreuses requêtes de la longue traîne et dispose d’une bonne ancienneté / réputation.

Je suis à l’Agence 404 depuis presque 2 ans maintenant et j’ai toujours travaillé sur ce site web. Accompagné par Maxime Coutant, principalement, nous avions comme objectif de conserver le référencement de ce site web (au minimum) et d’accroître les revenus du site. Nous avons testé pas mal de choses mais nous étions (je pense) limités par plusieurs éléments :

• Le design de l’ancien site
• Les fonctionnalités offertes par le site (et le manque de moyen humain et financier pour en changer)
• La pauvreté des contenus mais nous y reviendrons

Ancienne version du site (je vous laisse seul juge)

Mon idée était donc de voir plus loin et d’y mettre les moyens. La première étape de cette refonte aura donc été de convoquer toute l’équipe 404 (consultant, commerciaux et le patron). Je devais annoncer mon idée un peu folle (pourquoi refaire un site qui marche déjà bien ?) et convaincre tout le monde. Si l’idée était acceptée, je voulais également obtenir des idées judicieuses pour développer le site.

Idée acceptée on passe à la suite : l’architecture

Trucs de grand-mère c’était plus de 10 000 astuces rangées dans 13 catégories (santé, beauté, cuisine, environnement…), des articles de blog, des tags, des produits miracles, de vieilles pages utilisateurs (inutilisées car non fonctionnelles), bref un sacré chantier.

Mon idée était donc dans un premier temps de revoir les catégories et d’y apporter des sous catégories.

Exemple : 

• Catégorie : « Santé »
• Sous Catégorie : « Bobos », « Maladie », « Régime », « Douleurs », « Bien être », « Divers »

Second chantier, je souhaitais créer des dossiers dans lesquels seraient proposés un contenu plus conséquent et intéressant et des astuces en relation.

Exemple :

• Dossier : « Soigner une piqûre de guêpe »
• Astuces liées : « Traiter une piqûre de guêpe sur un enfant », « Atténuer les piqûres de guèpes », « Calmer une piqûre de guêpe naturellement »

Je n’ai pas encore parlé des articles de blog, des tags mais vous vous doutez déjà que l’architecture a été modifiée. Les deux versions n’ont en effet rien à voir (enfin presque).

### Dossier

• Inexistant avant
• Nouvelle URL : http://www.trucsdegrandmere.com/sante/bobos/soulager-piqures-moustique/

### Astuce 

• Ancienne URL : http://www.trucsdegrandmere.com/sante/soulager-mal-dents-avec-clous-girofle.html
• Nouvelle URL : http://www.trucsdegrandmere.com/sante/douleurs/soulager-mal-dents-avec-clous-girofle.html

Premier constat, les dossiers et les astuces sont au même niveau. On ne souhaitait pas rajouter un niveau supplémentaire.

En ce qui concerne les tags, ils sont au premier niveau. Le blog également. On a conservé les mêmes URLs pour ces pages pour éviter des redirections dans tous les sens. On reparlera de ces redirections un peu plus loin dans ce billet…

La nouvelle architecture du site (en gros)

Je n’ai pas placé les pages de tags qui gravitent autour de cette architecture, les pages du blog qui sont toujours au même endroit et qui pointent vers des astuces, j’ai un peu simplifié mais l’idée est là.

Architecture validée place au : contenu

Du contenu on en avait, on en avait même beaucoup. Avant de se jeter dans la rédaction de nouvelles astuces et surtout de nouveaux dossiers on devait donc réutiliser les anciens.

Certaines catégories ayant été supprimées et les sous-catégories faisant leur apparition, nous avons eu la chance de trier plus de 10 000 articles (astuce par astuce dans un joli fichier excel). Une plaie pour mes collègues et pour moi même mais nous n’avions pas le choix !

Le second travail fût de trouver des sujets / dossiers intéressants qui pourraient regrouper plusieurs astuces.

Exemple :

• On peut traiter les coup de soleil de plusieurs façons alors on créer un dossier et on y lie des astuces.

Au total, 144 dossiers ont été créés. J’admets, cependant, que tous ne sont pas forcément très judicieux. Cela fera partie des améliorations à apporter par la suite car le projet ne s’arrête pas à son lancement.

Quelques dossiers sur la nouvelle version

Contenu créé, on s’attaque au : développement

Il faut parfois hausser le ton !

On ne va pas se le cacher, le gros de la refonte fût le développement. Je n’ai pas toujours été cool avec l’équipe de développement mais au finale, ils ont fait un travail remarquable (en tout cas moi j’en suis content) mais parfois il fallait hausser le ton ou remotiver les troupes…

C’est un développement 100% maison qui a été confectionné (Pas de WordPress, Joomla ou un autre CMS).

Une fois le design en place et le gros des fonctionnalités réalisées, je me suis mis à remettre en cause tous ce qui avaient été réalisés (bon c’est un peu curieux dit comme ça). L’idée était d’obtenir un site ergonomique avec aucune erreur (j’ai bien dis aucune erreur). Un bouton mal placé ? On le replace. Un champ qui bug ? On le corrige.

C’est finalement le moment où tu vérifies tout (sans exception) et où tu fais intervenir tes collègues qui d’un oeil extérieur voient souvent beaucoup plus d’erreurs que toi. On a donc bien surveillé les éléments suivants :

• Balise <title> et méta description
• Balise <h1>, <h2>
• Sitemap et robots.txt (là il fallait pas se louper)
• Balise canonique et attribut rel= »prev » & rel= »next » sur la pagination
• Maillage interne
• Implémentation des microformats (fil d’ariane, rating, itemlist…) et des éléments comme le profil et la page Google+
• Code Analytics (ne pas oublier de mettre une petite note le jour J)
• Boutons sociaux

Un gros problème posé par le nouveau site était la vitesse de chargement. Plusieurs heures / jours auront été nécessaire pour arriver à un résultat satisfaisant. Différents éléments impactaient fortement la vitesse du site :

• Trop de fichier JS et pas assez d’optimisation sur ces bouts de code
• Trop de fichier CSS et des fichiers non compressés
• Manque sur l’optimisation du cache
• Manque d’optimisation sur les images (trop grande, les tailles n’étaient pas spécifiée)
• …

On y est presque mais parlons de : redirection

Étape cruciale pour réussir sa refonte. Nous avions 11 800 URLs indexées et combien visitées ? Je ne sais pas j’ai pas compté. Dans un premier temps nous avons corrigé toutes les URLs internes du site. Nous ne devions pas avoir de code 301 ou 404, uniquement du code 200.

N’oubliez pas les redirections

Pour cela nous avons utilisé « Screaming Frog » (en version payante car nous avions plus de 500 URLs à crawler). Screaming Frog permet de connaître toutes les erreurs sur un site web. L’outil nous a aussi permis de savoir si des <title>, <h1> et autres balises étaient manquantes ou mal construites.

Toujours avec cet outil et grâce à la fonction liste, nous avons passé en revu toutes les URLs visitées sur le site et visibles dans Google Analytics. Même combat avec les pages qui recevaient un backlink depuis d’autres sites web. Avec ces trois fichiers on était presque certains de ne pas oublier une seule redirection.

J’ai longtemps discuté avec les pros (Julien, Rodrigue, Guillaume) pour savoir si je devais faire les redirections en PHP ou directement via le fichier Htaccess. La solution 2 a été préférée en interne malgré ce que l’on me recommandait. Si c’était à refaire je prendrai la solution 1 pour alléger le temps de chargement du site car c’est assez lourd actuellement.

C’est fini ? Oui presque …

Une grosse étape dont nous n’avons pas encore parlé est la remise en place des publicités. Après tout on refait le site pour qu’il soit plus performant alors si on relance le site sans son système de monétisation ça serait moche n’est ce pas ?

Chaque pub a été remise à l’identique comme sur l’ancienne version car cette disposition est clairement la plus performante. Nous aurons un travail à ce niveau par la suite.

Nous cherchons également des annonceurs qui souhaiteraient être diffusés sur cette nouvelle version. Si ça peut vous intéresser n’hésitez pas à me contacter.

En conclusion

J’ai passé 6 mois à monter un projet qui me semblait intéressant et prometteur. Je me suis occupé de la refonte du site de sa conception à sa réalisation. Je suis passé par tous les états mais j’ai vraiment appris de cette refonte tant sur le plan technique que sur le plan managérial.

La nouvelle version est en ligne

Maintenant, il est trop tôt pour savoir si la refonte est une réussite ou non (lancement effectué le 30 avril). Nous avons encore beaucoup de choses à mettre en place, de nouvelles fonctionnalités et plusieurs choses à tester… Le projet ne fait que commencer et c’est ça qui est plaisant dans ce métier.

Place aux critiques, à vous la parole !

PS : pour ceux qui voudraient faire une refonte, voici un mémo bien pratique.

PS 2 : tous les backlinks vers Trucs de grand-mère seront bien évidemment acceptés (je n’ai pas peur de Pingouin moi) 🙂

Vous avez faim ? Y'a des restes !

Refaire son site à la mode SEO Récupérer un sitemap XML au format texte (.txt) Les erreurs à éviter en référencement Bug trouvé dans un algorithme de Google