Comment créer un site Internet avec ChatGPT?

Saviez-vous que l'intelligence artificielle peut vous aider à concevoir un site web de A à Z? 🤔

Les experts de l'agence digitale Promoovoir se sont penchés sur la question et vous proposent ce guide étape par étape pour créer votre site web sur ChatGPT !

Nous avons essayé de créer un site web avec ChatGPT

Il faut commencer par préciser que ChatGPT ne peut pas publier et diffuser votre site en ligne (ce n'est pas un hébergeur ni un CMS comme Wix, Wordpress ou Shopify), mais il va en revanche vous donner tous les éléments pour vous assister dans la conception de vos pages web, comme si vous étiez conseillé par un spécialiste (développeur, designer, rédacteur) en temps réel !

Commencez par lui demander de générer le design de votre site web

Pour démarrer, rien de plus simple, décrivez simplement à ChatGPT le site web que vous souhaitez créer et demandez-lui de générer une image avec ce design (nous utilisons GPT4 pour ce test).

Voici le prompt (la commande texte) que nous avons utilisé pour notre exemple :

Je veux créer un site web vitrine pour une marque de croquettes pour chiens, des croquettes délicieuses et naturelles, bio, avec de la véritable viande. Je veux un design épuré, moderne et compréhensible, avec des couleurs vives et de belles images de chiens heureux.

Génère une image du design idéal de la page d'accueil pour ce projet web, je veux une image détaillée et précise, pas un simple croquis.

Notre conseil : soyez très précis dans vos instructions, quant au style du site, son contenu, la description des produits ou services qui y seront promus. Plus vous donnerez de détails, plus ChatGPT comprendra votre besoin.

ChatGPT va utiliser Dall-E, le générateur d'images d'OpenAI gavé des milliards d'images glanées (volées?) sur le web pour vous proposer un résultat personnalisé.

Voici notre prompt

Le résultat n'est pas révolutionnaire (logique, l'IA ne fait que reproduire ce qui existe, elle n'invente rien de nouveau) mais il est largement exploitable comme base de travail. Vous pouvez aussi lui demander une suggestion de design pour votre carte de visite tant qu'à faire !

N'hésitez pas à recommencer plusieurs fois (autant que nécessaire), à peaufiner votre demande jusqu'à obtenir satisfaction !

Pour les autres pages du site (boutique, formulaire de contact etc.) demandez-lui de les générer une à une.

Et voilà, vous avez maintenant une belle maquette de site que vous allez pouvoir reproduire sur des éditeurs visuels de sites web comme Wix, Wordpress...

Vous avez la flemme? Engagez un webdesigner professionnel noté 5/5 : Contactez Promoovoir 😎

En bonus : créez vos photos avec l'intelligence articielle

Vous avez besoin de photographies pour votre site? Il suffit encore de demander à l'IA conversationnelle !

Voici le prompt que nous avons utilisé :

Je veux maintenant que tu génères la photographie principale qui sera utilisée sur la page d'accueil de mon site Bioquettes, un beau chien heureux, plein de vie, avec de belles croquettes à la viande véritable, dans un environnement naturel (avec de l'herbe verte).

Une belle photographie créée par l'intelligence artificielle

Le résultat est franchement bluffant, sur ce point Dall-E (le générateur intégré dans ChatGPT) est aussi bon que Midjourney et Stable diffusion (d'autres outils populaires de création d'images par IA). Bien entendu, utiliser l'intelligence artificielle pour produire vos images pose des questions éthiques, si vous avez le budget il sera préférable d'engager un photographe professionnel pour cela ! Mais ça reste une bonne alternative aux banques d'images (que l'on retrouve chez tous les concurrents).

Passez ensuite à la rédaction des textes

Une fois l'étape "visuelle" terminée, demandez à ChatGPT d'être votre rédacteur web! Voici le prompt que nous avons utilisé :

Rédige les textes pour la page d'accueil du site web, la marque s'appelle Bioquettes , elle propose des croquettes délicieuses, bio, naturelles, avec de la viande et des ingrédients de qualité supérieure. Je veux des textes optimisés pour le SEO sur ce type de mots-clés : croquettes bio, croquettes naturelles pour chien, meilleures croquettes...

Voici le résultat :

Pas mal non? ChatGPT est un rédacteur !

Les textes sont fluides et naturels. Pratique si vous n'avez pas de compétences littéraires, néanmoins ça reste des textes un peu "basiques".

