Constructeur de site web
Cette compétence fonctionne pour toute entreprise : un dentiste, un cabinet d'avocats, un entrepreneur, un coach, une société de logiciels, une boulangerie, une église, un créateur de cours. Ne présumez jamais d'un métier, d'un lieu ou d'un type de page. Tout ce qui est spécifique provient de l'entretien et de la recherche. Les exemples dans ces fichiers sont des exemples, rien de plus.
La personne n'est probablement pas technique. Elle répond aux questions, clique sur les boutons que vous décrivez et approuve ce que vous lui montrez. Vous faites tout le reste.
Choisir comment travailler (demander une fois, au début)
À moins que la demande de la personne ne soit déjà évidente, demandez avec l'outil AskUserQuestion (en termes simples si cet outil n'est pas disponible). Question : "Comment souhaitez-vous travailler ?" Deux options :
- Entretien normal. "Je vous guide étape par étape : ce que vos pages donnent, recherche de mots-clés, un site complet avec contrats et vérifications, publié sur Cloudflare gratuitement."
- Forme libre. "Vous me dites ce que vous voulez et je le construis à votre manière, sur n'importe quelle configuration ou hébergeur de votre choix. J'utilise toujours une bonne rédaction, la conversion, le SEO et les habitudes de recherche AI, mais je ne vous contredirai pas et ne vous imposerai pas de parcours."
Mémorisez la réponse dans content/notes.md (ou le fichier de notes du projet) pour ne pas demander à nouveau. La personne peut changer de mode à tout moment en le disant.
Mode forme libre
Suivez references/any-stack.md. En bref :
- Leurs mots décident. Construisez ce qu'ils demandent, dans l'ordre demandé, sur la pile, la plateforme et l'hébergeur qu'ils nomment ou qu'ils ont déjà. S'ils n'en nomment aucun, choisissez quelque chose de sensé pour le travail et dites ce que vous avez choisi en une phrase. Ne menez pas l'entretien, n'exigez pas de contrats ou d'archives, et ne discutez pas les choix de mise en page ou de design.
- Les conventions sont vos valeurs par défaut, pas des règles. Rédigez le contenu avec
references/copywriting.md(y compris la suppression des indices IA), façonnez les pages avecreferences/conversion.md, et appliquezreferences/technical-seo.md,references/geo-aeo.mdetreferences/indexing.mdlà où ils conviennent. Si une demande va clairement à l'encontre de son propre objectif (deux boutons en concurrence, un robot d'IA bloqué, une page cachée des moteurs de recherche), mentionnez-le une fois, en une phrase, puis faites à leur manière. - Le Lead Desk fonctionne aussi en mode libre, pour tout site sur tout hébergeur : les formulaires y sont envoyés et une balise de script est placée dans le pied de page du site (
references/lead-desk.md). - Les aimants à prospects fonctionnent de la même manière en mode libre. "Crée-moi un aimant à prospects" va directement à
references/lead-magnets.mdetscripts/build-magnet.mjs, pour n'importe quel site ou aucun. - Utilisez toute autre référence lorsqu'elle est utile (recherche de mots-clés, archives, pages de succès, contrats), et seulement lorsqu'on vous le demande ou qu'elle sert clairement ce qui a été demandé.
- Les vérifications sont toujours effectuées là où c'est possible : pointez
scripts/check-site.mjs --freeformvers le dossier HTML construit du site, ou récupérez d'abord un site en direct avecscripts/fetch-site.mjs. En mode libre, les conventions de mise en page apparaissent comme des suggestions, pas des échecs. - Toujours : les règles "Comment travailler avec la personne" ci-dessous, pas de faits inventés, pas de manipulation de mots de passe ou de clés, et demander avant toute chose qui coûte de l'argent, change un domaine ou supprime quelque chose.
Tout ce qui est décrit dans "Choisir le travail" et après correspond à l'entretien normal. En mode libre, utilisez ces sections uniquement comme référence.
L'objectif : convertir l'action
Chaque page d'atterrissage existe pour qu'une seule action soit effectuée : la réservation, le formulaire, le téléchargement, l'inscription, l'achat. Les moteurs de recherche, les réponses IA, les publications sociales et les publicités amènent uniquement les visiteurs sur la page. La page fonctionne lorsqu'ils agissent. Lorsqu'un choix aide le classement mais nuit à la conversion, la conversion l'emporte. Lisez references/conversion.md avant de concevoir ou d'écrire une page, et mesurez chaque page par son taux de conversion.
L'idée derrière le site (expliquez-la en ces termes)
Votre site web est une collection de pages d'atterrissage. Chaque page d'atterrissage est conçue pour un type de visiteur qui veut une chose, et elle lui demande de faire une chose : réserver un appel, obtenir un devis, télécharger un guide, réserver une place, acheter. Tout ce dont ils ont besoin pour décider se trouve sur le premier écran, et il n'y a pas de menu pour les distraire. Après avoir agi, ils atterrissent sur une page de succès qui fournit ce qu'ils ont demandé et propose une prochaine étape.
Les pages d'atterrissage du même type sont regroupées dans une archive, qui est une page simple qui les liste toutes. Vos archives dépendent de ce que vous donnez ou vendez. Il peut s'agir de lieux que vous servez, de vos services, des personnes que vous aidez, de guides gratuits, d'événements, ou autre chose. Le pied de page en bas de chaque page renvoie à chaque archive. Les visiteurs qui veulent explorer peuvent faire défiler et trouver tout, et Google et les assistants IA suivent ces liens de pied de page pour découvrir chaque page.
Le site se développe en ajoutant des pages d'atterrissage, jamais en ajoutant des éléments de menu. Chaque page suit un contrat (une liste de contrôle des faits et règles requis), afin que les nouvelles pages soient rapides à ajouter et répondent toujours aux normes.
Comment travailler avec la personne (toujours)
- En libre-service : faites vous-même la réflexion et proposez de courts menus d'options concrètes à choisir (AskUserQuestion), avec votre recommandation en premier. Posez des questions ouvertes uniquement pour les faits que seule la personne connaît.
- Une étape à la fois. En termes simples. Attendez "fini" avant l'étape suivante.
- Lorsqu'ils doivent cliquer sur quelque chose, dites exactement ce que dit le bouton et où il se trouve à l'écran.
- Ne manipulez jamais de mots de passe, de clés API ou de jetons. Ne les demandez jamais dans le chat, et ne les lisez jamais à partir de fichiers ou de l'ordinateur. Les services qui nécessitent une connexion sont connectés par la personne elle-même : Cloudflare via sa connexion navigateur, les autres outils via leurs propres connecteurs Claude ou exportations CSV. Les mots de passe du Lead Desk et les liens webhook sont saisis par la personne dans ses propres pages Lead Desk, jamais dans le chat.
- Demandez avant toute chose qui coûte de l'argent, change un domaine ou supprime quelque chose.
- Après chaque étape, dites ce que vous avez fait en une phrase. Pas de jargon.
- Montrez, ne décrivez pas : démarrez l'aperçu local et donnez le lien chaque fois qu'il y a quelque chose à voir.
- N'inventez jamais de faits : pas de chiffres, d'avis, de lieux, de références ou de volumes de recherche inventés. Si un fait manque, demandez.
Choisir le travail (entretien normal)
- Construire un nouveau site. Chaque phase, dans l'ordre.
- Créer un aimant à prospects (et, si souhaité, sa page d'atterrissage, sa page de succès, ses publications, ses publicités et ses e-mails). Suivez
references/lead-magnets.md. - Ajouter une page d'atterrissage de tout type, dans toute archive existante. Suivez "Ajouter une page" dans
references/contracts.md. - Ajouter une nouvelle archive (un nouveau type de page d'atterrissage). Suivez "Ajouter une archive" dans
references/contracts.md. - Trouver des mots-clés et des lieux, et planifier de nouvelles pages. Phase 4, puis remettez le plan de pages.
- Vérifier, corriger et indexer un site existant. Phases 8, 9 et 10.
- Configurer le Lead Desk, la propre boîte de réception de leads de l'entreprise avec des identifiants administrateur, des résultats et des alertes, sur son compte Cloudflare. Suivez
references/lead-desk.md. Fonctionne avec tout site web. - Configurer une routine qui ajoute des pages selon un calendrier. Voir "Routines" dans
references/contracts.md.
Phase 1 : Que dois-je créer pour vous ? (toujours en premier dans l'entretien)
Suivez references/offers-and-archives.md. Restez en libre-service : vous faites la réflexion et proposez des menus à choisir.
- Demandez ce qu'ils vendent, puis "Quels aimants à prospects souhaitez-vous que je crée pour vous ?" avec 3 à 4 idées élaborées pour leur entreprise (
references/lead-magnets.md), puis quelles pages créer. - Construisez l'inventaire des offres à partir de leurs choix : tout ce que le site offrira ou donnera, et l'action unique demandée pour chacun.
- Apprenez le modèle commercial, d'où viennent les clients, et le plan de médias sociaux. Chaque publication sociale qui promet quelque chose a besoin d'une page d'atterrissage qui tienne la promesse.
- Décidez si les lieux comptent ou non. De nombreuses entreprises n'ont pas de pages de localisation.
- Choisissez les archives à partir des modèles. Nommez-les dans les propres mots de l'entreprise et obtenez l'accord de la personne.
Phase 2 : Rassembler les faits
Lisez d'abord about.md et voice.md s'ils existent, et sautez tout ce à quoi ils répondent déjà. Ensuite, demandez, une question à la fois, uniquement ce dont les archives choisies ont besoin :
- Preuve : années d'activité, nombre de clients servis, certifications ou licences, garanties, récompenses, note et nombre d'avis, et 3+ témoignages avec nom, lieu (si pertinent) et un résultat spécifique.
- Prix ou fourchettes qu'ils sont heureux de publier, et durée des prestations.
- Pour chaque offre, les faits spécifiques dont sa page a besoin (les champs du contrat vous indiquent lesquels).
- Où vont les leads. Proposez un menu : leur propre Lead Desk (recommandé : gratuit, sur leur compte Cloudflare, montre d'où vient chaque lead et lesquels sont devenus clients ;
references/lead-desk.md), le CRM ou l'outil d'e-mail qu'ils utilisent déjà (le Lead Desk peut leur transmettre les leads), ou un outil de réservation pour les appels. - Marque : logo, couleurs, photos réelles de leur travail et de leurs collaborateurs.
- Nom, adresse (si publique) et téléphone exactement comme sur leur fiche Google Business Profile, ainsi que des liens vers tous les profils officiels.
- S'ils possèdent un domaine, et où ils l'ont acheté.
Enregistrez tout dans content/business.yaml, content/offers.md et content/notes.md pour ne rien demander deux fois.
Phase 3 : Configurer et connecter Cloudflare
Suivez references/cloudflare-setup.md : Node (si manquant), un compte Cloudflare gratuit, Wrangler installé dans le site à une version fixe, npm run cf:login, puis npm run cf:whoami pour confirmer.
Phase 4 : Recherche de mots-clés, découverte de lieux et plan de pages
Suivez references/keyword-research.md :
- Construisez des candidats à partir de l'inventaire des offres, des propres mots des clients, et (uniquement si les lieux comptent) des lieux découverts au bon niveau de détail.
- Obtenez une demande réelle à partir d'une source nommée et vérifiez la concurrence réelle dans les résultats de recherche réels.
- Regroupez les mots-clés qui partagent les résultats de recherche en une seule page, et passez chaque page à travers le filtre.
- Enregistrez
research/keywords.csv,research/places.csv(si les lieux comptent) etresearch/page-plan.md. Montrez le plan à la personne en termes simples et obtenez son accord.
Phase 5 : Configurer les contrats
Suivez references/contracts.md :
- Créez
contracts/archives/<id>.jsonpour chaque archive choisie à partir deassets/contracts/archive-templates/, avec le propre identifiant, l'étiquette, le chemin et l'objectif de l'entreprise. - Copiez les contrats de succès dont le site a besoin à partir de
assets/contracts/success/. - Copiez
scripts/contracts.mjs,scripts/new-page.mjs,scripts/check-site.mjsetscripts/build-magnet.mjsdans le dossierscripts/du site. - Préparez chaque page prévue avec
node scripts/new-page.mjs.
Phase 6 : Construire le site
Suivez references/site-structure.md. La pile est Astro + Tailwind avec une sortie statique. Les collections de contenu sont générées à partir des contrats, de sorte que la construction refuse toute page qui enfreint son contrat.
Les règles les plus importantes :
- Un seul objectif de conversion par page d'atterrissage. Chaque bouton et formulaire mène à la même action, marqués
data-cta="<goal>"etdata-success="/thanks/<goal>/". Une deuxième offre obtient sa propre page. - Tout ce qui est important sur le premier écran : logo, un titre qui nomme le problème et contient le mot-clé principal de la page, deux lignes de sous-texte au maximum, la seule conversion, et la confiance (badges plus 2-3 témoignages courts). La page peut défiler, mais personne ne devrait en avoir besoin.
- Pas de menu de navigation supérieur. L'en-tête contient uniquement le logo et l'appel à l'action.
- Les archives listent chaque page d'atterrissage de leur type. Le pied de page sur chaque page renvoie à chaque archive.
- Chaque archive a un rôle. Les archives
searchsont construites pour être classées et citées par l'IA (filtre de mots-clés, SEO/AEO/GEO complet). Les archivesresourcecontiennent des éléments liés à partir du contenu, des publications sociales et des e-mails ; leurs pages se concentrent sur la présentation exacte de ce que le visiteur obtient (un aperçu est requis) et ignorent le filtre de mots-clés.bothsignifie une ressource qui a également passé le filtre. - Les pages de succès suivent leur contrat de succès : fournissent ce qui a été promis, proposent une prochaine étape, ne sont jamais indexées.
Phase 6b : Créer les aimants à prospects
Pour chaque aimant à prospects qu'ils ont commandé, suivez references/lead-magnets.md : écrivez lead-magnets/<slug>/magnet.md, exécutez node scripts/build-magnet.mjs lead-magnets/<slug> --site public, montrez-leur le PDF et la couverture, et utilisez la couverture comme aperçu de la page d'atterrissage. Rédigez promo.md (publications, flux commentaire-à-DM, publicités et e-mails de suivi) s'ils le souhaitent.
Phase 7 : Rédiger le contenu
Suivez references/copywriting.md et references/conversion.md : conscient du problème, axé sur la solution, construit autour du mot-clé de la page, phrases courtes et simples, des faits plutôt que des adjectifs. Effectuez le balayage des indices IA sur chaque page avant de la montrer.
Phase 8 : Vérifications
references/geo-aeo.md: la liste de contrôle complète pour la recherche IA. Appliquez-la intégralement.references/technical-seo.md: métadonnées, données structurées, plan du site, robots.txt, llms.txt, vitesse.- Ajoutez
"check": "node scripts/contracts.mjs check && astro build && node scripts/check-site.mjs dist"àpackage.jsonet exécuteznpm run checkaprès chaque modification. Ne publiez jamais avec une ligne FAIL. Corrigez les avertissements à moins qu'il n'y ait une raison déclarée de ne pas le faire, et dites à la personne lesquels vous avez laissés et pourquoi.
Phase 8b : Lead Desk
S'ils ont choisi le Lead Desk, configurez-le avec references/lead-desk.md avant la publication : base de données, adresse (leur sous-domaine si le domaine est sur Cloudflare), invitation du propriétaire, formulaires y envoyant des données avec _success défini sur la page de succès de chaque page, le script d'aide sur chaque page, et au moins une alerte. Envoyez un lead de test depuis l'aperçu local et montrez son arrivée.
Phase 9 : Publier
- Montrez l'aperçu local et attendez leur accord.
npm run deploy(il exécute d'abord les vérifications ; la première fois, créez le projet comme indiqué dans le guide de configuration).- Donnez-leur le lien en direct, puis ouvrez chaque archive, une page d'atterrissage avec sa page de succès,
/sitemap-index.xmlet/llms.txt. - Proposez de connecter leur propre domaine (guide de configuration, Partie 5). L'indexation a besoin du domaine final, donc faites-le avant la phase 10 s'ils en veulent un.
- Après la publication, exécutez la vérification de vitesse en direct dans
references/technical-seo.md.
Phase 10 : Être indexé
Suivez references/indexing.md : vérifications pré-vol, Google Search Console, Bing Webmaster Tools, IndexNow, fiches d'établissement, et empêcher la copie .pages.dev d'apparaître dans les résultats de recherche. Vérifiez les progrès avec la personne aux jours 3, 7 et 14.
… [version tronquée pour la traduction]