Une photo de produit mal nommée reste souvent invisible sur Google.
Nom de fichier, texte alternatif et poids forment un seul signal. Beaucoup de boutiques les laissent au hasard. Voici ce qu’il faut régler pour optimiser le SEO des images Shopify, et ce que la plateforme prend déjà en charge.
Mettre en place le SEO des images Shopify
Ce que le SEO des images doit produire
Le SEO des images vise trois résultats. Vos visuels apparaissent dans Google Images. Vos pages gagnent en clarté pour le moteur. Les personnes qui utilisent un lecteur d’écran accèdent au contenu.
Google repère d’abord les images présentes dans le code HTML, via l’attribut src d’une balise <img>. Une image ajoutée seulement par JavaScript est plus lente à explorer.
Le nom du fichier, le texte alternatif, le titre de la page, la fiche produit et le texte autour de l’image forment un ensemble cohérent. Cette cohérence aide le moteur à comprendre le sujet de l’image.
Le texte alternatif sert aussi l’accessibilité. Il décrit l’image si elle ne se charge pas et il la rend compréhensible aux technologies d’assistance.
Google recommande des noms de fichiers courts et descriptifs. Il recommande aussi un texte alternatif utile, cohérent avec la page. Le bourrage de mots-clés affaiblit ce signal.
Répartir les actions entre Shopify et vous
Shopify prend en charge automatiquement plusieurs opérations techniques :
- CDN d’images : les fichiers sont diffusés depuis l’infrastructure de Shopify, avec des variantes adaptées aux dimensions demandées.
- Formats de diffusion : le service détecte les formats compatibles avec le navigateur et peut servir du WebP ou de l’AVIF lorsque cela réduit le poids.
- Images responsives : les filtres de thème peuvent générer un
srcset, soit plusieurs fichiers pour plusieurs largeurs d’écran. - Dimensions HTML : les attributs
widthetheightpeuvent être ajoutés automatiquement afin de limiter les décalages de mise en page. - Chargement différé : les images situées plus bas dans la page peuvent être chargées à l’approche de l’internaute.
Plusieurs éléments éditoriaux restent sous votre responsabilité directe :
- le nom du fichier, avant import
- le texte alternatif
- la cohérence du cadrage
- le point focal des bannières
- le choix de l’image principale
- le rendu sur ordinateur et sur mobile
Avant d’importer une image
- Le nom du fichier décrit le produit réel.
- Le texte alternatif décrit ce qui est visible.
- Le cadrage correspond à la fiche produit.
- Le point focal reste visible sur mobile.
L’image doit rester liée à la fiche produit et à l’intention de recherche. Une photo de sac à dos étanche accompagne la fiche de ce sac. Son nom et son texte alternatif décrivent la matière ou l’usage visible.
Rédiger les noms de fichiers et les textes alternatifs
Noms de fichiers
Un nom comme IMG_4837.jpg ne dit rien du produit. Un nom comme sac-a-dos-etanche-noir-20-litres.jpg le décrit : produit, caractéristique visible, capacité.
Adoptez une convention stable avant chaque import :
- mots descriptifs liés au produit ;
- ordre logique, du produit vers la caractéristique ;
- lettres minuscules ;
- mots séparés par des traits d’union ;
- extension correspondant au format réel ;
- nom unique pour chaque visuel.
Évitez les suffixes pico, icon, thumb, testing, small, compact, medium, large et grande. Shopify peut les lire comme des demandes de transformation d’image par le CDN.
Évitez aussi le trait de soulignement juste avant une dimension. Préférez sac-a-dos-5x4.jpeg à sac_a_dos_5x4.jpeg : vous limitez les conflits avec les conventions de transformation.
Renommez le fichier sur votre ordinateur avant import. Shopify ne réécrit pas le nom après import. Pour changer ce signal, supprimez le média, puis chargez le fichier renommé.
Le nom de fichier et le texte alternatif ne servent pas au même usage. Le nom identifie le fichier dans l’URL. Le texte alternatif décrit l’image pour l’utilisateur comme pour le moteur de recherche.
Textes alternatifs
Un bon texte alternatif décrit ce que l’image montre. N’y glissez pas de promesse marketing absente du visuel. Chaussures de randonnée imperméables marron pour homme convient si ces éléments sont visibles.
Visez 125 caractères ou moins. Shopify fixe une limite technique de 512 caractères, mais ce plafond n’est pas une cible éditoriale.
Décrivez les détails qui distinguent les images d’une même fiche :
- Vue principale :
Sac à dos étanche noir de 20 litres, vue de face. - Détail matière :
Tissu noir du sac à dos avec fermeture zippée étanche. - Usage :
Sac à dos étanche noir porté lors d’une randonnée. - Vue intérieure :
Compartiment intérieur rembourré du sac à dos noir. - Variante :
Baskets blanches en cuir, semelle beige, vue latérale.
Ne répétez pas le titre du produit sur chaque image. Chaque alt doit différencier le visuel, dès que la différence apporte une information.
Pour modifier l’alt d’une image produit, suivez cinq étapes :
- Ouvrir Produits.
- Sélectionner la fiche concernée.
- Ouvrir le support multimédia.
- Saisir le texte alternatif.
- Enregistrer les modifications.
Shopify permet aussi d’importer ces données par fichier CSV.
Pour une bannière, un logo ou une image de section de thème, passez par l’éditeur de thème ou l’éditeur de supports multimédias, selon l’emplacement du fichier. Les images produits et celles du thème ne se gèrent pas toujours dans la même interface.
Choisir dimensions et formats adaptés
Dimensions et limites
Une image carrée de 2 048 × 2 048 pixels s’affiche bien sur Shopify. Elle garde assez de définition pour les galeries et les agrandissements courants.
Gardez un rapport hauteur-largeur constant. Des images au même ratio s’alignent proprement sur les pages de collection et les grilles de produits.
Shopify fixe quatre limites techniques :
| Élément | Limite Shopify | Conséquence pratique |
|---|---|---|
| Dimensions maximales | 5 000 × 5 000 px | Une image plus grande doit être redimensionnée avant import. |
| Résolution maximale | 25 mégapixels | Une image de 6 000 × 4 000 px dépasse la limite malgré un ratio courant. |
| Poids maximal | 20 Mo | Un fichier plus lourd doit être compressé ou redimensionné. |
| Rapport d’aspect | De 100:1 à 1:100 | Les formats extrêmement étroits restent techniquement admissibles. |
La largeur finale doit correspondre à la taille d’affichage prévue. Une bannière affichée sur 1 200 pixels n’exige pas un original de 6 000 pixels, au-delà de la limite Shopify de 5 000 pixels. En clair : une définition adaptée, sans pixels superflus.
Formats d’image
Shopify accepte notamment JPEG, PNG, GIF, HEIC et WebP pour les images de thème et les fichiers pris en charge par la plateforme. Les médias de produit acceptent aussi TIFF, BMP et SVG selon l’emplacement.
Le JPEG convient aux photographies, aux produits et aux bannières. Sa compression avec perte réduit le poids. Trop compresser, en revanche, crée des blocs, des halos et une perte de détail sur les textures.
Le HEIC peut être importé dans plusieurs zones de Shopify. Le WebP est accepté pour les produits et les fichiers. Les images de collection ne prennent toutefois pas en charge le WebP dans certains flux.
Le format importé n’est pas toujours celui envoyé au navigateur. Le CDN et le thème fournissent souvent une version optimisée. Elle dépend du navigateur, de la largeur demandée et des capacités de diffusion disponibles.
Ce que Shopify optimise automatiquement, et ce qu’il faut vérifier
Traitement automatique
Le CDN d’images redimensionne les visuels à la demande et permet aux thèmes de demander une largeur adaptée à chaque emplacement. Cette logique évite d’envoyer systématiquement l’original complet au navigateur.
Shopify recommande de charger la meilleure qualité disponible dès le départ. La plateforme génère ensuite les versions adaptées. Un fichier source dégradé limite toutes les variantes produites.
Les filtres image_url et image_tag peuvent générer plusieurs largeurs, les attributs width et height, le srcset et les paramètres nécessaires au rendu responsive. Un thème qui construit manuellement ses URL peut contourner ces optimisations.
Affichage et contrôles
L’image LCP, soit le plus grand élément visible au chargement, doit être chargée tôt. Avec loading="lazy", son chargement attend qu’elle approche de la zone visible et peut retarder l’indicateur LCP.
Contrôlez chaque image sur mobile et sur ordinateur, en vérifiant :
- la netteté
- le cadrage
- la présence du sujet
- l’absence de texte coupé
- la cohérence entre le texte alternatif et le rendu réel
Améliorer le poids et la vitesse sans dégrader l’image
Poids et qualité
Une image doit montrer assez de détail pour présenter le produit et permettre l’agrandissement. Elle ne doit pas dépasser les pixels que son affichage peut exploiter. Dimension inutile, poids inutile.
Le compromis dépend du visuel :
- Photographie produit : JPEG optimisé, à compression contrôlée.
- Logo transparent : PNG ou SVG lorsque le contexte le permet.
- Graphique avec texte : PNG, pour préserver contours et caractères.
- Animation courte : GIF, uniquement si l’animation apporte une information.
- Visuel photographique compatible : WebP ou AVIF, lorsque le système les génère et les sert correctement.
Une compression trop forte détruit d’abord les détails fins, les dégradés et les contours. Examinez le fichier à sa taille d’affichage réelle. Vérifiez ensuite son niveau d’agrandissement prévu.
Le poids cumulé compte davantage que celui d’un fichier isolé. Une page de collection qui charge 24 images peut ralentir fortement. Chaque fichier paraît pourtant acceptable.
Shopify indique qu’une compression manuelle préalable n’est pas obligatoire avant import. Cela ne dispense pas de redimensionner les fichiers surdimensionnés ni de supprimer les pixels inutiles.
Avant d’importer une image
- Redimensionner le fichier à sa taille d’affichage réelle.
- Choisir le format selon le visuel : JPEG, PNG, SVG, GIF ou WebP.
- Contrôler la compression à la taille d’agrandissement prévue.
- Additionner le poids des images de chaque page de collection.
Chargement de la page
Les images situées sous le premier écran utilisent en général le chargement différé. Les visuels visibles dès l’arrivée de l’internaute restent prioritaires et doivent être chargés tôt.
L’image principale d’une fiche produit peut devenir l’élément LCP. Une taille excessive la ralentit. Une découverte tardive dans le code la ralentit aussi. Un chargement différé mal appliqué aggrave encore ce délai.
2,5 secondes : le seuil recommandé pour un bon LCP au 75e percentile des visites. Mesurez ce résultat sur des données réelles. Un environnement de test seul ne suffit pas.
Les bannières et diaporamas gagnent à privilégier un visuel simple, correctement dimensionné, avec peu de texte intégré. Un carrousel chargé intégralement multiplie les octets critiques. Il n’améliore pas nécessairement le premier affichage.
S’appuyer sur le sitemap Shopify pour la découverte
Sitemap et découverte
Votre fichier principal se trouve à la racine du domaine : `. Shopify le génère pour chaque boutique. Vous n’avez rien à créer.
Shopify met à jour ce fichier seul. Chaque page, produit, collection, image ou article de blog ajouté y figure sans intervention de votre part.
Soumettez sitemap.xml dans Google Search Console après validation du domaine :
- Ouvrez la propriété correspondant au domaine de la boutique.
- Accédez à la rubrique Sitemaps.
- Saisissez
sitemap.xml. - Lancez l’envoi.
- Contrôlez ensuite l’état du fichier et les erreurs détectées.
Un sitemap d’images, séparé ou enrichi, aide Google à découvrir les visuels difficiles d’accès, notamment ceux chargés par JavaScript. Google accepte aussi des balises d’images dans un sitemap existant.
Vérifications SEO
Côté technique et affichage :
- image principale visible dans le HTML ;
- texte alternatif descriptif ;
- dimensions adaptées au conteneur ;
- chargement correct sur mobile ;
- image accessible sans interaction complexe.
Côté cohérence et exploration :
- absence de répétition mécanique entre les alts ;
- cohérence entre image, fiche produit et requête ciblée ;
- absence de blocage par les règles d’exploration ;
- présence de la page correspondante dans le sitemap.
Le bourrage de mots-clés transforme l’alt en suite illisible et ne décrit plus l’image. Robe noire robe femme robe élégante pas cher ne convient pas si le visuel ne montre qu’une robe noire.
Le SEO des images se joue avant l’import et se vérifie après publication. En clair : un nom de fichier descriptif, un poids maîtrisé et un LCP inférieur à 2,5 secondes au 75e percentile des visites réelles. Commencez par la fiche produit : son image principale peut devenir l’élément LCP.