Avant/après travaux : la page qui fait signer les devis

Un particulier qui hésite entre trois devis pour refaire sa salle de bain ne lit pas vos conditions générales. Il regarde. Il cherche une seule chose : la preuve que vous avez déjà transformé une pièce qui ressemblait à la sienne. Et rien ne donne cette preuve plus vite qu’une photo « avant » et une photo « après », prises du même endroit, côte à côte.

Chez EVICO, on construit des sites pour des artisans du bâtiment, des paysagistes, des menuisiers, des couvreurs. Sur presque tous, la page qu’on retravaille le plus est celle des réalisations. Pas parce qu’elle est moche, mais parce qu’elle est souvent mal construite : une galerie de quarante photos sans texte, sans ville, sans contexte, où l’avant et l’après sont mélangés. Le visiteur fait défiler, ne comprend pas, et repart.

Dans ce guide, on vous montre comment on construit une vraie page avant/après travaux : une page par prestation et par ville, la bonne structure de haut en bas, le choix entre slider et photos côte à côte, les légendes, le texte alternatif, et le petit texte qui transforme deux photos en argument commercial. Tout est applicable, que votre site ait trois pages ou cinquante.

Pourquoi un avant/après convainc plus vite qu’un long discours

Sur un site, personne ne lit tout. La recherche fondatrice du Nielsen Norman Group sur la lecture en ligne l’a montré dès 1997 : 79 % des utilisateurs testés balayaient systématiquement toute nouvelle page, et seulement 16 % lisaient mot à mot. Les années ont passé, les écrans ont rétréci, et ce réflexe de balayage ne s’est pas inversé. Sur un téléphone, il est encore plus marqué.

Un avant/après est fait pour ce lecteur pressé. En deux secondes, il voit le problème de départ (une façade grise et fissurée, un jardin en friche, une cuisine des années 80) et le résultat. Il n’a pas besoin de connaître le vocabulaire du métier pour comprendre ce que vous savez faire. C’est l’argument le plus universel qui existe dans l’artisanat : il parle aussi bien à un retraité qu’à un jeune couple qui vient d’acheter.

C’est aussi une preuve que vos concurrents ont rarement. Beaucoup d’artisans ont des photos de chantiers terminés. Très peu pensent à photographier l’état initial, et encore moins depuis le même angle. Si vous le faites, vous vous distinguez sans dépenser un euro de publicité. C’est pour cela qu’on considère cette page comme une pièce maîtresse de tout site internet d’artisan bien pensé : elle répond à la question que le client n’ose pas poser, « est-ce que vous savez vraiment faire ça ? ».

Encore faut-il que les photos soient bonnes. Si ce n’est pas encore le cas, commencez par nos 7 règles pour des photos de chantier au smartphone, en particulier la règle du même angle : sans elle, aucun avant/après ne fonctionne.

Une page par prestation et par ville, pas une galerie fourre-tout

L’erreur la plus courante, c’est la page « Nos réalisations » unique, où tout est mélangé : une terrasse, une fuite réparée, un portail, une salle de bain. Pour le visiteur, c’est confus. Pour Google, c’est une page qui ne parle de rien en particulier. Ce qu’on conseille à nos clients artisans, c’est l’inverse : une réalisation = une page, avec dans son titre la prestation et la ville.

Le titre et l’adresse de la page

Le titre décrit ce qu’un client taperait dans Google. Pas « Chantier n° 12 » ni « Réalisation de mars », mais la prestation précise et la commune. L’adresse de la page (l’URL) reprend ces mots, sans accents ni dates.

Pourquoi ce découpage fonctionne

• Pour le visiteur : il arrive directement sur le chantier qui ressemble au sien. Quelqu’un qui cherche une rénovation avant/après de salle de bain n’a pas à faire défiler vos portails.
• Pour Google : chaque page a un sujet clair, une ville, des photos décrites. Elle peut apparaître sur des recherches précises, du type « rénovation salle de bain Mérignac ».
• Pour vous : chaque nouvelle page est une raison de plus d’apparaître dans votre zone. Au bout d’un an, vingt réalisations bien rangées couvrent vos prestations et vos communes mieux que n’importe quel texte de présentation.

Attention aux pages copiées-collées

Une page par ville ne veut pas dire fabriquer des dizaines de pages identiques où seul le nom de la commune change. Google le classe explicitement parmi les pratiques de spam, sous le nom de pages satellites : ses règles citent « plusieurs pages ou noms de domaine qui ciblent des régions ou des villes spécifiques, et qui canalisent les internautes vers une seule page ». La différence est simple : une page de réalisation décrit un chantier réel, avec ses propres photos et son propre texte. Si vous n’avez pas encore de chantier à Libourne, vous n’avez pas de page Libourne. C’est tout.

