Guide : concevoir un site avec l'IA pour la plateforme

La plateforme héberge des sites statiques : des pages HTML, du CSS, du JavaScript et des images. C'est exactement ce que produisent les outils d'IA quand on leur demande un site simple. Ce guide explique quoi demander à l'IA pour que votre site fonctionne du premier coup, y compris le formulaire de contact.

1Le prompt à copier

Copiez ce texte au début de votre demande à l'IA (ChatGPT, Claude, Gemini ou autre), puis décrivez votre projet à la place des crochets. Il contient toutes les règles techniques de la plateforme.

Crée-moi un site web statique pour [décris ton projet : qui tu es, ce que tu offres, le ton, les couleurs, les pages voulues].

Contraintes techniques obligatoires :
- Uniquement HTML, CSS et JavaScript qui s'exécute dans le navigateur. Pas de PHP, pas de base de données, pas de Node, pas de framework à compiler (React, Vue, Next, Vite).
- Une page index.html à la racine, et une page HTML par section (apropos.html, services.html, contact.html, etc.). Liens relatifs entre les pages, par exemple href="apropos.html".
- Fichiers permis : .html, .css, .js, images .webp .jpg .png .svg, polices .woff2. Aucun PDF, aucune vidéo ni aucun fichier audio dans le site : intègre les vidéos YouTube ou Vimeo avec un iframe.
- Formulaire de contact : un <form> HTML ordinaire avec method="post" et SANS attribut action. Aucun JavaScript qui intercepte l'envoi, aucun service externe (Formspree, Netlify, EmailJS), aucun champ de type file.
- Chaque champ du formulaire a un attribut name clair : nom, courriel, telephone, message. Le champ du courriel s'appelle exactement "courriel" et est de type email.
- N'ajoute aucun captcha, ni reCAPTCHA, ni hCaptcha, ni Turnstile. Laisse un peu d'espace sous le bouton d'envoi.
- Crée une page merci.html (message de remerciement après l'envoi du formulaire, avec un lien vers l'accueil) et une page 404.html (page introuvable).
- Ne crée pas de favicon, de robots.txt ni de sitemap.xml, et ne mets aucune balise <link rel="icon">.
- Référencement (SEO) : chaque page a un <title> unique (moins de 60 caractères) et une <meta name="description"> unique (moins de 160 caractères), un seul <h1>, des titres <h2> et <h3> dans l'ordre, des balises sémantiques (header, nav, main, section, article, footer), un texte alt descriptif sur chaque image et une balise <link rel="canonical"> avec l'adresse complète de la page.
- Moteurs d'IA (GEO) : un contenu clair et factuel qui dit qui je suis, ce que j'offre, où et pour qui ; mes coordonnées écrites de la même façon sur toutes les pages ; une section FAQ avec de vraies questions et réponses ; des données structurées JSON-LD schema.org (Organization ou Person ou LocalBusiness selon le cas, et FAQPage pour la FAQ) dans le <head> de l'accueil.
- Partage Facebook et réseaux sociaux : sur chaque page, les balises Open Graph og:title, og:description, og:url, og:type, og:locale et og:image, plus twitter:card="summary_large_image". og:url et og:image sont des adresses complètes qui commencent par https://[adresse de mon site]. Crée une image de partage de 1200 x 630 pixels (images/partage.jpg) qui présente le site.
- Aucun témoin (cookie) et aucun outil de statistiques.
- Images optimisées (moins de 500 Ko chacune), noms de fichiers en minuscules, sans espaces ni accents.
- Livre le tout dans un seul fichier ZIP, avec index.html à la racine.
Si l'IA vous livre le code page par page au lieu d'un ZIP, demandez-lui : « Donne-moi le tout dans un fichier ZIP téléchargeable. » Vous pouvez aussi enregistrer chaque fichier vous-même dans un dossier, puis le compresser en ZIP.

2Le contenu du ZIP

  • index.html doit être à la racine du ZIP. Un seul dossier englobant est accepté aussi (monsite/index.html) : il est retiré automatiquement.
  • Limites : ZIP de 50,0 Mo au plus, 1 000 fichiers au plus, 10,0 Mo par fichier et 150,0 Mo une fois décompressé.
  • Fichiers acceptés : HTML, CSS, JavaScript (.js, .mjs), images (PNG, JPEG, GIF, WebP, AVIF, SVG, ICO), polices (WOFF, WOFF2, TTF, OTF), JSON, XML, texte et webmanifest.
  • Les autres fichiers (PDF, vidéos, sons, PHP, documents Word, etc.) sont ignorés. Le rapport d'import les énumère avec la raison : vous savez toujours ce qui a été pris.
  • Le nouveau ZIP remplace tout le site : les fichiers absents du ZIP disparaissent de la nouvelle version.

