webflow/webflow-skills

Audit des ressources

Analysez les ressources d'un site Webflow pour optimiser le référencement SEO.

Note importante

Utilisez TOUJOURS les outils MCP Webflow pour toutes les opérations :

• Utilisez data_assets_tool de Webflow MCP pour récupérer et mettre à jour les ressources
• Utilisez get_asset_preview de Webflow MCP (avec le asset_id de la ressource) pour analyser le contenu des images
• Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour lister les sites disponibles
• Utilisez webflow_guide_tool de Webflow MCP pour obtenir les bonnes pratiques avant de commencer
• N'utilisez AUCUN autre outil ou méthode pour les opérations Webflow
• Tous les appels d'outils doivent inclure le paramètre context requis (15-25 mots, perspective à la troisième personne)

Instructions

Phase 1 : Sélection du site et découverte des ressources

1. Obtenir le site : Identifiez le site cible. Si l'utilisateur ne fournit pas l'ID du site, demandez-le.
2. Récupérer toutes les ressources : Utilisez data_assets_tool de Webflow MCP pour obtenir toutes les ressources du site (chaque enregistrement de ressource inclut son asset_id, nécessaire pour les aperçus)
   • Pour les sites avec 50 ressources ou plus, traitez par lots de 20
   • Affichez la progression : "Traitement des ressources 1 à 20 sur 150..."
3. Détecter les schémas : Analysez le nommage des ressources pour identifier les schémas courants :
   • Téléchargements d'appareil photo (IMG_, DSC_, etc.)
   • Captures d'écran (screenshot, Screen Shot, etc.)
   • Noms génériques (untitled, image-1, etc.)
   • Noms basés sur des dates (2024-01-10, etc.)

Phase 2 : Analyse des problèmes et reconnaissance des schémas

4. Identifier les problèmes : Listez toutes les ressources qui :
   • N'ont pas de texte alternatif défini (null ou chaîne vide)
   • Ont un texte alternatif déjà présent mais de mauvaise qualité (trop court, phrases redondantes, etc.)
   • N'ont pas de nom de fichier optimisé pour le SEO
   • Sont des doublons ou très similaires
