Case Study E-Commerce

Comment j'ai créé un outil qui optimise +100 fiches produits en 5 minutes

Mon client passait 6h par jour sur des tâches répétitives. J'ai développé une app IA qui automatise 100% du process. Voici exactement comment la recréer.

❌ Avant
6h / 10 produits
30-45 min par fiche
✅ Après
5 min / 50 produits
Productivité ×50
NF
Nathan Fenina
Fondateur Decupler · Expert SEO & IA · 12 ans d'expérience
E-Commerce Automation Suite — Démo Live
⚠️ Le Problème

+3000 produits à optimiser.
Un vrai cauchemar.

Mon client e-commerce avait plus de 3000 références à traiter. Chaque fiche produit = 30 à 45 minutes de travail manuel. Des "petites mains" faisaient des erreurs. Process lent, coûteux, non scalable.

  • 🔍Chercher les bonnes images produit sur le web
  • ✍️Rédiger une description SEO unique (500-700 mots)
  • 🏗️Structurer les Hn (H1, H2, H3) intelligemment
  • 📊Ajouter les données structurées (Schema.org)
  • 🏷️Générer les Meta Title & Description optimisés CTR
  • Créer une FAQ complète (8-10 questions/réponses)
  • 🔗Générer les blocs "Produits similaires" et "Alternatives"

⏱️ Temps par fiche (AVANT)

Recherche images5-8 min
Rédaction description SEO10-15 min
Structure Hn3-5 min
Données structurées JSON-LD5-8 min
Meta tags (Title + Desc)3-5 min
FAQ + Produits similaires5-8 min
Total par fiche30-45 min
✅ La Solution

Ce que l'outil automatise

Un seul clic = un pack complet prêt à intégrer dans votre CMS.

🖼️

Images Produit

Recherche automatique des meilleures images via SerpApi (Google Images). Visuels réels de catalogue.

✍️

Description SEO

Contenu optimisé 500-700 mots avec HTML riche (H2, H3, listes). Prêt pour WordPress, Shopify, PrestaShop.

🏗️

Structure Hn

Hiérarchie sémantique intelligente (H1, H2, H3) respectant les bonnes pratiques SEO.

📊

Schema.org (JSON-LD)

Données structurées Product Schema et FAQ Schema générées automatiquement.

🏷️

Meta Title & Description

Meta Title (70 car) et Meta Description (160 car) optimisés pour le CTR.

FAQ Automatique

8-10 questions/réponses par produit + blocs "Produits similaires".

🛠️ Stack Technique

Le Moteur derrière l'outil

Chaque brique choisie pour maximiser vitesse et qualité.

React 18 + Vite

Framework front-end réactif et rapide. Hot Module Replacement instantané, build production ultra-optimisé.

React 18ViteJSXHooks
🎨

Tailwind CSS

Design system utility-first, look "SaaS premium" sans CSS custom.

TailwindResponsive
🤖

Gemini 2.5 Flash

IA Google pour génération SEO ultra-rapide et économique. JSON structuré en une seule passe.

Gemini 2.5 FlashGemini 2.5 ProJSON Mode
🔍

SerpApi (Google Images)

Recherche d'images produit réelles et professionnelles via l'API Google Images.

SerpApiGoogle Images
📦

Export : JSZip (Images + CSV)

Tout packagé en ZIP prêt à l'import. CSV avec toutes les colonnes CMS. Images renommées SEO.

JSZipCSV ExportBulk Download
📋 Tutoriel Complet

Créez cette app étape par étape

Chaque étape est détaillée pour avancer sans bloquer.

1

Créer votre compte Google AI Studio & obtenir la clé API Gemini

Google AI Studio est l'interface de développement pour les modèles Gemini. C'est là que vous allez tester vos prompts et obtenir votre clé API. L'accès est gratuit.

