Créer un site d'expert éditorial avec rubrique de guides et schema auteur

Construis-moi un site d'expert au style éditorial sur mon serveur d'hébergement Opus Growth [nom du serveur]. Moi : [nom complet], [spécialité, ex. consultant export], [zone que je couvre, ou "en ligne"]. Services : [services]. Expérience : [expérience réelle et secteurs dans lesquels j'ai travaillé ; ne rien inventer]. Téléphone : [téléphone], e-mail : [e-mail], domaine : [domaine]. Sujets des deux premiers guides : [sujet 1], [sujet 2]. Si mon cabinet reçoit du public, son adresse : [adresse ou "aucune"]. Le site doit se lire comme une publication qui prouve l'expertise par l'écriture, pas comme une plaquette. Les guides sont au centre du site, car ce sont eux que les lecteurs et les réponses d'IA citent. La direction de design est éditoriale : 1. Typographie : une serif de caractère issue de Fontshare pour les titres (ex. Zodiak 700 et 400 italique) et une sans-serif posée pour l'interface et les textes courts (ex. Author 400 et 600). Corps d'article en serif à 19 pixels, interligne 1,7, 68 caractères par ligne au maximum. 2. Couleur : fond papier crème, texte encre foncée, un gris chaud secondaire et un seul accent sombre (ex. lie-de-vin). L'accent n'apparait que sur les surtitres, la lettrine et les filets des citations. 3. Grille : 12 colonnes ; une une asymétrique 7 / 5 sur la page d'accueil, avec de fins filets verticaux entre les colonnes. Pas d'ombres ni de coins arrondis. 4. Élément signature : un bandeau de titre avec double filet, comme le titre d'un journal (avec une fine ligne de date au-dessus), et dans les articles une grande lettrine de la couleur d'accent ainsi qu'une citation en marge. 5. Mouvement : aucun. Pages et schema associés : 1. index.html (une) : un titre et un chapeau dont le premier paragraphe répond à "qui êtes-vous, qui aidez-vous et sur quoi", l'image et le titre de l'article principal, une colonne latérale avec les autres articles, les services et l'auteur, une citation, et un bandeau "ma façon de travailler". WebPage et Person. 2. hizmetler.html : une section par service ; le premier paragraphe dit à qui il s'adresse et quand, suivi d'étapes numérotées et du livrable écrit. Un Service par prestation, avec la Person auteur comme provider. 3. hakkimda.html : expérience réelle, principes de travail (aucune garantie de résultat), méthode de production des articles et politique de sources. ProfilePage avec mainEntity Person (jobTitle, knowsAbout, worksFor #org). 4. rehber/index.html : articles du plus récent au plus ancien, avec date et auteur. CollectionPage et ItemList (numberOfItems). 5. rehber/[article].html : au moins 700 mots, un premier paragraphe qui répond directement à la question, une hiérarchie de H2, un tableau avec thead et th scope quand c'est utile, au moins une citation en marge, deux à quatre liens internes et des sources en fin d'article. En haut, un lien vers l'auteur et les dates de publication et de dernière mise à jour dans <time>. Article (headline, image, datePublished, dateModified, author via @id vers la Person, publisher #org). Si vous utilisez des chiffres d'exemple, indiquez qu'ils sont fictifs. 6. iletisim.html : ContactPage. 7. kvkk.html (notice de confidentialité) et 404.html. Si le cabinet ne reçoit pas de public, mets localBusiness: false dans site.config.js ; Organization plus Person suffisent. Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement cela : 1. Mise en place. Lance d'abord scaffold_site en aperçu, montre-moi la liste des fichiers, puis installe avec confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, rédige la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec ratios de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi. 2. Supprime tout JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Garde assets/site.config.js, mais uniquement comme source de la marque, des coordonnées et du bloc seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur. 3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript, donc les robots de recherche et d'IA ne voient ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien de chaque page, notice de confidentialité, "Web: Opus Growth") dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page contient les marqueurs <!-- ust:bas --><!-- ust:son --> et <!-- alt:bas --><!-- alt:son -->. Écris ensuite avec site_write_file un script Node sans dépendance, _kaynak/parca-bas.mjs : il insère les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien du menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant 404 et les pages noindex). Construis le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents. 4. Héberge les polices toi-même. Ce site utilise deux familles et cinq fichiers au plus ; les polices des titres, du chapeau en italique et du corps apparaissent toutes sur le premier écran, donc précharge les quatre. Dans la démo, ne précharger que deux polices a fait monter le CLS d'un long article à 0,24 et fait tomber la Performance mobile à 86 ; en préchargeant les quatre, le CLS est tombé à 0 et la Performance est montée à 99. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch dans _kaynak/fontshare.css, lis-le avec site_read_file et ne garde que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Mets les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas les polices par défaut Inter, Roboto, Poppins ou Montserrat. 5. Compile Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car ce conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Lance "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, puis attends avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne de préchargement pour chaque fichier de police utilisé sur le premier écran (titre, accent et corps ; as="font" type="font/woff2" crossorigin). Des lignes de préchargement placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans préchargement s'affiche tardivement, décale la page et augmente le CLS ; enfin <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit un 404, et l'erreur en console abaisse le score Best Practices. 6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos très détaillées). Chaque <img> a un srcset, des sizes correspondant à la mise en page réelle, width et height (CLS nul) et un texte alt pertinent et honnête. fetchpriority="high" va uniquement sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est du texte, aucune image n'a fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg. 7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; pas d'attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; pas d'espaces en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]). 8. Données structurées. Renseigne le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et lance "node seo-stamp.mjs" avec site_run_command ; il pose Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main le schema propre à chaque page : sur toutes les pages, un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par prestation, Person et ProfilePage pour l'auteur, ItemList sur l'index des guides et Article sur chaque guide. Écris chaque nœud dans son PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et ne voit pas un BreadcrumbList placé dans @graph. Relie les nœuds par @id. N'invente jamais horaires d'ouverture, coordonnées géographiques, notes, avis, récompenses, nombres de clients ou certificats ; omets les champs inconnus. 9. Accès des IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact de l'activité en deux phrases, les pages importantes avec une ligne chacune, et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page). 10. Rédaction. Chaque page a au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font 48 à 60 caractères, les descriptions 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, dis-le clairement : il est fictif. Contrôles. Après chaque modification, lance-les avec site_run_command dans cet ordre et ne passe pas à la suite tant que chacun n'est pas propre : 1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilation Tailwind (à refaire si tu as ajouté des classes). 2. node seo-check.mjs : 0 erreur et 0 avertissement. S'il signale "gövde kısa" (corps trop court), ajoute du vrai texte, pas du remplissage. 3. node design-check.mjs : 0 erreur. Le seul avertissement admis est "Hiç hareket yok" (aucun mouvement) ; c'est un choix délibéré pour le confort de lecture, donne-en la raison dans le rapport. 4. n