3Pages et liens

  • Faites une page HTML par section : c'est ce qui fonctionne le mieux et ce que les moteurs de recherche préfèrent.
  • Adresses propres : /apropos affiche apropos.html, et /blogue/ affiche blogue/index.html. Vos liens peuvent donc s'écrire href="apropos.html" ou href="/apropos".
  • Une page 404.html dans votre ZIP remplace la page « introuvable » de la plateforme.
  • Les liens vers d'autres sites, les polices Google Fonts et les bibliothèques sur un CDN (Bootstrap, Font Awesome, etc.) fonctionnent normalement.
Lovable, Bolt et les outils semblables produisent souvent une application React ou Vite. Elle doit d'abord être « construite » : demandez à l'outil de compiler le projet avec base: './', puis mettez dans le ZIP le contenu du dossier dist (et non le code source). Ses pages internes doivent utiliser un routeur à dièse (adresses en /#/contact) : sans cela, recharger une page interne donne « introuvable ». Le plus simple reste de demander un site en HTML ordinaire, comme dans le prompt.

4Le formulaire de contact

Au téléversement, chaque formulaire sans destination externe est relié automatiquement à la plateforme : un formulaire sans action, avec action="#", action="mailto:…" ou une page .php. Le portail vous indique combien de formulaires ont été reliés.

<form method="post">
    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" required>

    <label for="courriel">Courriel</label>
    <input type="email" id="courriel" name="courriel" required>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Envoyer</button>
</form>
  • Courriel de réception : choisissez-le dans le portail, page du site > Réglages. Sans courriel, les messages sont seulement gardés dans « Formulaires reçus ».
  • Répondre au visiteur : un champ dont le nom contient « courriel », « email » ou « e-mail » devient l'adresse « Répondre à » du message que vous recevez.
  • Après l'envoi, le visiteur voit votre page merci.html si elle existe, sinon la page « Merci » de la plateforme. Pour une autre page, ajoutez dans le formulaire : <input type="hidden" name="_next" value="/merci-inscription.html">.
  • Les champs dont le nom commence par « _ » ne sont pas transmis : ils sont réservés à la plateforme.
  • Limites : 50 champs par formulaire, 5000 caractères par champ, et 5 envois par visiteur par 10 minutes.
  • Les messages sont gardés 365 jours dans le portail, puis effacés automatiquement.
  • Plusieurs formulaires (contact, inscription, soumission) peuvent exister dans le même site : chaque message indique la page d'où il vient.
Un formulaire dont l'action pointe vers un autre service (Formspree, Netlify, Google Forms, EmailJS) est laissé tel quel : il n'est pas relié à la plateforme et ses messages n'arrivent pas dans le portail. Un formulaire envoyé par JavaScript (fetch, AJAX) ne fonctionne pas non plus : demandez un envoi HTML ordinaire.

5Pièces jointes

Les formulaires de la plateforme transmettent du texte seulement : un champ de type file est ignoré et le fichier n'est pas reçu. Pour recevoir des fichiers (photos, CV, maquettes), deux solutions :

  • demander un lien de partage dans le formulaire (Google Drive, Dropbox, WeTransfer) : <input type="url" name="lien_fichiers" placeholder="Lien vers vos fichiers"> ;
  • inviter le visiteur à joindre ses fichiers en répondant au courriel que vous lui enverrez.

6Protection anti-robot (Turnstile)

  • Elle est ajoutée automatiquement à chaque formulaire relié : une petite case de vérification Cloudflare apparaît à la fin du formulaire, sous le bouton. Le visiteur n'a souvent rien à faire.
  • N'ajoutez aucun captcha vous-même (reCAPTCHA, hCaptcha, Turnstile) : il entrerait en conflit avec celui de la plateforme.
  • Un champ piège invisible est aussi ajouté, et chaque visiteur est limité à 5 envois par 10 minutes.
  • Avec un domaine personnalisé, vous pouvez entrer vos propres clés Turnstile dans la carte du domaine ; sans clés, le champ piège et la limite d'envois protègent le formulaire.

7Favicon

  • Le favicon se téléverse dans le portail, carte « Favicon » de la page du site : une image carrée PNG, JPEG, WebP ou GIF, de 180 pixels ou plus.
  • Ne le mettez pas dans le ZIP : favicon.ico, favicon.png et apple-touch-icon.png y sont ignorés.
  • N'ajoutez aucune balise <link rel="icon"> : la plateforme ajoute les bonnes balises à chaque page, et retire celles que l'IA aurait mises.
  • Sans favicon, votre site prend celui de son domaine mère.

8Images, vidéos, polices et documents

  • Images : préférez WebP ou JPEG, de moins de 500 Ko chacune et de 2000 pixels de large au plus. Des images légères rendent le site rapide sur téléphone.
  • Vidéos et musique : publiez-les sur YouTube, Vimeo, SoundCloud, Spotify ou Bandcamp et intégrez le lecteur (iframe). Elles ne peuvent pas être dans le ZIP.
  • PDF et documents : déposez-les sur Google Drive ou Dropbox et faites un lien de partage.
  • Polices : Google Fonts par lien, ou des fichiers .woff2 dans le ZIP.

9Référencement, moteurs d'IA et partage

Trois choses à soigner pour que votre site soit trouvé, cité et partagé. Le prompt du début les demande déjà ; remplacez [adresse de mon site] par votre adresse réelle (par exemple votre-nom.zicspace.com, ou votre domaine personnalisé).

  • Référencement (SEO) : un <title> et une <meta name="description"> uniques par page, un seul <h1>, des titres dans l'ordre, un texte alt sur chaque image et une adresse canonique. robots.txt et sitemap.xml sont produits automatiquement : ne les mettez pas dans le ZIP.
  • Moteurs d'IA (GEO) : ChatGPT, Gemini, Perplexity et les autres citent les sites qui répondent clairement aux questions. Dites en toutes lettres qui vous êtes, ce que vous offrez, où et pour qui ; ajoutez une FAQ ; gardez vos coordonnées identiques partout ; ajoutez des données structurées schema.org (JSON-LD).
  • Partage Facebook, LinkedIn et autres : les balises Open Graph choisissent le titre, le texte et l'image qui apparaissent quand quelqu'un partage votre lien. L'image doit faire 1200 x 630 pixels, être dans le ZIP et être donnée par une adresse complète (https://...).
<title>Marie Tremblay, photographe de mariage à Québec</title>
<meta name="description" content="Photographe de mariage et de famille à Québec et Lévis. Reportages naturels, forfaits clairs, réponse en 24 h.">
<link rel="canonical" href="https://marie-tremblay.pixstudio.ca/">

<!-- Partage Facebook et réseaux sociaux -->
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_CA">
<meta property="og:title" content="Marie Tremblay, photographe de mariage à Québec">
<meta property="og:description" content="Reportages de mariage naturels à Québec et Lévis.">
<meta property="og:url" content="https://marie-tremblay.pixstudio.ca/">
<meta property="og:image" content="https://marie-tremblay.pixstudio.ca/images/partage.jpg">
<meta name="twitter:card" content="summary_large_image">

<!-- Données structurées pour Google et les moteurs d'IA -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Marie Tremblay Photographe",
    "url": "https://marie-tremblay.pixstudio.ca/",
    "image": "https://marie-tremblay.pixstudio.ca/images/partage.jpg",
    "areaServed": "Québec, Lévis",
    "email": "[email protected]"
}
</script>
Après la mise en ligne, collez votre adresse dans l'outil de débogage du partage de Facebook (developers.facebook.com/tools/debug) et cliquez « Récupérer à nouveau » : Facebook garde longtemps l'ancien aperçu d'une page. Faites-le de nouveau après chaque changement de titre ou d'image.
Si vous changez l'adresse de votre site ou ajoutez un domaine personnalisé, mettez à jour les adresses complètes (canonical, og:url, og:image) : demandez-le à l'IA ou corrigez-les dans l'éditeur du portail.

