# O · SEO des images

> Source: https://seorunbook.com/playbook/o-image-seo/
> SEO Run Book — 410 SEO actions, free to read
> Last built: 2026-09-15

Les images pèsent dans deux directions : elles sont la première cause de pages lentes, et elles constituent une surface de recherche à part entière.

**Pourquoi ce module existe.** Format, dimensions, texte alternatif, données structurées — chacun est une action distincte parce que chacun échoue séparément.

18 actions, numérotées 257 à 274.

### 257. Nommer les fichiers image de façon descriptive, avec des mots-clés : chaussure-running-bleue-profil.avif, et non IMG_2931.jpg

**Comment.** Avant de téléverser une image, renommez le fichier en minuscules avec des tirets, décrivant son contenu : chaussure-running-bleue-profil.avif. · Mettez le sujet principal en tête, sans empiler de mots-clés. · Gardez le même nom pour les variantes de taille (chaussure-running-bleue-profil-800.avif). · Appliquez la règle aux nouvelles images ; ne renommez pas les images déjà indexées sans raison forte (action 273).

**À éviter.** IMG_2931.jpg, image1.png, capture-d-ecran-2026-09-14 · Des noms bourrés de mots-clés (chaussure-running-pas-cher-meilleure-chaussure.jpg) · Des espaces et accents dans le nom de fichier

### 258. Écrire un texte alternatif précis, qui décrit l’image et son contexte sans bourrage de mots-clés : « Graphique : ventes de véhicules électriques aux États-Unis, 2020-2026 »

**Comment.** Écrivez l’alt comme si vous décriviez l’image au téléphone à quelqu’un qui ne la voit pas, dans le contexte de la page. · Pour un graphique, indiquez le type et ce qu’il montre (« Graphique : ventes de véhicules électriques aux États-Unis, 2020-2026, en hausse chaque année »). · Restez sous ~125 caractères, sans « image de » au début. · Laissez alt="" pour les images décoratives.

**À éviter.** « voiture électrique pas cher meilleure voiture électrique » · Un alt identique sur toutes les images d’un produit · Un alt qui décrit l’image sans rapport avec la page

### 259. Ajouter une légende visible sur les images importantes (les légendes sont plus lues que le texte qui les entoure)

**Comment.** Pour les images qui portent une information (graphiques, photos de produit en situation, captures, schémas), ajoutez une légende visible. · Utilisez <figure> et <figcaption>. · Rédigez une légende qui dit ce qu’il faut remarquer ou retenir, pas seulement ce qu’on voit. · Ajoutez la source ou le crédit dans la légende quand nécessaire.

**À éviter.** Une légende qui répète l’alt mot pour mot · Des légendes sur des images décoratives · Des légendes insérées en tant qu’image

### 260. Servir des images nettes et en haute résolution ; éviter le flou et les artefacts (fuite : défauts DocumentPageImageQualityScores)

**Comment.** Exportez les images à la résolution nécessaire à leur plus grand affichage, multipliée par la densité d’écran (2× pour les écrans rétina), en partant d’un original de bonne qualité. · Évitez de réencoder plusieurs fois une image avec perte. · Contrôlez visuellement à 100 % : pas de flou, de pixelisation ou d’artefacts de compression. · Remplacez les images de mauvaise qualité (captures floues, photos sombres) par des versions nettes.

**À éviter.** Agrandir une image trop petite : elle devient floue · Compresser à une qualité trop basse pour gagner quelques Ko · Réutiliser des vignettes comme images principales

### 261. Utiliser des images uniques et originales autant que possible ; l’usage massif de banques d’images est un signal plus faible et redondant

**Comment.** Remplacez en priorité les images de banques d’images sur les pages importantes par des photos originales : équipe, locaux, produits réels, réalisations, captures de vos outils. · Créez des schémas et graphiques propres à partir de vos données. · Si vous utilisez une banque d’images, choisissez des images moins diffusées et retouchez-les (recadrage, contexte). · Tenez un registre des images originales et de leurs droits.

**À éviter.** La même photo « poignée de main » que des milliers de sites · Présenter une photo de banque comme votre équipe · Utiliser des images sans droits

### 262. Fournir un sitemap d’images (ou des <image:image> dans le sitemap) avec les images clés de chaque page