📌 Étapes détaillées :

  1. Ouvrez aistudio.google.com
  2. Connectez-vous avec votre compte Google
  3. Dans le menu de gauche, cliquez sur "Get API Key"
  4. Cliquez "Create API Key" — Google créera un projet automatiquement
  5. Votre clé apparaît. Elle commence par AIza... — copiez-la
  6. Stockez cette clé dans un fichier texte sécurisé
Pourquoi Gemini et pas GPT-4 ? Gemini 2.5 Flash est beaucoup plus rapide et moins cher pour la génération de contenu structuré. Optimisé pour le débit — parfait pour traiter 50+ produits en batch.
💡

Plan gratuit : ~15 requêtes/minute et 1 500/jour. Largement suffisant pour des centaines de produits par jour.

2

Prototyper vos prompts dans AI Studio

80% de la qualité de votre outil dépend de vos prompts. AI Studio permet de tester sans coder.

📌 Configuration du prompt :

  1. Cliquez "Create New Prompt"
  2. Sélectionnez "Gemini 2.5 Flash" en haut à droite
  3. Dans "System Instructions", collez le Master Prompt (étape 3)
  4. Tapez un produit test : "Machine à café Delonghi Magnifica S ECAM 22.110.B"
  5. Activez "JSON Mode" dans les paramètres avancés
  6. Réglez la température à 0.3-0.4 (résultat cohérent)
  7. Cliquez "Run" et analysez le résultat

🔬 Protocole de test obligatoire

Testez avec au minimum 10 produits dans des catégories variées :

  • Électroménager : "Machine à café Delonghi Magnifica S"
  • High-tech : "iPhone 16 Pro Max 256 Go"
  • Mode : "Nike Air Max 90 Homme Blanc"
  • Sport : "VTT électrique Decathlon Rockrider E-ST 900"
  • Maison : "Canapé convertible 3 places gris anthracite"
  • Beauté : "Sérum vitamine C 30ml La Roche-Posay"
  • Alimentaire : "Huile d'olive extra vierge bio Puget 1L"
  • Jardin : "Robot tondeuse Husqvarna Automower 305"

Vérifiez : JSON valide ? Meta Title < 70 car ? Description 500-700 mots ? FAQ naturelles ?

🎯

Itération : Modifiez le System Prompt, pas le message. 5-10 itérations suffisent pour un prompt robuste.

3

Le Master Prompt : architecture en 3 piliers

Structuré en 3 blocs distincts. Ne supprimez aucun bloc — ils fonctionnent ensemble.

systemInstructionsMASTER PROMPT
// ═══ PILIER 1 : LE RÔLE ═══
"Tu es un expert SEO e-commerce senior avec 15 ans
d'expérience. Tu maîtrises :
- Schema.org et les données structurées JSON-LD
- Les structures de titres (Hn) pour le SEO
- L'optimisation de fiches produit pour Google
- L'optimisation pour les moteurs IA (GEO)"

// ═══ PILIER 2 : LA MISSION ═══
"Pour chaque produit, génère un pack SEO complet :
1. metaTitle → max 70 caractères, mot-clé en premier
2. metaDescription → max 160 caractères, avec CTA
3. descriptionHtml → 500-700 mots, HTML riche (H2/H3)
4. structureHn → tableau des titres H1/H2/H3
5. jsonLd → Schema.org Product + FAQ valides
6. faq → 8-10 questions/réponses naturelles
7. produitsSimilaires → 5 suggestions avec raison
8. alternatives → 3 produits alternatifs"

