
SEO JavaScript : rendre un site React visible sur Google et les IA
SEO JavaScript : comment Google rend un site React, pourquoi les robots d'IA ne lisent pas le JavaScript, et quel mode de rendu choisir.

En bref
Pour le SEO images, c'est-à-dire pour que Google indexe vos visuels, intégrez-les avec des balises HTML img (Google n'indexe pas les images en arrière-plan CSS), donnez-leur un nom de fichier descriptif et un texte alternatif utile, et choisissez une image représentative pour chaque page. Google précise que ces bonnes pratiques valent pour Google Images, mais aussi pour les images des résultats texte et pour Discover, et son guide sur l'IA générative les cite comme levier pour apparaître au-delà des liens.
Mis à jour le 3 novembre 2026.
Beaucoup de sites soignent leurs textes et laissent leurs visuels au hasard : fichiers nommés IMG_0023, alt vides, images chargées par du JavaScript que personne n'a testé. Cet article rassemble les recommandations officielles de Google, applicables à un site vitrine, un blog ou une boutique, et signale ce qui relève de notre expérience plutôt que d'une règle publiée. Il est complémentaire de notre guide sur le contenu non-commodity, car des visuels originaux sont aussi des éléments que personne ne peut copier.
Texte alternatif (alt) : la description d'une image placée dans l'attribut alt de la balise img. Google la considère comme l'attribut le plus important pour fournir des informations sur une image, et elle améliore l'accessibilité.
Sitemap d'images : un fichier, ou une extension de votre sitemap, qui signale à Google des images qu'il ne trouverait pas autrement, par exemple celles chargées par du code JavaScript.
Image préférée : l'image que vous indiquez à Google comme représentative d'une page, via des données structurées ou la balise og:image.
Lazy-loading : le chargement différé des images non visibles. Bien implémenté, il améliore la vitesse ; mal implémenté, il peut cacher du contenu à Google.
Images responsives : des versions d'une même image adaptées aux écrans, déclarées avec l'attribut srcset ou l'élément picture.
Dans son guide sur les fonctionnalités d'IA générative, Google rappelle que ces fonctionnalités peuvent faire apparaître des images et des vidéos pertinentes, ce qui multiplie les occasions de se montrer au-delà des liens. Ce guide, publié en mai 2026, ajoute que si vous suivez déjà ses bonnes pratiques pour les images, vous optimisez déjà pour la recherche générative (Google Search Central).
Il n'existe donc pas de « SEO image pour l'IA » séparé : c'est le SEO d'images classique, bien exécuté. Cela rejoint ce que nous expliquions dans les mythes GEO.
Google détecte les images dans l'attribut src d'une balise img, même placée à l'intérieur d'autres éléments comme picture. Il n'indexe pas les images CSS (Google Search Central). Une image placée en arrière-plan d'un div n'existera donc pas pour Google Images.
Les formats compatibles sont BMP, GIF, JPEG, PNG, WebP, SVG et AVIF, et il est conseillé que l'extension du fichier corresponde à son type. Si vous utilisez picture ou srcset, Google recommande de toujours prévoir une balise img avec un src de secours, car certains navigateurs et robots ne comprennent pas ces attributs.
Pour un site React, notre guide sur le SEO JavaScript détaille les risques de rendu : vérifiez que vos images figurent bien dans le HTML rendu.
D'après la documentation de Google consultée le 2 novembre 2026, voici les situations les plus fréquentes :
| Situation | À éviter | À privilégier |
|---|---|---|
| Intégration | Image en arrière-plan CSS d'un div | Balise img avec src et alt |
| Version responsive | picture ou srcset sans img de secours | picture ou srcset avec une balise img et son src |
| Nom de fichier | IMG00023.JPG, image1.jpg | Nom court et descriptif, mots séparés par des tirets |
| Texte alternatif | Alt manquant, ou bourré de mots clés | Description utile et précise, en contexte |
| Image de page | Logo, image contenant du texte, format extrême | Image représentative, en haute résolution |
La dernière ligne vient de la même page : pour l'image préférée, Google déconseille une image générique comme un logo, une image avec du texte ou un rapport hauteur-largeur extrême.
Google tire des informations sur le sujet d'une image à partir de la page : légendes, titres, texte voisin. Placez donc les images près du texte pertinent, sur des pages qui parlent de ce sujet. Le nom de fichier ne donne que des indices légers, mais mieux vaut « chaton-noir.jpg » que « IMG00023.JPG ». Si vous localisez vos images, traduisez aussi les noms de fichiers.
Pour le texte alternatif, Google demande un contenu utile, riche en informations, avec des mots clés utilisés à bon escient et en contexte. Il déconseille le bourrage de mots clés, qui dégrade l'expérience et peut faire passer le site pour du spam. Le texte alternatif sert aussi d'ancre lorsque l'image est un lien.
Voici l'approche que nous recommandons :
La sélection de l'aperçu est automatique, mais vous pouvez l'influencer. Google cite trois sources : la propriété primaryImageOfPage de schema.org, la propriété image associée à l'entité principale avec mainEntityOfPage, et la balise og:image. Pour un article de blog, un balisage BlogPosting avec une propriété image et mainEntityOfPage remplit ce rôle ; vérifiez surtout que la même image apparaît dans ces sources, sans contradiction entre elles.
Google précise aussi que la propriété image est requise pour qu'une page soit éligible au badge et aux résultats enrichis dans Google Images. Pour approfondir le balisage, voyez notre article sur les données structurées et le GEO.
Les images sont souvent le plus gros contributeur au poids d'une page. Google recommande des techniques d'optimisation récentes et d'analyser la vitesse avec PageSpeed Insights ; notre article sur les Core Web Vitals montre l'impact sur l'expérience.
Pour le chargement différé, la règle de Google est claire : chargez le contenu dès qu'il entre dans la fenêtre d'affichage, avec le lazy-loading natif du navigateur ou l'API IntersectionObserver, sans dépendre d'un clic ou d'un défilement, car Google Search n'interagit pas avec la page. N'appliquez pas le lazy-loading aux contenus visibles dès l'ouverture, au risque de ralentir leur affichage (Google Search Central). Pour tester, utilisez l'outil d'inspection d'URL de Search Console : si vos URL d'images figurent dans l'attribut src du HTML rendu, la mise en place fonctionne.
Il sert surtout à signaler des images que Google ne trouverait pas autrement, comme celles chargées par du code. Google accepte un fichier distinct ou des balises dans votre sitemap existant, avec jusqu'à 1 000 images par URL (sitemaps d'images Google). La seule balise de localisation requise est image:loc, et l'URL peut appartenir à un autre domaine, par exemple un CDN, à condition de le valider dans Search Console (Google Search Central).
Les balises de légende, de titre, de géolocalisation et de licence ont été retirées de la documentation. Pour le reste, notre guide sur le sitemap XML détaille les règles générales.
Si vous générez des visuels avec l'IA, Google suggère de donner du contexte sur leur création, par exemple via les métadonnées de l'image, et de relire manuellement les textes alternatifs, qui peuvent apparaître dans les résultats. Pour les boutiques, les règles de Google Merchant Center demandent que les images générées par IA portent la métadonnée IPTC DigitalSourceType TrainedAlgorithmicMedia (Google Search Central). Cette exigence concerne Merchant Center, pas toutes les pages d'un site.
Voici la liste que nous utilisons pour contrôler une page, à titre de méthode :
Non, Google n'indexe pas les images CSS. Source : Google Search Central.
BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. Source : Google Search Central.
Jusqu'à 1 000 balises image par URL, selon la documentation Google : sitemaps d'images Google.
Il ne donne que de très légers indices sur le sujet de l'image, mais un nom descriptif reste préférable. Source : Google Search Central.
Oui, avec le chargement natif ou IntersectionObserver, sans le réserver aux contenus visibles à l'ouverture, et en le testant. Source : lazy-loading Google.
Google indique que ses fonctionnalités d'IA générative peuvent présenter des images et des vidéos pertinentes. Source : guide Google sur l'IA générative.
Nous auditons vos pages, vos balises et vos visuels, et alignons votre référencement avec vos campagnes payantes. Découvrez notre offre Google Ads, notre page agence Google Ads en France, demandez un audit gratuit ou contactez-nous.

SEO JavaScript : comment Google rend un site React, pourquoi les robots d'IA ne lisent pas le JavaScript, et quel mode de rendu choisir.

Sitemap XML : limites de 50 Mo et 50 000 URL, lastmod, robots.txt, index de sitemaps, fin du ping Google et IndexNow pour Bing.

Redirection 301 : 301, 302 et 308, chaînes de redirections, soft 404, durée de conservation et délais de migration selon Google.
Notre équipe vous offre un audit gratuit de vos campagnes.
Demander mon audit