N'oubliez pas le SEO !

💡 Notre conseil d'expert : pensez au référencement naturel SEO et demandez à ChatGPT d'intégrer vos mots-clés dans le texte (ou de vous en suggérer). C'est un bon début pour être premier sur Google (même si c'est loin d'être suffisant).

Dernière étape : reproduisez la maquette et intégrez les contenus sur un CMS comme Wix

Vous avez désormais tous les éléments en main pour construire vous-même votre site web vitrine ou e-commerce sur un éditeur visuel no code (le plus simple). L'image de webdesign générée par ChatGPT vous servira de référence (comme un template) pour votre mise en page. Vous intégrez ensuite vos contenus (photographies et textes) et voilà !

Wix est le meilleur logiciel pour créer son site

Notre conseil : utilisez Wix, c'est l'outil le plus simple pour la création de site internet sans connaissances techniques en codage HTML. On ne dit pas ça parce qu'on est des experts de Wix 😇

D'ailleurs, sans même avoir besoin d'utiliser ChatGPT vous pouvez également créer un site avec l'IA sur Wix grâce au AI Website Builder de Wix ! L'assistant (chatbot) vous assiste dans la conception de votre website en mode "automatique".

Autre option : demander à ChatGPT de générer le code source HMTL de votre page web

Si vous êtes un peu à l'aise en codage et développement web, vous pouvez aussi demander à ChatGPT de générer le code HTML de vos pages, il sait très bien le faire, voici la commande utilisée pour notre test :

Génère le code source au format HMTL de la page d'accueil du site, en y intégrant les textes que tu as créé, des images et des pictogrammes, je veux un design épuré et moderne.

Et voici le résultat (il nous a également donné la feuille de style CSS) :

ChatGPT est un bon codeur HTML !

Lors de la formulation de votre demande, il est crucial d'être précis dans la description des éléments à inclure sur la page, tels que les conteneurs div, les éléments de navigation nav, les en-têtes header, et les sections section. Vous pouvez aussi spécifier l'usage des balises sémantiques pour une meilleure accessibilité et référencement SEO. De plus, indiquer des détails sur les attributs CSS liés, comme les classes ou les identifiants, peut aider ChatGPT à structurer le code de manière plus efficace.

ChatGPT peut également intégrer des balises meta pour l'optimisation SEO, générer des attributs alt pour les images, et respecter les normes d'accessibilité web ARIA. En plus, pour des interactions plus complexes, vous pourriez lui demander d'incorporer des scripts JavaScript pour enrichir les fonctionnalités de la page, telles que les événements onClick ou les animations CSS3.

😲 Au fait, ça n'est pas si facile que ça en a l'air (surtout pour le référencement)

Alors, on précise, ça a l'air simple dit comme ça mais bien sûr tout le monde ne sera pas capable de transformer les suggestions de ChatGPT ou de Gemini en un beau site professionnel et fonctionnel, ça reste un métier (d'ailleurs, c'est mon métier) !

Sans même parler du référencement naturel qui nécessite une expertise et une expérience très pointue. Demander à ChatGPT "rédige un texte optimisé SEO" n'est absolument pas suffisant pour positionner votre site Internet en premier sur Google (sinon vous imaginez bien que n'importe quel clampin serait passé devant toute sa concurrence depuis longtemps), ni même pour vous référencer dans les réponses de ChatGPT lui-même (comme nous l'avons fait pour nos clients).

Pour référencer son site en premier sur les moteurs de recherche et obtenir une visibilité optimale sur la toile il y a de nombreuses opérations à effectuer (achat de liens sponsorisés, optimisation des métadonnées, création de contenus réguliers...), c'est un vrai job !

ChatGPT est une aide, un assistant, mais en aucun cas il ne va pouvoir vous créer un site clé-en-main (avec hébergement, nom de domaine, excellent référencement).

Vous savez qui contacter si vous avez besoin d'un site vraiment professionnel, responsive et surtout performant ! 😉

Promoovoir booste votre présence sur le web !

Petite note finale : Le monde de l'intelligence artificielle n'est pas un conte de fée, derrière ces réponses qui semblent "magiques" il y a des droits d'auteur qui sont souvent bafoués et des petites mains, des travailleurs exploités dans les pays pauvres (ils accusent en ce moment OpenAI d'esclavage moderne).