La structure d’une page avant/après qui fait appeler

Sur les sites qu’on livre, chaque page de réalisation suit le même ordre. Il est pensé pour quelqu’un qui arrive sur son téléphone, depuis Google, et qui ne vous connaît pas.

• Le titre : prestation + ville, comme vu plus haut.
• Une phrase de résumé : « Salle de bain de 6 m² transformée en douche à l’italienne, en 8 jours, dans une maison des années 70. »
• La paire avant/après, tout de suite, en haut de page. C’est elle que le visiteur est venu voir. Ne la cachez pas sous trois paragraphes.
• Le point de départ : le problème du client, en deux ou trois phrases. Baignoire inutilisable pour une personne âgée, carrelage fissuré, infiltration au plafond du dessous.
• Ce que vous avez fait : les grandes étapes, sans jargon. Dépose, reprise des évacuations, étanchéité, pose, finitions.
• Les photos de détail : un joint, une coupe d’angle, un raccord, une étape cachée (l’étanchéité avant carrelage, par exemple). C’est là que vous montrez votre niveau.
• Les contraintes et la durée : accès difficile, logement occupé, délai tenu. C’est ce qui rassure sur votre organisation.
• Un avis client lié au chantier, si vous en avez un et que le client est d’accord, sans son nom complet.
• Un bouton de demande de devis, avec un formulaire court.

Pour ce dernier point, un formulaire bien pensé change beaucoup de choses : on conseille un formulaire de devis en plusieurs étapes, qui permet de recevoir des demandes déjà qualifiées (type de travaux, surface, délai).

Slider ou photos côte à côte : comment afficher la comparaison

Il existe deux façons de présenter un avant/après sur un site. Les deux fonctionnent, à condition de respecter quelques règles.

Sur WordPress avec Elementor, il n’est pas nécessaire de développer quoi que ce soit : des extensions proposent un module de comparaison prêt à l’emploi. ElementsKit, qu’on utilise sur nos sites, a par exemple un widget « Image Comparison » qui affiche deux images avec un curseur, horizontal ou vertical, et des étiquettes « Avant » / « Après » modifiables.

Notre conseil pratique : un seul slider par page, en haut, pour la photo la plus parlante. Les autres paires en côte à côte. Dix sliders à la suite, c’est lourd à charger et pénible à manipuler au pouce. Et testez toujours la page sur votre propre téléphone avant de l’envoyer à qui que ce soit.

Les légendes et le texte alternatif : ce que Google et vos visiteurs lisent

Une photo sans légende est une photo muette. Sous chaque paire, écrivez une phrase courte qui dit ce qu’on voit et ce qui a changé. Exemples, pour des chantiers fictifs :

• « Avant : baignoire d’origine et faïence fissurée. Après : douche à l’italienne de 120 × 90 cm, receveur extra-plat. »
• « Façade côté rue avant ravalement, puis après traitement des fissures et peinture minérale. »
• « Haie de thuyas malade remplacée par une haie champêtre et une clôture bois. »

Le texte alternatif, lui, est le texte caché que lisent Google et les logiciels de lecture d’écran pour les personnes malvoyantes. Dans WordPress, il se remplit dans la médiathèque, champ « Texte alternatif ». Google est clair à ce sujet dans sa documentation sur les images : « l’attribut le plus important lorsqu’il s’agit de fournir plus de métadonnées pour une image est le texte alternatif ». Il recommande une description précise plutôt qu’un mot isolé ou une liste de mots-clés.

• À éviter : « salle de bain salle de bain mérignac plombier pas cher ».
• Bien : « Salle de bain avant rénovation à Mérignac, baignoire et faïence fissurée ».

Deux autres conseils tirés de la même documentation Google : nommez vos fichiers de façon descriptive (« douche-italienne-merignac-apres.jpg » plutôt que « IMG_4528.jpg ») et placez les images près du texte qui les concerne. C’est exactement ce que fait une page de réalisation bien construite.

Le texte qui accompagne les photos : 150 à 300 mots suffisent

On n’attend pas de vous un roman. Mais deux photos sans un mot, c’est une page que Google comprend mal et qu’un client oublie vite. Entre 150 et 300 mots, c’est ce qu’on recommande : assez pour raconter le chantier, pas assez pour lasser. Voici la trame qu’on donne à nos clients, à remplir en cinq minutes :

Le point de départ : [ce que le client avait, son problème, en une ou deux phrases].
Sa demande : [ce qu’il voulait obtenir].
Ce que nous avons fait : [les 3 à 5 grandes étapes].
La difficulté du chantier : [accès, délai, logement occupé, matériau particulier].
Le résultat : [ce qui a changé au quotidien pour le client].

