TP: Créer un Bookmarklet (favori) d’Analyse SEO + Marketing avec l’IA

MASTERE

Durée estimée : 1 heure
Niveau : Mastère E-marketing
Outils requis : Chrome + ChatGPT + Clé API OpenAI

🚀 Le Challenge

Vous allez créer un outil d’analyse concurrentielle professionnel sous forme de bookmarklet Chrome qui :

✅ Analyse la structure SEO d’un site web (balises Hn, meta tags, images…)
✅ Évalue la stratégie marketing (proposition de valeur, CTAs, UX…)
✅ Génère un rapport complet avec scores et recommandations
✅ Utilise l’API ChatGPT pour l’analyse intelligente
✅ Fonctionne sur n’importe quel site web en un clic

💼 Pourquoi C’est important ?

Gain de temps : Auditer 50 concurrents en 1h (vs 30 min/site manuellement)
Compétence CV : « Développement d’outils IA » valorisable en entretien
Autonomie : Ne plus dépendre d’outils payants (SEMrush, Ahrefs…)

🛠️ Prérequis : Créer votre Clé API OpenAI

  1. Créer un compte : platform.openai.com/signup
  2. Clé API: https://platform.openai.com/api-keys
  3. Créer une clé API : Menu « API Keys » → « Create new secret key »
    ⚠️ Copiez la clé (commence par sk-proj-...) et conservez-la en sécurité
  4. Vérifier : Votre clé fonctionne uniquement si vous avez du crédit

🤖 Méthodologie : Le Prompting Itératif

Principe : Partir simple, tester, améliorer progressivement

  • Phase 1 – MVP : Version basique qui fonctionne (titre, H1, nombre de mots)
  • Phase 2 – Enrichissement : Ajouter images, performance, meta tags
  • Phase 3 – Intelligence : Intégrer ChatGPT pour l’analyse

📝 Prompt de Départ

Copiez ce prompt dans ChatGPT pour démarrer :

Je veux créer un bookmarklet JavaScript pour Chrome qui analyse un site web.

FONCTIONNALITÉS :
1. Extraire les données suivantes de la page actuelle :
   - Titre de la page (document.title)
   - Nombre de balises H1 (document.querySelectorAll('h1'))
   - Nombre de mots (compter les mots dans document.body.innerText)
   - Nombre d'images (document.querySelectorAll('img').length)

2. Afficher ces données dans une popup/modal au centre de l'écran

3. Bouton pour fermer la popup

CONTRAINTES TECHNIQUES :
- Tout le code doit tenir en 1 ligne (format bookmarklet)
- Compatible Chrome
- Pas de dépendances externes
- Code qui commence par : javascript:(function(){ ... })();

Génère le code JavaScript complet du bookmarklet.

Ce prompt est volontairement basique. À vous de l’améliorer progressivement !

💡 Pistes d’Amélioration

🔍 Enrichir l’Extraction

Questions à vous poser :

  • Comment extraire tous les Hn (H1, H2, H3…) ?
  • Comment récupérer la meta description ?
  • Comment compter les images avec/sans ALT ?
  • Comment détecter les formats images (JPG, PNG, WebP…) ?

Indices :

document.querySelector('meta[name="description"]')?.content
img.alt
img.src.split('.').pop()

⚡ Mesurer la Performance

Données à capturer : Poids total, temps de chargement, nombre de requêtes

Indice :

window.performance.timing
window.performance.getEntriesByType('resource')

🤖 Intégrer ChatGPT

Structure de l’appel API :

fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer VOTRE_CLE_API'
  },
  body: JSON.stringify({
    model: 'gpt-4o-mini',
    messages: [
      {role: 'system', content: 'Tu es un expert SEO...'},
      {role: 'user', content: 'Analyse ces données : ...'}
    ]
  })
})

🎯 Éviter le Piège du Modal

⚠️ Problème : Si vous analysez les Hn après avoir créé le modal, vous compterez les H1 de votre interface !

Solution : Analyser la page AVANT de créer le modal

// 1. D'abord analyser
const data = extractPageData();

// 2. Ensuite créer le modal
const modal = createModal();

// 3. Afficher les données
displayData(modal, data);

✅ Critères de Réussite

Version Minimum (MVP)

  • ✅ S’exécute sans erreur
  • ✅ Affiche 5 données minimum (titre, H1, mots, images, liens)
  • ✅ Popup fermable
  • ✅ Installé comme favori Chrome

Version Avancée

  • ✅ Intégration API ChatGPT fonctionnelle
  • ✅ Analyse avec recommandations
  • ✅ Scores SEO et Marketing
  • ✅ Interface visuelle professionnelle

⚠️ Pièges à Éviter

Sécurité : Ne JAMAIS partager votre clé API publiquement ou sur GitHub
Erreurs JS : Utilisez ?.content || 'Non disponible' pour éviter les erreurs
Debugging : Ouvrez la Console Chrome (F12) pour voir les erreurs

🎯 Checklist de Progression

Préparation (10 min)

  • ☐ Clé API OpenAI créée et créditée
  • ☐ ChatGPT ouvert
  • ☐ Console Chrome ouverte (F12)

Phase 1 : MVP (20 min)

  • ☐ Code généré et testé
  • ☐ Bookmarklet créé dans Chrome
  • ☐ Affiche titre + H1 + nombre de mots

Phase 2 : Enrichissement (20 min)

  • ☐ Meta tags extraits
  • ☐ Images analysées (ALT text)
  • ☐ Performance mesurée
  • ☐ Interface améliorée

Phase 3 : Intelligence (10 min)

  • ☐ API ChatGPT intégrée
  • ☐ Analyse générée et affichée
  • ☐ Testé sur 2-3 sites

📚 Ressources

🚀 C’est Parti !

Objectif : Créer votre bookmarklet fonctionnel en 1 heure

La correction sera faite collectivement en fin de séance. Vous pourrez comparer votre approche avec la solution optimale.

Bon courage ! 💪

📌 TP Mastère E-marketing – Lycée Saint Vincent de Paul, Nîmes
🎓 Formateur : Fabrice Ducarme – WPFormation.com

Cours en rapport

Retour en haut