**Comment.** Ajoutez dans le sitemap existant l’espace de noms image (xmlns:image="http://www.google.com/schemas/sitemap-image/1.1") et, sous chaque <url>, un <image:image><image:loc>URL absolue</image:loc></image:image> par image importante. · Ou générez un sitemap d’images séparé référencé dans l’index de sitemaps. · N’incluez que les images de contenu (pas icônes, logos répétés). · Vérifiez que les URLs d’images ne sont pas bloquées par robots.txt.

**À éviter.** Lister des images sur un CDN bloqué au robot · Inclure toutes les icônes du gabarit · Des URLs d’images relatives

### 263. Garder l’image principale, la plus pertinente, en haut de page et dans le contenu principal

**Comment.** Placez l’image la plus représentative de la page dans le contenu principal, près du titre. · Utilisez une balise <img> dans le HTML (pas un fond CSS) pour cette image. · Donnez-lui un alt, une taille suffisante et la priorité de chargement si elle est dans le premier écran. · Déclarez-la aussi comme image principale dans le schema (primaryImageOfPage ou image de l’Article/Product).

**À éviter.** Une image principale reléguée en bas de page · Une image de couverture en arrière-plan CSS · Plusieurs images concurrentes sans hiérarchie

### 264. Ajouter les métadonnées IPTC/ImageObject de licence et de créateur pour obtenir les badges d’images sous licence

**Comment.** Pour vos images originales, renseignez les métadonnées IPTC du fichier : Creator, Credit Line, Copyright Notice, Web Statement of Rights (URL de licence), Licensor URL (page pour obtenir une licence). · Utilisez un outil comme ExifTool, Lightroom ou Photo Mechanic, et vérifiez que votre compression ne supprime pas ces métadonnées. · Ou ajoutez ces informations dans le JSON-LD ImageObject (action 160). · Créez réellement les pages de licence référencées.

**À éviter.** Des métadonnées effacées par l’optimisation d’image · Revendiquer des droits sur des images qui ne vous appartiennent pas · Des URLs de licence en 404

### 265. Renseigner og:image (1200 × 630) et twitter:image pour les aperçus sociaux et dans les résultats

**Comment.** Créez pour chaque page importante une image de partage de 1200 × 630 px, lisible en petit (texte court, contrasté). · Déclarez-la dans og:image (URL absolue), avec og:image:width, og:image:height et og:image:alt. · Ajoutez twitter:card summary_large_image et, si besoin, twitter:image. · Générez-la automatiquement depuis le gabarit pour les articles si vous en publiez beaucoup.

**À éviter.** Une og:image en format carré ou vertical recadrée de façon absurde · La même image générique sur toutes les pages · Une image de plus de 5 Mo

### 266. Utiliser des images responsives avec srcset et sizes (c’est aussi un gain de vitesse)

**Comment.** Générez plusieurs largeurs de chaque image (par exemple 400, 800, 1200, 1600). · Déclarez-les dans srcset avec les descripteurs w. · Renseignez sizes selon la largeur réellement occupée dans la mise en page (sizes="(max-width: 760px) 100vw, 720px"). · Contrôlez que le navigateur télécharge la bonne taille à chaque largeur d’écran.

**À éviter.** Un srcset sans sizes : le navigateur suppose 100vw et télécharge trop grand · Des variantes qui sont en fait le même fichier redimensionné par le HTML · Oublier width et height

### 267. Compresser vers les formats de nouvelle génération (AVIF, WebP) — voir le module D

**Comment.** Appliquez les réglages du module D (actions 49 à 52) à toutes les images de contenu : AVIF pour les photos, WebP en repli, JPEG en dernier recours. · Utilisez <picture> avec <source type="image/avif"> et <source type="image/webp">. · Automatisez la conversion au téléversement ou au build. · Contrôlez régulièrement le poids des images des nouvelles pages.

**À éviter.** Téléverser des PNG de 3 Mo directement dans le CMS · Convertir sans garder de format de repli · Une conversion automatique désactivée après une mise à jour de plugin

### 268. Entourer les images d’un texte thématiquement pertinent ; Google se sert du contexte de la page pour classer les images

**Comment.** Placez chaque image à côté du texte qui en parle. · Écrivez un titre de section, une phrase d’introduction et une légende en rapport avec l’image. · Évitez les galeries sans texte sur les pages qui visent la recherche d’images. · Utilisez des pages dédiées pour les images importantes (fiche produit, réalisation) avec leur description.