5. Rapport de détection de schémas : Affichez les schémas détectés :

   🔍 Schémas détectés :
   - 15 ressources commencent par "IMG_" (téléchargements d'appareil photo)
   - 8 ressources contiennent "screenshot"
   - Suggestion : Renommer ces schémas en masse
   

6. Demander la préférence de l'utilisateur : Demandez s'il souhaite générer :
   • Uniquement le texte alternatif
   • Uniquement les noms optimisés pour le SEO
   • Les deux
   • Appliquer un modèle de nommage

Phase 3 : Analyse et génération de suggestions

7. Analyser les ressources : Utilisez l'outil get_asset_preview de Webflow MCP, en passant le asset_id de chaque ressource (de la Phase 1), pour analyser les ressources qui nécessitent des mises à jour
   • Gestion des erreurs : Si get_asset_preview échoue, utilisez le repli :
     • Extrayez la description du nom de fichier existant
     • Utilisez un espace réservé générique avec un avertissement
     • Continuez avec les autres ressources
   • Traitez par lots pour éviter les délais d'attente
8. Générer des suggestions avec validation :
   • Validation du texte alternatif :
     • Maximum 125 caractères (avertissez si plus long)
     • Pas de phrases redondantes ("image de", "photo de")
     • Doit se terminer par une ponctuation
     • Signalez les descriptions génériques (confiance < 50%)
   • Validation du nom SEO :
     • Uniquement a-z minuscules, 0-9, traits d'union
     • Pas de doubles extensions (.webp.webp) - retirez d'abord l'extension existante
     • Maximum 100 caractères
     • Remplacez les espaces/traits de soulignement par des traits d'union
     • Pas de caractères spéciaux
9. Suggestions d'organisation des dossiers : Si des schémas sont détectés, suggérez une structure de dossiers :

   💡 Suggestions d'organisation :
   - Créer un dossier "photos-equipe" pour 8 images d'équipe
   - Créer un dossier "images-produits" pour 15 photos de produits
   

Phase 4 : Approbation granulaire et application

10. Présenter les suggestions avec approbation granulaire :
    • Affichez une liste numérotée avec cases à cocher
    • Permettez la bascule individuelle : "Entrez les numéros à ignorer (ex. '2,4')"
    • Options : "all", "none" ou des numéros spécifiques
    • Affichez les avertissements de validation pour chaque suggestion
11. Proposer un modèle de nommage (si de nombreuses ressources similaires) :

    🎨 Appliquer un modèle de nommage ?
    1. [catégorie]-[description] (ex. equipe-jean-portrait)
    2. [description]-[emplacement] (ex. bureau-espace-travail-bureau)
    3. Modèle personnalisé...
    4. Ignorer les modèles, utiliser des noms individuels
    

12. Stocker les données de rollback : Avant d'appliquer les modifications, stockez :
    • Noms de ressources d'origine
    • Texte alternatif d'origine
    • Horodatage
    • Ressources modifiées
13. Appliquer les mises à jour : Utilisez data_assets_tool de Webflow MCP pour mettre à jour uniquement les ressources approuvées
    • Affichez la progression pour les mises à jour par lots
    • Gérez les échecs partiels avec grâce
    • Rapportez les succès et les échecs séparément
14. Proposer une option de rollback : Après l'application des modifications :

    📋 Rollback disponible :
    Dernière mise à jour : 4 ressources modifiées il y a 2 minutes
    Tapez "undo" pour annuler ces modifications
    

Exemples

Invite utilisateur :

Effectuez un audit des ressources sur mon site.

Étape 1 : Rapport d'audit initial

📊 Audit SEO des ressources : MCP Demo #2

Total : 4 ressources

🔍 Schémas détectés :
- 4 ressources ont des noms numériques génériques (1.webp, 2.webp, 3.webp, 4.webp)
- Toutes les ressources sont au format WebP ✓

⚠️ Texte alternatif manquant (4 ressources) :
├── 1.webp (texte alternatif vide)
├── 2.webp (texte alternatif vide)
├── 3.webp (texte alternatif vide)
└── 4.webp (texte alternatif vide)

⚠️ Noms non optimisés pour le SEO (4 ressources) :
├── 1.webp (nom numérique générique)
├── 2.webp (nom numérique générique)
├── 3.webp (nom numérique générique)
└── 4.webp (nom numérique générique)

---

Que souhaitez-vous générer ?
1. Uniquement le texte alternatif
2. Uniquement les noms optimisés pour le SEO
3. À la fois le texte alternatif et les noms optimisés pour le SEO

Veuillez sélectionner une option (1, 2 ou 3).

Exemple avec avertissements de validation :

📋 Améliorations suggérées :

[1] ✓ IMG_1234.jpg
    Texte alternatif : "Portrait professionnel d'un membre de l'équipe avec fond bleu."
    Nouveau nom : portrait-membre-equipe-professionnel.jpg
    ✅ Validation réussie

[2] ✓ screenshot-2024.png
    Texte alternatif : "Aperçu du tableau de bord analytique montrant les métriques d'engagement des utilisateurs."
    Nouveau nom : apercu-tableau-bord-analytique.png
    ✅ Validation réussie

[3] ⚠️ untitled-image.webp
    Texte alternatif : "Photo"
    ⚠️ Avertissement : Texte alternatif trop court (< 10 caractères) - nécessite plus de détails
    Nouveau nom : untitled-image.webp
    ⚠️ Avertissement : Impossible de générer un meilleur nom (aperçu de l'image échoué)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Texte alternatif : "Image d'une personne travaillant sur un ordinateur portable dans un bureau moderne avec des plantes et un éclairage naturel à travers de grandes fenêtres en arrière-plan."
    ⚠️ Avertissement : Texte alternatif trop long (137 caractères) - envisagez de le raccourcir pour les lecteurs d'écran
    Nouveau nom : photo-equipe-2024.jpg
    ✅ Validation réussie (caractères spéciaux supprimés)

Quelles ressources souhaitez-vous mettre à jour ?

Étape 2 : Après que l'utilisateur a sélectionné l'option 3 et que les images sont analysées

📋 Améliorations suggérées :

[1] ✓ 1.webp
    Texte alternatif : "Animateur de podcast avec casque et micro enregistrant un épisode Webflow en studio."
    Nouveau nom : animateur-podcast-webflow-studio.webp
    ✅ Validation réussie

[2] ✓ 2.webp
    Texte alternatif : "Développeur professionnel portant des lunettes travaillant sur un ordinateur portable avec le logo Webflow dans un bureau moderne."
    Nouveau nom : developpeur-travail-ordinateur-bureau-webflow.webp
    ✅ Validation réussie

[3] ✓ 3.webp
    Texte alternatif : "Section hero de la page d'accueil Webflow avec tagline et formulaire d'inscription par e-mail."
    Nouveau nom : section-hero-page-accueil-webflow.webp
    ✅ Validation réussie

[4] ✓ 4.webp
    Texte alternatif : "Intervenant présentant sur scène à Webflow Conf avec un public regardant."
    Nouveau nom : intervenant-scene-webflow-conf.webp
    ✅ Validation réussie

---

Quelles ressources souhaitez-vous mettre à jour ?
- Tapez les numéros à ignorer (ex. "2,4" pour ignorer les éléments 2 et 4)
- Tapez "all" pour tout valider
- Tapez "none" pour annuler

Étape 3 : Après confirmation de l'utilisateur avec "all"

🔄 Application des mises à jour...

Progression : ████████████████████ 100% (4/4 ressources)

✅ Mises à jour appliquées avec succès !

Audit SEO des ressources terminé : MCP Demo #2

Résumé :
- ✅ 4 ressources mises à jour avec succès
- ❌ 0 ressources échouées
- ⏭️ 0 ressources ignorées

Modifications appliquées :
┌─────────────────────────────────────────────────────────────────┐
│ [1] animateur-podcast-webflow-studio.webp                       │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
├─────────────────────────────────────────────────────────────────┤
│ [2] developpeur-travail-ordinateur-bureau-webflow.webp          │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
├─────────────────────────────────────────────────────────────────┤
│ [3] section-hero-page-accueil-webflow.webp                      │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
├─────────────────────────────────────────────────────────────────┤
│ [4] intervenant-scene-webflow-conf.webp                         │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
└─────────────────────────────────────────────────────────────────┘

📋 Rollback disponible :
Dernière mise à jour : 4 ressources modifiées à l'instant
Tapez "undo" pour annuler ces modifications

---

🎉 Les ressources de votre site sont désormais entièrement optimisées pour le SEO et l'accessibilité !

Étape 3 alternative : L'utilisateur sélectionne des ressources spécifiques (ex. "1,3")

🔄 Application des mises à jour aux ressources 1 et 3...

Progression : ████████████████████ 100% (2/2 ressources)

✅ Mise à jour partielle terminée !

Résumé :
- ✅ 2 ressources mises à jour avec succès
- ❌ 0 ressources échouées
- ⏭️ 2 ressources ignorées (comme demandé)

Modifications appliquées :
┌─────────────────────────────────────────────────────────────────┐
│ [1] animateur-podcast-webflow-studio.webp                       │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
├─────────────────────────────────────────────────────────────────┤
│ [3] section-hero-page-accueil-webflow.webp                      │
│     ✓ Texte alternatif ajouté                                   │
│     ✓ Nom de fichier mis à jour                                 │
└─────────────────────────────────────────────────────────────────┘

Ressources ignorées (vous pouvez relancer l'audit plus tard) :
- [2] 2.webp
- [4] 4.webp

📋 Rollback disponible :
Tapez "undo" pour annuler ces 2 modifications

Directives

Phase 1 : Validations critiques (à suivre impérativement)

Gestion des extensions de fichier :

• Retirez TOUJOURS l'extension existante avant d'en ajouter une nouvelle
• Mauvais : image.webp → nouveau-nom.webp.webp
• Bon : image.webp → nouveau-nom.webp
• Implémentation : Utilisez le nom de fichier sans extension + nouvelle extension

Règles de qualité du texte alternatif :

• Longueur maximale : 125 caractères (meilleure pratique d'accessibilité)
• Doit se terminer par une ponctuation (point, point d'exclamation, point d'interrogation)
• Supprimez les phrases redondantes :
  • ❌ "Image d'une personne" → ✅ "Personne travaillant à un bureau"
  • ❌ "Photo du logo" → ✅ "Logo de l'entreprise sur fond bleu"
  • ❌ "Montrant une photo" → ✅ Description directe
• Signalez si trop court (< 10 caractères) : ⚠️ "Trop générique - nécessite plus de détails"
• Signalez si trop long (> 125 caractères) : ⚠️ "Envisagez de raccourcir pour les lecteurs d'écran"

Règles des noms de fichiers SEO :

• Autorisez uniquement : a-z minuscules, chiffres 0-9, traits d'union
• Longueur maximale : 100 caractères (avant l'extension)
• Convertissez les espaces en traits d'union : photo equipe → photo-equipe
• Convertissez les traits de soulignement en traits d'union : photo_equipe → photo-equipe
• Supprimez les caractères spéciaux : photo!@#$ → photo
• Convertissez en minuscules : PhotoEquipe → photo-equipe
• Supprimez les traits d'union consécutifs : photo--equipe → photo-equipe
• Supprimez les traits d'union en début/fin : -photo- → photo

Phase 2 : Traitement par lots et performances

Gestion des grands sites :

• Sites avec 50 ressources ou plus : Traitez par lots de 20
• Affichez la progression : "Traitement du lot 1 sur 5 (ressources 1-20)..."
• Permettez à l'utilisateur de traiter des lots spécifiques
• Protection contre les délais d'attente : Si get_asset_preview prend > 30s, passez au lot suivant

Détection de schémas : Détectez et signalez ces schémas :

• Téléchargements d'appareil photo : IMG_, DSC_, DCIM_, P_
• Captures d'écran : screenshot, Screen Shot, Capture
• Noms génériques : untitled, image-1, photo, asset
• Formats de date : 2024-01-10, 20240110, 01-10-2024
• Suggérez un renommage en masse lorsque 3 ressources ou plus correspondent à un schéma

Gestion des erreurs :

• Si get_asset_preview échoue :
  1. Enregistrez l'erreur (ne l'affichez pas à l'utilisateur)
  2. Utilisez le repli : Extrayez la description du nom de fichier
  3. Marquez avec un avertissement ⚠️ : "Généré à partir du nom de fichier (aperçu de l'image échoué)"
  4. Continuez avec les autres ressources
• Gestion des succès partiels :
  • Rapportez les succès séparément des échecs
  • Affichez : "✅ 15 mis à jour, ❌ 2 échoués, ⏭️ 3 ignorés"
  • Proposez de réessayer les ressources échouées

Phase 3 : Fonctionnalités avancées

Système d'approbation granulaire :

• Numérotez chaque suggestion : [1], [2], [3], etc.
• Affichez l'état de la coche : ✓ ou ✗
• Acceptez plusieurs formats :
  • "all" - approuver tout
  • "none" - annuler l'opération
  • "1,3,5" - ignorer les éléments 1, 3 et 5
  • "2-5" - ignorer les éléments 2 à 5
• Affichez toujours l'état de validation par élément

Modèles de nommage : Proposez des modèles lorsque 5 ressources similaires ou plus sont détectées :

1. [catégorie]-[description]-[modificateur]
   • Exemple : produit-ordinateur-portable-vue-face.jpg
2. [description]-[emplacement]-[année]
   • Exemple : photo-equipe-bureau-2024.jpg
3. [type]-[nom]-[variante]
   • Exemple : icone-fleche-bleu.svg

Organisation des dossiers : Suggérez des dossiers lors de la détection de :

• 5 images ou plus avec "equipe", "employe" → dossier photos-equipe
• 5 images ou plus avec "produit", "article" → dossier images-produits
• 5 images ou plus avec "logo", "marque" → dossier image-de-marque
• 5 images ou plus avec "screenshot", "capture" → dossier captures-ecran

Système de rollback : Avant toute mise à jour, stockez en mémoire :

{
  "timestamp": "2026-01-10T00:45:00Z",
  "assets": [
    {
      "id": "id-ressource",
      "originalName": "1.webp",
      "originalAltText": "",
      "newName": "animateur-podcast.webp",
      "newAltText": "Animateur de podcast enregistrant..."
    }
  ]
}

• Proposez d'annuler pendant 5 minutes après les modifications
• Effacez les données de rollback après le début de l'audit suivant
• Affichez l'option de rollback dans le résumé final

Détection des doublons :

• Comparez les tailles des ressources (correspondance exacte = probable doublon)
• Comparez les noms de fichiers (noms similaires = doublon potentiel)
• Rapportez : "⚠️ Doublons potentiels : asset1.jpg (2.4 Mo) et asset1-copie.jpg (2.4 Mo)"
• Ne supprimez pas automatiquement - laissez l'utilisateur décider

Bonnes pratiques générales

• Utilisez toujours get_asset_preview de Webflow MCP (avec asset_id, pas une URL) pour comprendre le contenu de l'image
• Validez toutes les suggestions avant de les présenter à l'utilisateur
• Fournissez toujours des messages de progression clairs
• Gérez les échecs avec grâce et permettez les nouvelles tentatives
• Maintenez un historique de rollback pour la sécurité