Concevoir un site vitrine pour plusieurs publics

Les Chemins de la Maison est le site d’une éducatrice spécialisée et sexothérapeute, que j’ai conçu et développé seul, de la maquette Figma à la mise en production, avec Next.js. Elle y présente six accompagnements qui n’ont presque rien en commun, de la thérapie de couple aux ateliers d’éducation à la vie affective pour les enfants. Le site devait l’aider à être trouvée, rassurer des personnes qui consultent pour des sujets intimes et présenter clairement des services très différents, sachant que la plupart de ses séances se déroulent en visioconférence. Une contrainte a orienté tout le reste : certains publics ne devaient jamais se croiser.

Quels publics, et pourquoi ne jamais les mélanger ?

Le site s’adresse à quatre publics, chacun avec ses propres services :

les adultes et les couples, pour la psycho-sexologie ;
les parents, pour la guidance parentale ;
les enfants, les familles et les institutions, pour les ateliers d’éducation à la vie affective, l’accompagnement des troubles du neurodéveloppement et le harcèlement scolaire ;
les professionnels du soin et de l’éducation, pour les formations.

Un parent qui cherche de l’aide pour son enfant harcelé ne doit pas tomber sur un article consacré aux troubles sexuels d’un couple, et une page de sexothérapie n’a aucune raison d’afficher la photo d’un enfant. Avec la cliente, nous avons tout de suite été d’accord sur ce principe. La vraie question portait sur la manière de l’appliquer partout, et c’est là que j’ai fait des propositions.

Comment transformer un principe en règles vérifiables ?

Un principe aussi général se perd facilement au fil des pages. Je l’ai donc décliné en règles précises, écrites dans la documentation du projet et appliquées à tout nouveau contenu :

aucun texte, aucune image et aucun texte alternatif à caractère sexuel adulte sur une page ou un article destiné aux enfants ou aux parents, et aucune image d’enfant sur une page de psycho-sexologie ;
aucune carte, aucun lien de maillage et aucun article suggéré qui fasse passer d’un public à l’autre ;
un lien entre deux services seulement s’il sert le lecteur de la page, par exemple entre la psycho-sexologie et les formations sur la vie affective des personnes ayant un trouble du développement intellectuel ;
les ateliers pour enfants présentés comme une éducation adaptée à l’âge, sans le vocabulaire de la sexothérapie.

Les articles suggérés sous chaque article sont choisis un par un, et non calculés automatiquement. Ce choix manuel demande plus de travail à chaque publication, mais il évite de rapprocher deux textes proches par le vocabulaire et destinés à des publics différents.

Un intitulé qui change selon la page

La même personne exerce deux métiers. Sur les pages destinées aux adultes et sur les pages générales (accueil, présentation, mentions légales), elle se présente comme sexothérapeute. Sur les pages et les articles destinés aux parents, aux enfants et aux professionnels de l’enfance, elle se présente comme éducatrice spécialisée, ce qui correspond à ses dix années d’expérience en institution.

Cet intitulé a évolué plusieurs fois avant d’être fixé. Pour les données structurées, qui décrivent la personne une seule fois pour tout le site, un intitulé commun réunit les deux métiers.

Un blog de 49 articles organisé par public

Le blog compte 49 articles, rédigés à deux et rattachés chacun à un service. Par défaut, la page du blog les regroupe par public (adultes et couples, parents, enfants et éducation, professionnels) plutôt que dans une seule liste chronologique, qui aurait justement mélangé les sujets.

Les filtres par service et la pagination sont de simples liens, rendus côté serveur à partir des paramètres de l’URL. Les moteurs de recherche peuvent ainsi suivre ces liens jusqu’à chaque article, et chaque variante de la liste déclare la page du blog comme URL canonique pour ne pas lui faire concurrence. L’article sur le SEO technique d’un site Next.js détaille ces mécanismes.

Côté performance, GSAP n’est chargé qu’après le premier affichage, ce qui retire environ 44 Ko compressés du JavaScript initial de chaque page. Le principe est expliqué dans le guide sur GSAP dans React et Next.js.

Pourquoi écrire les tarifs à un seul endroit ?

Un même tarif apparaît sur la page du service, sur la page tarifs et dans les données structurées destinées aux moteurs de recherche. S’il était recopié partout, une hausse de prix oubliée sur l’une de ces pages suffirait à afficher deux montants différents pour la même séance.

Tous les tarifs vivent donc dans un seul fichier, avec la durée et les modalités de chaque offre (présentiel, visioconférence ou les deux). Les pages services, la page tarifs, les badges de modalité et les données structurées le lisent tous. La règle veut qu’aucun texte ne recopie un prix ou une modalité ; quelques informations pratiques restent écrites en double dans certaines pages et doivent être reprises.

Ce qui s’est décidé avec la cliente, et les limites

La cliente m’a d’abord transmis un document détaillé, avec une partie des contenus et ses attentes pour chaque service. J’ai ensuite fait mes propres choix de structure et d’interface pour coller au mieux à ses besoins, et nous avons validé ensemble les points sensibles, comme le cloisonnement et l’intitulé.

Avec le recul, je réunirais tous les contenus et leur découpage par service avant d’écrire la première ligne de code. Une partie de la structure a dû évoluer en cours de route, à mesure que les informations arrivaient, et quelques chantiers restent ouverts, comme l’harmonisation des identifiants de services entre les routes, le blog et les tarifs.

Le site a déjà reçu ses premières prises de contact, sans que sa promotion ait encore été poussée.