Construis un nouveau site pour mon entreprise, de zéro, sur mon serveur d'hébergement
[nom du serveur]. Informations :
1. Nom de l'entreprise :
[nom de l'entreprise], métier :
[plombier / serrurier / frigoriste / autre]
2. Nom de la fiche d'établissement ou domaine :
[nom de la fiche d'établissement]
3. Services (chacun a sa propre page) :
[services]
4. Communes que je dessers et emplacement de mon atelier :
[communes],
[emplacement de l'atelier]
5. Téléphone :
[téléphone], WhatsApp :
[WhatsApp], adresse :
[adresse, ou "je masque mon adresse"], horaires d'ouverture :
[horaires]
6. Domaine :
[domaine], préférence de couleur :
[préférence de couleur], vraies photos :
[où se trouvent les photos, ou "aucune"]
7. Travaux que je ne fais pas :
[services non proposés]
Commence par lire la fiche
[nom de la fiche d'établissement] avec gbp_location_details. Compare dans un seul tableau le nom, le téléphone, l'adresse, le site web, les horaires, la catégorie principale, les services et le lien de la carte avec ce que je t'ai fourni. En cas de différence, demande-moi laquelle est la bonne ; ne modifie rien sur la fiche d'établissement. Sur le site, utilise le nom, l'adresse et le téléphone exactement tels qu'ils sont écrits sur la fiche d'établissement. Si la fiche masque l'adresse, n'affiche aucune adresse postale sur le site et indique uniquement les zones desservies. Prends les coordonnées uniquement à partir du repère de la carte dans la fiche, ne les devine jamais. Choisis le sous-type LocalBusiness du schéma d'après la catégorie principale (Plumber, Locksmith, HVACBusiness, Electrician, etc.).
Ensuite, confirme le serveur avec list_servers, appelle d'abord scaffold_site avec style="service" et confirm=false pour me montrer ce qui sera écrasé, puis exécute-le avec confirm=true après mon accord. Lis site_design_guide et site_seo_guide. Avant d'écrire du code, rédige la décision de design dans _kaynak/ART.md et montre-la-moi : une mise en page minimaliste suisse, une police d'affichage grotesque très grasse issue de Fontshare (par exemple Cabinet Grotesk 800) avec une police de texte sobre (par exemple General Sans 400 et 600), un fond blanc cassé, un texte bleu marine foncé, une couleur d'accent unique offrant au moins 4,5:1 de contraste avec du texte blanc, et un vert WhatsApp distinct. L'élément signature est une paire de grands boutons fixés en bas de l'écran sur mobile : "Appeler maintenant" et "Écrire sur WhatsApp".
Pages et schéma :
1. Accueil : le premier écran dit en une phrase ce que tu fais et quelles communes tu couvres, avec les boutons d'appel et WhatsApp et les horaires. Puis des cartes de services, des cartes de communes, les étapes d'une intervention et une FAQ de 4 questions. Schéma : WebPage, FAQPage.
2. Une page de services et une page par service : le premier paragraphe répond directement à "que faites-vous et comment" ; puis les symptômes, les étapes sur place, quand c'est une urgence, comment le prix est fixé (sans inventer de chiffres), 3 FAQ propres à la page, l'auteur et la date. Schéma : Service (provider #business, areaServed les communes), FAQPage.
3. Une page de zone par commune. Elles ne doivent PAS être des copies où seul le nom de la ville change. Chacune contient les noms de quartiers de cette commune, les pannes les plus fréquentes que tu y rencontres selon le bati local (un tableau dont les lignes diffèrent d'une commune à l'autre), une note sur les trajets et le stationnement, la distance depuis l'atelier, deux FAQ propres à cette commune et des liens vers les autres zones. Rédige au moins 300 mots de texte original ; si l'analyse de doublons de seo-check détecte plus de 50 % de recouvrement entre deux pages de zone, réécris-les. Ne crée pas de page pour une commune que je ne dessers pas réellement. Schéma : AdministrativeArea (containedInPlace le département, containsPlace les quartiers), Service, FAQPage.
4. À propos : qui tu es, comment tu travailles, avec quel équipement, et quels travaux tu n'acceptes pas. Schéma : AboutPage, et Person si je t'ai donné un vrai nom.
5. Contact : NAP, horaires, un lien "Itinéraire" et le formulaire WhatsApp. Schéma : ContactPage avec mainEntity #business.
6. Une page de mentions de confidentialité et une page 404.
Aucune invention : n'écris pas d'avis, de notes, de récompenses, de certificats, de nombres de clients ni d'affirmations du type "le meilleur" qui ne soient pas réelles. N'ajoute pas au schéma ni au texte des horaires, des coordonnées, des prix ou un e-mail que je ne t'ai pas donnés ; laisse le champ de côté et signale-le comme manquant dans le rapport. N'utilise ni tirets longs ni slogans génériques, et fais en sorte que le premier paragraphe de chaque page réponde directement à la question de cette page.
Travail SEO commun : chaque page reçoit un title unique de 48 à 60 caractères, une description de 145 à 158 caractères, un seul H1 et une canonical se terminant par une barre oblique. Ajoute à chaque page son propre nœud WebPage et un BreadcrumbList, reliés au graphe de base par @id. Dans robots.txt, écris Allow: / pour Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et CCBot, explique la décision dans un commentaire et indique ce qu'il faut modifier si je veux bloquer les robots d'entrainement. Le sitemap.xml contient de vraies dates lastmod. Le fichier llms.txt décrit fidèlement l'entreprise en deux phrases et liste le NAP et les pages importantes avec des liens.
Mise en place technique (la voie par défaut de la boite à outils n'est pas utilisée sur ce site, pour ces raisons) :
1. Compile Tailwind et abandonne le CDN. Le kit charge Tailwind via le CDN Play, qui compile dans le navigateur, affiche un avertissement dans la console et dégrade les performances mobiles. Écris _kaynak/package.json avec site_write_file, installe avec site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) et attends avec site_command_status. Dans _kaynak/tailwind.config.js, définis content sur "./*.html", "./**/*.html", "!./_kaynak/**" et "./_kaynak/chrome.mjs". Déplace les règles @font-face, les lignes @tailwind ainsi que l'anneau de focus, le lien d'évitement et la protection contre le débordement depuis app.css du kit vers _kaynak/site.css. Génère le résultat dans assets/app.css, car design-check.mjs cherche les polices dans ce fichier, et ajoute ?v=<hash du contenu> au lien sur chaque page pour que le cache de périphérie ne serve jamais l'ancien fichier.
2. Auto-héberge les polices. Lis l'URL CSS des familles Fontshare choisies (api.fontshare.com/v2/css?f[]=...) avec site_read_url, télécharge ses fichiers woff2 avec site_fetch dans assets/fonts/, et déclare-les avec @font-face et font-display: swap. Précharge chaque graisse utilisée au-dessus de la ligne de flottaison avec <link rel="preload" as="font" type="font/woff2" crossorigin>, trois fichiers au maximum. Sans cela, l'échange de polices provoque un décalage de mise en page ; dans la démo, le CLS sur ordinateur était de 0,078 pour cette raison et est tombé à 0 grace au préchargement.
3. Rends le menu et le pied de page en HTML statique. Les composants <site-nav> et <site-footer> du kit fonctionnent avec JavaScript, et la plupart des robots d'IA ne voient jamais le menu, l'adresse ni le numéro de téléphone. Retire les scripts chrome.js et motion.js de chaque page. Dans _kaynak/chrome.mjs, écris deux fonctions qui construisent le HTML de l'en-tête et du pied de page à partir de assets/site.config.js ; construis le menu mobile sans JavaScript avec <details> et <summary>, et marque la page courante avec aria-current="page". Écris à la racine du site un build.mjs qui, dans l'ordre, exécute node seo-stamp.mjs, réapplique tout ce qui se trouve entre <!-- chrome:header:start --> et <!-- chrome:header:end --> (et de même pour le pied de page) sur chaque page, compile Tailwind et met à jour le hash du lien CSS. Après chaque modification, exécute uniquement site_run_command("node build.mjs").
4. Aucun mouvement. Ne charge ni GSAP, ni Lenis, ni Swiper, ni aucun script d'animation sur ce site ; les visiteurs arrivent sur leur téléphone pour appeler ou écrire vite.
5. Réduis les images. Télécharge chaque photo avec site_fetch dans des fichiers séparés en utilisant resize="480x", "800x", "1200x", "1600x", image_format="webp" et une qualité comprise entre 60 et 68. Donne à chaque <img> srcset, sizes, ainsi que width et height correspondant au vrai ratio ; si tu recadres, ajoute une classe de ratio comme aspect-
[4/3] avec object-cover, sinon la mise en page bouge au chargement de l'image. L'image du premier écran reçoit fetchpriority="high" et n'est pas en chargement différé ; toutes les autres reçoivent loading="lazy". Télécharge l'image de partage en JPG 1200x630 avec site_fetch.
6. Petits détails qui coutent des points : ajoute un favicon SVG avec <link rel="icon"> (sinon le navigateur demande /favicon.ico, le 404 apparait comme une erreur dans la console et les Bonnes pratiques baissent). Écris DOCTYPE en majuscules, n'utilise aucun attribut style et ne laisse aucun espace en fin de ligne. Utilise à la place des espaces dans le texte visible des liens téléphoniques (règle tel-non-breaking de html-validate). Les liens du menu, du pied de page, du fil d'Ariane et des titres doivent faire au moins 44 pixels de haut et de large. N'intègre pas d'iframe Google Maps ; le site ne doit faire aucune requête externe, donc affiche l'adresse et un lien "Itinéraire" à la place.
7. Aucune requête ne doit sortir du site : polices, scripts, styles et images se trouvent tous sur ton propre serveur. Il n'y a pas de gestionnaire de formulaire, donc le formulaire de contact est un formulaire method="get" pointant vers https://wa.me/
[numéro WhatsApp] avec un textarea prérempli nommé "text" ; aucun JavaScript n'est nécessaire.
Contrôles (dans cet ordre ; ne dis pas que c'est terminé tant qu'ils ne sont pas tous validés) :
1. Exécute node build.mjs avec site_run_command, puis node seo-check.mjs : 0 erreur, 0 avertissement. Un avertissement de contenu dupliqué signifie que deux pages ne sont pas assez différentes ; réécris-les.
2. node design-check.mjs : 0 erreur. Si tu as choisi un style sans mouvement, signale l'avertissement "pas de mouvement" comme une décision délibérée avec la raison.
3. _kaynak/node_modules/.bin/html-validate sur chaque fichier HTML : 0 erreur. Place une ligne _kaynak/ dans un fichier .htmlvalidateignore à la racine du site pour que les dépendances ne soient pas analysées.
4. Contrôle du NAP : montre dans un tableau que le nom, l'adresse et le téléphone du site correspondent lettre pour lettre à la sortie de gbp_location_details.
5. Regarde chaque page avec site_preview en view="mobile", view="desktop", et aussi en largeur 360 et 768. Corrige le défilement horizontal, les titres qui débordent, les boutons trop serrés ou le texte illisible, puis regarde de nouveau.
6. Mesure chaque page avec core_web_vitals en strategy="mobile" et strategy="desktop", et obtiens les scores d'accessibilité, de bonnes pratiques et de SEO avec seo_audit. L'objectif sur mobile est 100 en accessibilité, bonnes pratiques et SEO et au moins 95 en performance ; sur ordinateur au moins 95 pour les quatre. Sur une page qui n'atteint pas l'objectif, exécute core_web_vitals avec resources=true, trouve l'élément LCP et toute image surdimensionnée, corrige, puis relance seo_audit avec runs=2, car une seule mesure en laboratoire peut fluctuer.
7. Les requêtes réseau ne doivent contenir aucune adresse extérieure au domaine du site.
Après la publication : soumets sitemap.xml avec gsc_submit_sitemap et vérifie la page d'accueil et les trois pages les plus importantes avec gsc_inspect_urls. Aucun outil ne peut cliquer sur "Demander une indexation" ; liste ce que je dois demander à la main dans Search Console.
Termine par ce rapport : la liste des
