CommunityImagegithub.com

orlandoneto/claude-seo-seo-images

Analyse d'optimisation d'images pour le SEO et les performances. Vérifie les textes alternatifs, les tailles de fichiers, les formats, les images responsives, le chargement différé, la prévention du CLS, le classement SERP des images (via DataForSEO) et l'optimisation des fichiers image (conversion WebP/AVIF, injection de métadonnées IPTC/XMP).

Qu'est-ce que claude-seo-seo-images ?

Cette compétence est un outil complet d'audit et d'optimisation d'images pour les agents d'IA, spécialisé dans le SEO technique et la performance web. Elle automatise la vérification des textes alternatifs (alt), détecte les images orphelines ou surdimensionnées, et recommande les formats modernes comme WebP et AVIF en se basant sur le format réellement servi (via sondage HTTP), pas sur l'extension du fichier. Elle analyse également le chargement différé (lazy load) natif ou basé sur JavaScript, la prévention du décalage de mise en page cumulatif (CLS), et les attributs `fetchpriority` et `decoding`. Pour les audits plus avancés, elle intègre l'analyse SERP des images via DataForSEO pour identifier les opportunités de classement, et propose une optimisation de fichiers avec conversion, redimensionnement, et injection de métadonnées IPTC/XMP (y compris le champ `DigitalSourceType` requis par Google Merchant Center pour les images générées par IA). Elle s'appuie sur des scripts locaux (`parse_html.py`, `iptc_ai_label.py`) et des outils système (exiftool, cwebp, ImageMagick) pour des vérifications précises et reproductibles.

Compatible avec✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/orlandoneto/agent-skills/tree/HEAD/skills/community/claude-seo-seo-images

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Aperçu

Depuis le README du skill

claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview
claude-seo-seo-images preview

Documentation

Analyse d'Optimisation d'Images

Vérifications

Texte Alternatif

  • Présent sur tous les éléments <img> (sauf décoratifs : role="presentation"). parse_html.py marque ces derniers avec decorative: true ; ne pas les signaler comme manquants.
  • Descriptif : décrit le contenu de l'image, pas "image.jpg" ou "photo".
  • Inclut des mots-clés pertinents de manière naturelle, sans bourrage.
  • Longueur : entre 10 et 125 caractères.

Bons exemples :

  • "Plombier professionnel réparant un robinet d'évier de cuisine"
  • "Toyota Camry rouge 2024 berline vue de face"
  • "Réunion d'équipe dans une salle de conférence moderne"

Mauvais exemples :

  • "image.jpg" (nom de fichier, pas une description)
  • "plombier plomberie services plomberie" (bourrage de mots-clés)
  • "Cliquez ici" (pas descriptif)

Taille de Fichier

Seuils par catégorie d'image :

Catégorie d'imageCibleAvertissementCritique
Miniatures< 50 Ko> 100 Ko> 200 Ko
Images de contenu< 100 Ko> 200 Ko> 500 Ko
Images hero/bannière< 200 Ko> 300 Ko> 700 Ko

Recommander la compression jusqu'aux seuils cibles si possible sans perte de qualité.

Format

FormatSupport navigateurCas d'usage
WebP97%+Recommandation par défaut
AVIF92%+Meilleure compression, plus récent
JPEG100%Alternative pour les photos
PNG100%Graphiques avec transparence
SVG100%Icônes, logos, illustrations

Recommander WebP/AVIF plutôt que JPEG/PNG. Vérifier la présence de l'élément <picture> avec des formats de repli.

Évaluer le format servi, pas l'extension de l'URL

De nombreux sites servent du WebP ou de l'AVIF depuis une URL .jpg/.png lorsque le navigateur le demande (plugins WordPress WebP comme EWWW, ShortPixel, WebP Express et Imagify, Cloudflare Polish, CDN d'images). L'extension n'est pas le format que les visiteurs reçoivent. Exécutez "${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py --url <url> --probe-images --json, ce qui récupère chaque image avec un en-tête Accept du navigateur et ajoute à chaque entrée d'image (pour une image à chargement différé, il sonde resolved_src, la source réelle, car src est alors un espace réservé) :