Avec une page bio à l'annuaire de votre domaine mère, votre site gagne aussi un lien de plus.

10Ce qui ne fonctionne pas

  • Code côté serveur : PHP, Python, Node, WordPress et bases de données.
  • Comptes de membres, connexion, panier d'achat intégré. Pour vendre, utilisez un lien de paiement externe (Stripe Payment Links, PayPal, Square) ou un bouton d'une boutique en ligne.
  • Envoi de formulaire par JavaScript ou vers un service externe, et pièces jointes.
  • Fichiers lourds dans le site (vidéo, audio, PDF).

Tout ce qui s'exécute dans le navigateur fonctionne : menus, animations, galeries, carrousels, onglets, cartes Google intégrées, calendriers intégrés, boutons de réseaux sociaux.

11Mettre le site à jour

  • Demandez les changements à l'IA dans la même conversation, avec le même prompt, et téléversez le nouveau ZIP : il devient une nouvelle version.
  • Pour une petite correction (un texte, un prix, une couleur), utilisez l'éditeur en ligne du portail, sans refaire de ZIP.
  • Les dernières versions sont gardées : vous pouvez revenir à une ancienne en un clic.
  • Gardez toujours une copie de votre ZIP sur votre ordinateur.

12Liste de vérification avant de téléverser

  • index.html est à la racine du ZIP.
  • Les pages s'ouvrent bien sur votre ordinateur, et les liens entre elles fonctionnent.
  • Le formulaire a method="post", aucune action, un champ « courriel » et aucun captcha.
  • Il y a une page merci.html (et une page 404.html si vous voulez).
  • Chaque page a son titre, sa description et ses balises de partage, avec votre vraie adresse ; l'image de partage est dans le ZIP.
  • Aucun favicon, aucun PDF, aucune vidéo dans le ZIP.
  • Les images sont légères.
  • Le contenu respecte les règles de contenu des conditions d'utilisation.

Après le téléversement, lisez le rapport d'import, choisissez le courriel de réception dans les réglages, téléversez votre favicon, puis envoyez-vous un message de test par le formulaire.

Voir aussi les conditions d'utilisation Créer mon site