Un exemple fictif, pour un couvreur : « Toiture des années 60 à Libourne, plusieurs tuiles cassées et une infiltration dans la chambre du haut. Les propriétaires voulaient une réparation durable avant l’hiver. Nous avons déposé la couverture, remplacé les liteaux abîmés, posé un écran sous toiture et remis des tuiles neuves. Le chantier s’est fait en cinq jours, maison occupée, avec un bâchage chaque soir. Plus aucune trace d’humidité depuis. »

Vous voyez le principe : du concret, des chiffres que vous connaissez (surface, durée), et aucune formule creuse du type « travail de qualité » ou « professionnalisme ». Le visiteur en jugera lui-même en regardant les photos.

Les erreurs qui ruinent un avant/après

• Deux angles différents. L’avant est pris depuis la porte, l’après depuis la fenêtre : la comparaison ne marche plus. Repérez un point fixe dès le premier jour.
• Les retouches lourdes. Éclaircir une photo trop sombre, oui. Effacer une fissure restante ou changer la couleur d’un enduit, non. Une image qui ne correspond pas au travail réel peut être considérée comme une pratique commerciale trompeuse au sens de l’article L121-2 du Code de la consommation.
• Les photos d’un autre. Utiliser des images de banque d’images ou d’un autre artisan en les présentant comme vos chantiers, c’est la même chose, en pire. Si vous illustrez une page de service avec une image générique, ne la mettez jamais dans vos réalisations.
• Le client reconnaissable. Pas de visage, pas de numéro de rue, pas de plaque de voiture, pas de nom de famille dans la légende. La ville suffit. Et demandez toujours l’accord du client avant de publier des photos prises chez lui.
• Trop de photos. Trente photos d’un même chantier noient la paire avant/après. Gardez la meilleure comparaison, deux ou trois paires secondaires et trois ou quatre détails.
• Des fichiers énormes. Une page avec dix photos de plusieurs mégaoctets met du temps à s’afficher sur un téléphone en 4G. Allégez vos images avant de les envoyer sur le site.

Par où commencer, et combien de pages créer

Vous n’avez pas besoin de cinquante pages pour que ça fonctionne. Ce qu’on conseille à nos clients artisans :

• Choisissez vos trois prestations les plus rentables ou celles que vous voulez développer. Pas celles que vous faites le plus, celles que vous voulez faire le plus.
• Pour chacune, créez une page avec votre meilleur avant/après existant, en suivant la structure ci-dessus.
• Ajoutez ensuite une réalisation par mois, en variant les communes de votre zone. C’est un rythme tenable même en pleine saison.
• Reliez ces pages à vos pages de services : sous votre page « Rénovation de salle de bain », affichez les trois dernières réalisations du même type.

Pour aller plus loin sur l’organisation globale de vos réalisations sur le site (galerie, filtres par métier, mise en avant sur l’accueil), on a détaillé la démarche dans notre article sur le site vitrine d’artisan qui présente ses réalisations pour convertir. Et si vous voulez publier vous-même chaque nouveau chantier, sans passer par un ordinateur, suivez notre tuto pour publier une réalisation depuis votre téléphone.

FAQ : avant/après travaux sur un site d’artisan

Faut-il l’accord du client pour publier un avant/après de chez lui ?

Oui, c’est ce qu’on recommande systématiquement. L’intérieur d’une maison relève de la vie privée de ses occupants. Un simple SMS ou une ligne dans le devis (« photos du chantier publiables sans nom ni adresse ») suffit à éviter tout malentendu. Et ne mentionnez jamais le nom du client, seulement la ville.

Je n’ai pas de photo « avant » de mes anciens chantiers. Que faire ?

Publiez quand même vos plus belles photos « après » en réalisation, avec un texte qui décrit l’état de départ. Et commencez dès votre prochain chantier à photographier l’état initial. En quelques mois, vous aurez vos premières vraies paires avant/après.

Vaut-il mieux une page par chantier ou un article de blog ?

Peu importe le nom technique dans WordPress : ce qui compte, c’est qu’un chantier ait sa propre page, avec son titre « prestation + ville », ses photos et son texte. Sur beaucoup de sites qu’on construit, une réalisation est un article rangé dans une catégorie « Réalisations », ce qui la rend simple à publier.

Un slider avant/après ralentit-il le site ?

Un slider seul, avec deux images bien compressées, pèse peu. Ce qui ralentit une page, ce sont des photos trop lourdes et l’accumulation de modules animés. D’où notre conseil : un slider en haut, le reste en images simples et allégées.

Sources

• Nielsen Norman Group, How Users Read on the Web (1997)
• Google Search Central, Bonnes pratiques SEO pour les images
• Google Search Central, Règles concernant le spam (pages satellites)
• Wpmet, documentation ElementsKit : widget Image Comparison
• Code de la consommation, article L121-2 (pratiques commerciales trompeuses)