ChampSignification
served_formatFormat réellement servi (webp, avif, jpeg, png, gif, svg, jxl), à partir des octets magiques, sinon null
served_bytesTaille réellement servie (Content-Length), ou null lorsque le serveur l'omet
negotiatedtrue lorsque la réponse a Vary: Accept, donc le format dépend du navigateur
probe_errorRaison pour laquelle l'image n'a pas pu être vérifiée (échec de récupération, URL malformée, ou la réponse n'est pas une image reconnue, comme une erreur HTML ou une page de protection anti-hotlink), sinon null
  • Signaler "Mauvais format" et les économies de taille uniquement à partir de served_format / served_bytes. Une URL .jpg avec served_format: webp est déjà optimisée : ne recommandez pas de la convertir.
  • Si probe_error est défini, signalez le format comme non vérifié. Ne déduisez jamais le format de l'extension.
  • Ne suggérez jamais une URL d'image de remplacement (par exemple photo.webp) sans confirmer qu'elle retourne un code HTTP 200.

Motif d'élément <picture> Recommandé

Utilisez l'amélioration progressive avec le format le plus efficace en premier :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Texte alternatif descriptif" width="800" height="600" loading="lazy" decoding="async">
</picture>

Le navigateur utilisera le premier format pris en charge. Support navigateur global (caniuse.com, vérifié le 28/09/2026) : AVIF environ 95,4%, WebP environ 96,8%. Revérifiez caniuse avant de citer.

JPEG XL : Format Émergent

Des rapports tiers et Wikipédia décrivent un décodeur JPEG XL basé sur Rust livré dans Chrome 145 stable (10/02/2026) derrière le flag chrome://flags/#enable-jxl-image-format, non activé par défaut ; aucune confirmation de Google n'a été récupérée dans le pack de faits. Parce que le support par défaut n'est pas confirmé, il n'est pas encore pratique pour la diffusion web en production. Continuez à servir AVIF/WebP avec un repli JPEG et surveillez.

Images Responsives

  • Attribut srcset pour plusieurs tailles
  • Attribut sizes correspondant aux points de rupture de mise en page
  • Résolution appropriée pour les ratios de pixels du périphérique
<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

Chargement Différé

  • loading="lazy" sur les images situées sous la ligne de flottaison
  • NE PAS charger en différé les images hero/au-dessus de la ligne de flottaison (nuisent au LCP)
  • Vérifier le chargement différé natif vs basé sur JavaScript
<!-- Sous la ligne de flottaison - chargement différé -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- Au-dessus de la ligne de flottaison - chargement immédiat (par défaut) -->
<img src="hero.jpg" alt="Image hero">

Méthodes de chargement différé détectées (champ lazy_method)

"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py classifie le mécanisme de chargement différé de chaque image via le champ lazy_method sur chaque entrée d'image. Cinq valeurs :

lazy_methodSignal détectéStack courant
nativeAttribut HTML loading="lazy"Navigateurs modernes, HTML simple
perfmattersdata-perfmatters-src/-srcset OU classe perfmatters-lazyWordPress + plugin Perfmatters
ewwwdata-ewww-src / data-eio OU classe lazyload-eioWordPress + EWWW Image Optimizer
js-genericdata-src / data-lazy-src / data-original / data-srcset OU classe lazyload/lazyloaded/lazyLazysizes, vanilla-lazyload, plugins jQuery
noneAucun signal d'attribut ni de classeLa page ne charge pas cette image en différé

Lors de l'audit SEO des images, signalez lazy_method en plus de loading afin que les utilisateurs sachent si leur site utilise un chargeur différé piloté par JS (auquel cas l'attribut natif loading="lazy" est intentionnellement absent, ce n'est pas une régression).

fetchpriority="high" pour les Images LCP

Ajoutez fetchpriority="high" à votre image hero/LCP pour prioriser son téléchargement dans la file d'attente réseau du navigateur :

<img src="hero.webp" fetchpriority="high" alt="Description de l'image hero" width="1200" height="630">

Critique : NE PAS charger en différé les images au-dessus de la ligne de flottaison/LCP. Utiliser loading="lazy" sur les images LCP nuit directement aux scores LCP. Réservez loading="lazy" uniquement pour les images sous la ligne de flottaison.

decoding="async" pour les Images Non-LCP

Ajoutez decoding="async" aux images non-LCP pour empêcher le décodage d'image de bloquer le fil principal :

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

Prévention du CLS

  • Attributs width et height définis sur tous les éléments <img>
  • CSS aspect-ratio comme alternative
  • Signaler les images sans dimensions
<!-- Bon - dimensions définies -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- Bon - ratio d'aspect CSS -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- Mauvais - pas de dimensions -->
<img src="photo.jpg" alt="Description">

Noms de Fichier

  • Descriptifs : chaussures-course-bleues.webp pas IMG_1234.jpg
  • Avec traits d'union, en minuscules, sans caractères spéciaux
  • Inclure des mots-clés pertinents

Utilisation du CDN

  • Vérifier si les images sont servies depuis un CDN (domaine différent, en-têtes CDN)
  • Recommander un CDN pour les sites riches en images
  • Vérifier les en-têtes de mise en cache périphérique

Résultat

Résumé de l'Audit d'Images

MétriqueStatutNombre
Images totales-XX
Texte alternatif manquant❌XX
Surdimensionnées (>200Ko)⚠️XX
Mauvais format⚠️XX
Pas de dimensions⚠️XX
Non chargées en différé⚠️XX

Liste d'Optimisation Priorisée

Triée par impact sur la taille du fichier (économies les plus importantes en premier) :

ImageTaille actuelleFormatProblèmesÉconomie estimée
...............

Recommandations

  1. Convertir X images au format WebP (économie estimée : XX Ko)
  2. Ajouter un texte alternatif à X images
  3. Ajouter des dimensions à X images
  4. Activer le chargement différé sur X images sous la ligne de flottaison
  5. Compresser X images surdimensionnées

Analyse SERP des Images

Lorsque le MCP DataForSEO est disponible, enrichissez l'audit d'images avec des données concurrentielles.

/seo images serp <mot-clé>

Faites une référence croisée entre les images de la page et les résultats d'images visibles dans le SERP Google.

Flux de travail :

  1. Le serveur MCP DataForSEO épinglé (2.8.10) n'a pas d'outil SERP Google Images. Utilisez l'élément images de serp_organic_live_advanced (depth=100) lorsque le SERP en a un, et dites clairement quand aucune donnée SERP d'image n'est disponible.
  2. Extraire : principaux domaines, types d'images, modèles de texte alternatif
  3. Afficher le paysage SERP des images concurrentes

Résultat :

RangDomaineTitre/AltURL de l'imageURL de la page
1example.com"Chaussures de course bleues...".../shoes.webp/products/...

L'analyse comprend :

  • Dominance des domaines : quels sites possèdent le plus de positions d'images (top 10 par nombre)
  • Modèles de texte alternatif : modèles de titre/alt courants dans les images les mieux classées
  • Distribution des formats : WebP vs JPEG vs PNG dans les meilleurs résultats
  • Score d'opportunité : mots-clés où vous avez un classement de page mais aucune présence d'image

Si le MCP DataForSEO n'est pas disponible, informez l'utilisateur et suggérez d'installer l'extension.


Optimisation des Fichiers Image

Optimisez les fichiers image pour le SEO : conversion de format, injection de métadonnées, compression.

/seo images optimize <chemin>

Optimisez le(s) fichier(s) image pour le web et le SEO. Convertit en WebP/AVIF, injecte des métadonnées IPTC, compresse et génère des variantes responsives.

Outils utilisés (par ordre de préférence) :

  • exiftool -- Lecture/écriture EXIF/IPTC/XMP (installation : sudo apt install libimage-exiftool-perl)
  • cwebp -- Conversion WebP (installation : sudo apt install webp)
  • ImageMagick convert -- Conversion de format, redimensionnement (pré-installé sur la plupart des systèmes)
  • FFmpeg -- Solution de repli pour la conversion de format (pré-installé)

Avant d'exécuter : Vérifiez quels outils sont disponibles avec which exiftool cwebp convert ffmpeg.

Conversion de Format

Convertissez les images vers des formats modernes avec préservation des métadonnées :

# WebP (recommandé par défaut) - avec métadonnées préservées
cwebp -q 82 -metadata all input.jpg -o output.webp

# WebP via ImageMagick (solution de repli si cwebp n'est pas installé)
convert input.jpg -quality 82 output.webp

# AVIF via FFmpeg (encodage plus lent, meilleure compression)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -still-picture 1 output.avif

# Variantes responsives (400w, 800w, 1200w)
convert input.jpg -resize 400x -quality 82 image-400.webp
convert input.jpg -resize 800x -quality 82 image-800.webp
convert input.jpg -resize 1200x -quality 82 image-1200.webp

Injection de Métadonnées (IPTC pour l'Affichage dans Google Images)

Google Images affiche le Créateur IPTC, la Ligne de Crédit et le Copyright dans les résultats de recherche. Ce n'est PAS un facteur de classement mais peut améliorer l'affichage dans Google Images et l'attribution de marque.

Avec exiftool (préféré) :

# Lire toutes les métadonnées
exiftool image.jpg

# Injecter les métadonnées IPTC + XMP pour les résultats enrichis Google Images
exiftool \
  -IPTC:ObjectName="Description de la photo du produit" \
  -IPTC:Caption-Abstract="Description détaillée de l'image" \
  -IPTC:By-line="Photographie Nom de Marque" \
  -IPTC:Credit="Nom de Marque" \
  -IPTC:CopyrightNotice="Copyright 2026 Nom de Marque" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="Description de la photo du produit" \
  -XMP:Description="Description détaillée de l'image" \
  -XMP:Creator="Photographie Nom de Marque" \
  -XMP:Rights="Copyright 2026 Nom de Marque" \
  image.jpg

# Injection par lot dans toutes les images d'un répertoire
exiftool -overwrite_original \
  -IPTC:By-line="Nom de Marque" \
  -IPTC:CopyrightNotice="Copyright 2026 Nom de Marque" \
  *.jpg *.webp *.png

Avec ImageMagick (solution de repli) :

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "Description de la photo du produit" \
  -set IPTC:2:80 "Photographie Nom de Marque" \
  -set IPTC:2:116 "Copyright 2026 Nom de Marque" \
  output.jpg

Remarque : WebP prend en charge EXIF et XMP mais pas IPTC nativement. Pour les fichiers WebP, utilisez les champs XMP au lieu d'IPTC. exiftool gère cette conversion automatiquement.

Images Générées par IA : DigitalSourceType (Exigence de Merchant Center)

Pour les images de produits produites par l'IA générative, Google Merchant Center exige les métadonnées IPTC DigitalSourceType: TrainedAlgorithmicMedia. Il s'agit d'une exigence de politique opérationnelle, pas d'un facteur de classement : les flux sans ce libellé sur les images générées par IA peuvent être rejetés.

Source primaire (politique de contenu généré par IA de Merchant Center) : https://support.google.com/merchants/answer/14743464 (le guide d'optimisation IA ne documente pas le libellé DigitalSourceType/IPTC/Merchant.)

Commande d'audit :

# Auditer un répertoire pour le libellé IPTC (comptes : manquant, IA, capturé, etc.)
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./images/ --json

# Auditer une seule image
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./hero.webp --json

# Injecter le libellé IA dans une image
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# Autres valeurs du vocabulaire :
#   compositeSynthetic               (mélange d'éléments capturés + IA)
#   algorithmicMedia                 (créé purement par un algorithme, PAS à partir de données d'apprentissage échantillonnées)
#   compositeWithTrainedAlgorithmicMedia (par exemple, inpainting/outpainting IA sur un média réel)
#   digitalCapture                   (photographie entièrement capturée)

Équivalents exiftool bruts (pour un usage ad-hoc) :

# Injecter manuellement
exiftool \
  -XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
  ai-generated-product.jpg

# Audit : trouver les images sans le libellé dans un répertoire
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
  -filename -DigitalSourceType *.jpg *.webp *.png

Google extrait ces valeurs IPTC DigitalSourceType :

  • trainedAlgorithmicMedia : entièrement généré par IA (utilisez ceci pour les images de produits issues de modèles de diffusion)
  • compositeSynthetic : mélange d'éléments capturés + générés par IA
  • algorithmicMedia : créé purement par un algorithme, pas à partir de données échantillonnées

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills associés