// ═══ PILIER 3 : LA CONTRAINTE ═══
"RÈGLES STRICTES :
- Retourne UNIQUEMENT du JSON valide
- Aucun texte avant ou après le JSON
- Aucun bloc markdown (pas de ```)
- Le JSON doit être parsable par JSON.parse()
- Respecte EXACTEMENT les noms de clés ci-dessus"

🧠 Pourquoi chaque pilier est essentiel

Pilier 1 (Rôle) : Sans rôle, l'IA répond de façon générique. Le persona d'expert conditionne la qualité.

Pilier 2 (Mission) : La liste numérotée avec noms de clés JSON = l'IA mappe directement dans sa sortie.

Pilier 3 (Contrainte) : Le plus important. Instruction + JSON Mode = output propre à 100%.

⚠️

Erreur #1 : Oublier le Pilier 3. Le JSON est enveloppé dans des backticks et JSON.parse() échoue. Toujours inclure "UNIQUEMENT du JSON valide" + JSON Mode.

🔧

Personnalisation CMS : PrestaShop → ajoutez reference, short_description, tags. Shopify → vendor, product_type, handle.

4

Obtenir votre clé SerpApi pour les images

SerpApi donne accès à Google Images via API. 100 recherches/mois gratuites.

📌 Étapes :

  1. Inscrivez-vous sur serpapi.com (gratuit)
  2. Confirmez votre email, connectez-vous au Dashboard
  3. Copiez votre API Key affichée sur la page d'accueil
  4. Plan gratuit = 100 recherches/mois = 100 produits gratuits
  5. Stockez cette clé avec votre clé Gemini

🖼️ Fonctionnement de la recherche d'images

L'outil envoie une requête SerpApi avec le nom du produit + "product photo". L'API retourne les URLs des meilleures images Google. Vous sélectionnez, elles sont incluses dans l'export ZIP.

Pourquoi pas des images IA ? Images IA détectées par Google = pénalité SEO. Photos réelles = rendu authentique et crédible.

💡

Alternative : Utilisez weserv.nl comme proxy d'images côté front-end pour contourner les restrictions CORS.

5

Développer l'application React

Architecture simple : front React + Serverless Functions pour les appels API.

Structure du projetARCHITECTURE
📁 ecommerce-automation/
├── 📁 api/                     ← Serverless Functions
│   ├── generate.js             ← Appelle Gemini
│   └── images.js               ← Appelle SerpApi
├── 📁 src/                     ← Frontend React
│   ├── App.jsx                 ← Layout principal
│   ├── ProductInput.jsx        ← Formulaire saisie
│   ├── ProductCard.jsx         ← Résultat produit
│   ├── BulkProcessor.jsx       ← Traitement en masse
│   ├── ExportManager.jsx       ← Export CSV + ZIP
│   └── SimulationMode.jsx      ← Données démo
├── package.json
├── vite.config.js / tailwind.config.js
├── vercel.json                 ← Config déploiement
└── .env                        ← Clés API (LOCAL !)

⚙️ Fichiers backend (/api/)

generate.js : Reçoit un nom de produit → appelle Gemini avec le Master Prompt → valide le JSON → retourne le pack SEO complet au front-end.

images.js : Reçoit un nom de produit → appelle SerpApi (Google Images) → retourne les URLs et miniatures des 10 meilleures images.

api/generate.jsJAVASCRIPT
export default async function handler(req, res) {
  const { productName } = req.body;
  const response = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${process.env.GEMINI_API_KEY}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        systemInstruction: {
          parts: [{ text: MASTER_PROMPT }]
        },
        contents: [{ parts: [{ text: productName }] }],
        generationConfig: {
          responseMimeType: 'application/json',
          temperature: 0.3
        }
      })
    }
  );
  const data = await response.json();
  const seoPackage = JSON.parse(
    data.candidates[0].content.parts[0].text
  );
  res.status(200).json(seoPackage);
}
🎯

Point crucial : Le paramètre responseMimeType: 'application/json' = l'équivalent API du "JSON Mode". Combiné avec le Pilier 3, parsing 100% fiable.

💡

Pour débuter : Utilisez Cursor, Claude ou ChatGPT pour générer le code React à partir de cette architecture + le Master Prompt.

6

Versionner sur GitHub

GitHub héberge votre code et permet le déploiement automatique via Vercel.

📌 Étapes :

  1. Créez un compte github.com (gratuit)
  2. Installez Git (Mac : brew install git, Windows : git-scm.com)
  3. Sur GitHub → "New Repository" → nommez-le → Private
  4. Exécutez les commandes ci-dessous
TerminalBASH
# 1. Créer .gitignore AVANT tout commit
echo "node_modules/\n.env\n.env.local\ndist/" > .gitignore

# 2. Initialiser Git
git init
git add .
git commit -m "feat: e-commerce SEO automation tool"

# 3. Lier au repo GitHub
git remote add origin https://github.com/VOTRE-USER/ecom-seo-automation.git
git branch -M main
git push -u origin main
🔒

CRITIQUE : Le .gitignore DOIT être créé AVANT le premier commit. Il exclut .env contenant vos clés API. Si vous pushez vos clés par erreur, changez-les immédiatement.

7

Déployer sur Vercel — En ligne en 5 minutes

Vercel détecte Vite automatiquement, déploie les Serverless Functions, gère HTTPS + CDN.

📌 Étapes :

  1. vercel.com → Sign Up → "Continue with GitHub"
  2. "Add New... → Project" → sélectionnez votre repo
  3. Vercel détecte Vite — ne changez rien aux settings
  4. Dans "Environment Variables" ajoutez :

    GEMINI_API_KEY = AIza...
    SERP_API_KEY = votre_clé
  5. Cliquez "Deploy" — app live en ~60 secondes !

🔄 Mises à jour automatiques

Chaque git push déclenche un re-déploiement :

  • Modification locale → commit → push sur GitHub
  • Vercel détecte le changement en ~5 secondes
  • Nouveau build (~30s) → app mise à jour, zéro downtime
💡

Domaine custom : Par défaut sur xxx.vercel.app. Ajoutez votre domaine dans Settings → Domains. SSL automatique.

🔒

Sécurité : Les Environment Variables Vercel sont chiffrées et accessibles uniquement par vos Serverless Functions. Jamais exposées dans le navigateur.

🧠 Prompt Engineering

Les 3 piliers du Master Prompt

Sans un prompt solide, l'IA produit du contenu générique.

1

Le Rôle

"Expert SEO e-commerce senior." Un rôle précis conditionne la qualité de chaque output.

2

La Mission

"Pack complet avec noms de clés JSON précis." Chaque livrable spécifié avec contraintes.

3

La Contrainte

"JSON valide uniquement, parsable par JSON.parse()." Élimine 100% des erreurs.

🚀 Pipeline

Du code au déploiement

3 outils. Simple, robuste, gratuit.

🧪

AI Studio

Prototypage rapide des prompts avant d'écrire une ligne de code.

📂

GitHub

Versioning du code. Chaque modification tracée et sauvegardée.

Vercel

Déploiement auto à chaque git push. HTTPS, CDN, Serverless inclus.

⭐ Fonctionnalités Expert

Le facteur WOW

🎮

Simulation Mode

Données réelles injectées en un clic pour démo immédiate. Parfait pour impressionner les clients.

🖼️

Image Proxying

weserv.nl / corsproxy.io pour contourner les blocages CORS. Miniatures sans erreur.

Validation Manuelle

L'IA propose, l'humain dispose. Chaque champ éditable avant export. Contrôle total.

🔄 Adapter

Comment adapter ce projet à votre CMS

3 leviers de personnalisation.

1

Clés JSON → Champs CMS

Modifiez les noms de clés du Master Prompt pour matcher Shopify, PrestaShop, WooCommerce.

2

Ton & Style

Ajoutez des instructions de ton : "professionnel", "tutoiement", "style luxe/premium".

3

Export Format

CSV configurable. Ajoutez colonnes (SKU, catégorie, prix) pour votre template d'import.

Envie d'automatiser votre e-commerce ?

Je développe des outils sur-mesure ou vous accompagne dans la mise en place de votre stack SEO + IA.

Réserver un appel stratégique →

✓ Gratuit · 30 minutes · Sans engagement

🔒

Débloquez le Guide Complet

Vous consultez un contenu premium. Entrez votre email pour accéder instantanément à la suite du guide et aux prompts.

✅ Accès débloqué ! Bonne lecture.
Retour en haut