**À éviter.** Une galerie de 50 photos sans un mot de texte · Des images insérées au hasard entre des paragraphes sans rapport · Des pages images avec seulement un titre

### 269. Éviter le texte dans l’image pour les contenus importants ; reprenez-le aussi en vrai texte HTML

**Comment.** Repérez les images qui contiennent du texte important : bannières, tableaux de prix, infographies, citations, menus. · Reprenez ce texte en HTML sur la page (paragraphe, tableau, liste) ou remplacez l’image par du HTML stylé. · Gardez l’image si elle apporte un intérêt visuel, avec le texte en HTML à côté. · Pour les bannières, écrivez le texte en HTML par-dessus une image de fond.

**À éviter.** Des tarifs uniquement dans une image · Un menu de restaurant en JPEG · Un titre de page intégré dans l’image de couverture

### 270. Donner un titre et un contexte descriptifs aux infographies, et une transcription HTML de leurs données

**Comment.** Donnez à chaque infographie un titre HTML descriptif et une phrase de contexte (ce qu’elle montre, source, date). · Ajoutez sous l’infographie une transcription : les données principales en liste ou en tableau HTML. · Mettez un alt court qui renvoie à la transcription (« Infographie : ventes 2020-2026, détail des chiffres ci-dessous »). · Citez les sources des données.

**À éviter.** Une infographie sans aucun texte sur la page · Un alt de 500 caractères qui recopie toute l’infographie · Des chiffres sans source

### 271. S’assurer que les visuels importants sont explorables (<img src>, et non un fond CSS)

**Comment.** Repérez les visuels importants posés en background-image CSS (couvertures, photos produit, portfolios). · Remplacez-les par des balises <img> (ou <picture>) dans le HTML, stylées avec object-fit: cover si besoin. · Réservez le CSS aux motifs et fonds décoratifs. · Vérifiez que les images chargées en JavaScript (sliders, lazy-load) ont bien un <img src> ou srcset dans le HTML rendu.

**À éviter.** Une photo produit en fond CSS : invisible pour Google Images · Un lazy-load qui stocke l’URL dans data-src sans jamais la rendre au robot · Un slider dont seule la première image est dans le HTML

### 272. Fournir un ImageObject dans le schema Product ou Article, avec un contentUrl en haute résolution

**Comment.** Dans le JSON-LD de chaque article ou produit, déclarez image comme un tableau d’URLs absolues ou d’ImageObject (url ou contentUrl, width, height). · Fournissez une image en haute résolution (au moins 1200 px de large) et, si possible, plusieurs formats (16:9, 4:3, 1:1). · Utilisez les mêmes images que celles affichées. · Vérifiez qu’elles sont explorables et non bloquées.

**À éviter.** Un logo en guise d’image d’article · Des images de 300 px · Des URLs d’images qui redirigent

### 273. Garder des URLs d’images stables ; ne renommez pas les fichiers à chaque déploiement (cela préserve le capital acquis en recherche d’images)

**Comment.** Figez l’URL de chaque image publiée : ne changez ni le nom ni le chemin à chaque déploiement. · Pour le cache, versionnez par un paramètre ou un nom de fichier contenant un empreinte du contenu, qui ne change que si l’image change. · Si vous devez déplacer des images (migration, CDN), redirigez en 301 les anciennes URLs vers les nouvelles. · Évitez les URLs d’images signées ou temporaires pour le contenu public.

**À éviter.** Un build qui renomme toutes les images avec un horodatage · Une migration vers un CDN sans redirection des images · Des URLs signées qui expirent au bout de 24 h

### 274. Optimiser le cadrage des miniatures pour que le sujet soit centré et lisible (cela alimente les signaux de clic sur les images)

**Comment.** Pour chaque image importante, vérifiez son aperçu en petit (vignette de 150 px) : le sujet doit être centré et reconnaissable. · Recadrez les images pour que le sujet occupe l’essentiel du cadre, sans détails parasites. · Évitez que les recadrages automatiques (carré, 16:9) coupent le sujet : définissez le point focal (object-position ou réglage du CMS). · Préférez un fond simple et un bon contraste.

**À éviter.** Un produit minuscule au milieu d’un grand décor · Des recadrages automatiques qui coupent les têtes · Des vignettes sombres ou peu contrastées