Temps de lecture estimé : 6 min · Publié le
Choisir une image qui représente la page
Associez une photo principale au sujet réel et évitez de la recycler dans une liste de pages différentes. Une carte doit annoncer visuellement la page qu’elle ouvre. Vérifiez que le sujet reste identifiable dans un recadrage mobile ou de partage.
Pour un produit ou une réalisation, privilégiez plusieurs vues utiles plutôt qu’une seule image générique. Le guide de préparation des images décrit l’inventaire des droits, des emplacements et des variantes.
- Sujet cohérent avec la page.
- Visuels distincts dans une même liste.
- Cadrages mobile et partage vérifiés.
Donner du contexte accessible
Utilisez une image HTML avec URL stable, nom descriptif et alternative adaptée à son rôle. Exemple fictif : une photo montre une porte restaurée, mais un recadrage ne conserve que la poignée ; le texte alternatif de cette variante doit décrire le détail encore visible. Le texte voisin et la légende donnent contexte et provenance. Gardez un alt vide pour une décoration sans information et évitez les mots-clés sans rapport.
Les recommandations Google pour les images accordent une place centrale au texte alternatif et au contexte de la page. Empiler des mots-clés dans l’alt dégrade la lecture et n’explique pas la photo.
Séparez découverte du fichier, contexte de la page et préférence de miniature. Google peut découvrir une image avec l’élément img et son attribut src ; une image placée uniquement en fond CSS n’est pas indexée comme image par ce mécanisme. Pour picture et srcset, conservez un img avec une URL src de repli. Le texte voisin et l’alternative doivent expliquer le sujet réellement visible.
Pour exprimer une image préférée, Google documente notamment primaryImageOfPage et og:image. Choisissez un visuel représentatif et évitez de désigner systématiquement le logo générique du site. La règle max-image-preview:large permet une grande prévisualisation, mais ne garantit ni le choix de ce fichier ni sa présence dans les résultats. Vérifiez séparément accès du robot, fichier servi, métadonnées et règles de prévisualisation avant d’attribuer un écart à un manque de mots-clés.
- Image présente dans le HTML.
- Alt adapté à sa fonction.
- Texte voisin descriptif sans répétition artificielle.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Niveau contrôlé | Question utile | Ce que le contrôle ne prouve pas |
|---|---|---|
| Insertion HTML | Le fichier est-il référencé par img et src avec un repli exploitable ? | Le bon sujet ou une indexation garantie. |
| Accès au fichier | Le robot peut-il récupérer la vraie image dans un format pris en charge ? | L’exactitude de la légende ou des droits d’usage. |
| Image préférée | primaryImageOfPage ou og:image représente-t-il cette page ? | Que Google retiendra obligatoirement cette miniature. |
| Prévisualisation autorisée | La règle max-image-preview correspond-elle à l’intention de publication ? | Qu’autoriser un grand aperçu force son affichage. |
- Google Search Central : Bonnes pratiques des images
Consulté le 22 octobre 2026 ; découverte HTML, image préférée et contexte de la page.
- Google Search Central : Règles robots et prévisualisations
Consulté le 22 octobre 2026 ; portée de max-image-preview et nécessité d’un accès aux règles par le robot.
Servir le bon fichier
Préparez une taille adaptée à l’affichage, des variantes responsives et des dimensions déclarées pour limiter les décalages. Compressez sans effacer les détails utiles. Vérifiez que la première image visible charge réellement sur une connexion lente.
Évitez de mettre l’information indispensable uniquement dans l’image : texte incrusté, tableau photographié ou capture non expliquée. Les métadonnées intégrées peuvent documenter un crédit ou une licence réelle, mais ne remplacent pas une page claire.
Exercice fictif : dans une fenêtre de 1 200 pixels CSS, une image occupe une colonne de 480 pixels CSS. Pour une densité visée de 2, la largeur indicative est 960 pixels, et non 2 400. Avec srcset et des descripteurs w, sizes renseigne la largeur d’affichage prévue. Une indication 100vw annoncerait ici la fenêtre entière et pourrait surévaluer le besoin réel.
Le descripteur 960w doit correspondre à la largeur réelle du fichier ; ne mélangez pas des descripteurs w et x dans le même srcset. Le navigateur conserve une marge de choix selon les conditions et les ressources disponibles. Comparez largeur calculée, densité et currentSrc avec un état de cache documenté. Gardez le chargement différé pour les emplacements appropriés : ne retardez pas par erreur l’image essentielle du premier écran.
- Poids et dimensions contrôlés.
- Variantes adaptées aux écrans.
- Information importante accessible en texte.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Fenêtre en pixels CSS | Emplacement × densité visée | Largeur indicative du fichier |
|---|---|---|
| 360 | 328 × 2 | 656 px ; la largeur de fenêtre seule ne donne pas ce résultat |
| 1 200 | 480 × 2 | 960 px ; l’image n’occupe qu’une colonne |
| 1 920 | 720 × 1,5 | 1 080 px ; contrôler ensuite le fichier choisi |
Contrôler la publication
Vérifiez la page, les variantes d’image et les informations de droits après publication. Exemple fictif : un visuel de chantier est remplacé par une illustration ; mettez aussi à jour légende, alternative, aperçu de partage et traductions qui l’identifiaient comme une réalisation réelle. Contrôlez accès aux fichiers et indexation souhaitée. Un ancien aperçu mis en cache peut rester différent : distinguez sa mise à jour de celle de la page.
Mesurez les impressions et clics par page dans les outils de recherche disponibles, sans attribuer un gain à un seul champ. Corrigez d’abord les images manquantes, non chargées ou sans contexte.
- Sources et variantes accessibles.
- Droits et crédit exacts.
- Résultat vérifié après publication.
Documents de référence
- recommandations Google pour les images · Source consultée
- W3C WAI : Images Tutorial
- MDN : Responsive images · Source consultée
Contenu mis à jour le