Bonnes pratiques de SEO pour Google Images
Google propose plusieurs fonctionnalités de recherche et des produits qui aident les utilisateurs à découvrir visuellement des informations sur le Web, tels que les images des résultats textuels, Google Discover et Google Images. Bien que chaque fonctionnalité et chaque produit soient différents, les recommandations générales permettant d'y faire figurer des images sont les mêmes.
Pour optimiser l'affichage de vos images dans les résultats de recherche Google, suivez ces bonnes pratiques :
Faciliter la découverte et l'indexation de vos images
Les exigences techniques pour inclure votre contenu dans les résultats de recherche Google s'appliquent également aux images. Étant donné que le format des images est très différent du format HTML, des exigences supplémentaires s'appliquent pour l'indexation des images. Par exemple, la recherche d'images sur votre site fonctionne différemment, et la présentation des images a également une influence sur leur indexation, et pour les mots clés appropriés.
Utiliser des éléments d'image HTML sémantiques pour intégrer des images
L'utilisation d'éléments d'image HTML standards permet aux robots d'exploration de trouver et de traiter les images. Google peut trouver des images dans l'attribut src de l'élément <img> (même s'il s'agit d'un enfant d'autres éléments, comme l'élément <picture>). Google n'indexe pas les images CSS.
Conseillé :
<img src="puppy.jpg" alt="Un chiot golden retriever" />
Déconseillé :
<div style="background-image:url(puppy.jpg)">Un chiot golden retriever</div>
Utiliser un sitemap pour les images
Vous pouvez fournir l'URL d'images que nous n'aurions peut-être pas trouvées autrement. Pour ce faire, envoyez un sitemap pour images.
Contrairement aux sitemaps classiques, vous pouvez inclure les URL d'autres domaines dans les éléments <image:loc> des sitemaps d'images. Ils vous permettent également d'utiliser des réseaux de diffusion de contenu, ou CDN, pour héberger les images. Si vous utilisez un CDN, nous vous encourageons à valider la propriété de son nom de domaine dans la Search Console pour que nous puissions vous informer des erreurs d'exploration potentielles.
Images responsives
La conception de pages Web responsives améliore l'expérience utilisateur, car les internautes peuvent y accéder depuis un grand nombre d'appareils. Consultez notre guide sur les images responsives pour en savoir plus sur les bonnes pratiques liées au traitement des images sur votre site Web.
Les pages Web utilisent l'élément <picture> ou l'attribut srcset d'un élément img pour spécifier des images responsives. Toutefois, ces attributs ne sont pas reconnus par tous les navigateurs et robots d'exploration. Nous vous recommandons de toujours spécifier une URL de remplacement via l'attribut src.
L'attribut srcset vous permet de spécifier différentes versions de la même image, en particulier pour différentes tailles d'écran. Exemple :
<img srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="maine-coon-nap-800w.jpg" alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">
L'élément <picture> est un conteneur qui permet de regrouper différentes versions <source> de la même image. Cette approche permet au navigateur de choisir la bonne image en fonction des fonctionnalités de l'appareil, telles que la densité de pixels et la taille de l'écran. L'élément picture se révèle également très pratique lorsque vous utilisez de nouveaux formats d'image intégrant une stratégie de dégradation élégante pour les clients qui ne les accepteraient pas encore.
Conformément à la Section 4.8.1 de la norme HTML, assurez-vous de fournir un élément img en tant qu'élément de remplacement avec un attribut src lorsque vous utilisez l'élément picture au format suivant :
<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid"> </picture>
Utiliser des formats d'image compatibles
La recherche Google accepte les images référencées dans l'attribut src de img dans
les formats de fichiers suivants :
BMP, GIF, JPEG, PNG, WebP, SVG et AVIFIl est également préférable que l'extension de votre nom de fichier corresponde au type de fichier.
Vous pouvez également intégrer des images sous la forme d'URI de données. Les URI de données permettent d'inclure un fichier, tel qu'une image, en définissant l'attribut src d'un élément img en tant que chaîne encodée en Base64 au format suivant :
<img src="data:image/svg+xml;base64,[data]">
Si les images intégrées réduisent en général le nombre de requêtes HTTP, utilisez-les à bon escient, car elles augmentent aussi considérablement la taille de la page. Pour en savoir plus sur les avantages et les inconvénients des images intégrées, consultez notre page web.dev.
Optimiser la vitesse et la qualité
Tout le monde préfère des photos de haute qualité à des images floues. En outre, les images nettes retiennent davantage l'attention des utilisateurs dans les vignettes de résultat, ce qui contribue à accroître le trafic. Cela dit, les images sont souvent volumineuses, ce qui peut ralentir le chargement des pages et faire fuir les visiteurs. Pour garantir une expérience utilisateur rapide et de haute qualité, veillez à appliquer les dernières techniques d'optimisation des images et celles relatives aux images responsives.
Analysez la vitesse de votre site à l'aide de l'outil PageSpeed Insights et consultez notre page Pourquoi la vitesse est-elle importante ? pour en savoir plus sur les bonnes pratiques et les techniques permettant d'améliorer les performances des sites Web.
Optimiser les pages de destination des images
Bien que cela ne soit pas évident au premier abord, le contenu et les métadonnées des pages dans lesquelles une image est intégrée peuvent avoir une grande influence sur la manière dont celle-ci apparaîtra dans les résultats de recherche Google.
Vérifier le titre et la description de la page
La recherche Google génère automatiquement un lien de titre et un extrait de texte pour décrire au mieux chaque résultat de recherche, et montrer en quoi celui-ci répond à la requête saisie par l'internaute. Ces informations aident les utilisateurs à savoir si cela vaut la peine de cliquer ou non sur un résultat. Voici deux exemples de liens de titre et d'extrait sur une page de résultats de recherche Google :
Nous utilisons différentes sources pour réunir ces informations, y compris celles figurant dans les balises title et meta de chaque page.
Suivez les consignes relatives aux titres et les consignes relatives aux extraits pour améliorer la qualité de ces informations.
Ajouter des données structurées
Si vous ajoutez des données structurées, Google peut afficher vos images dans certains résultats enrichis, y compris sous la forme d'un badge proéminent sur Google Images, ce qui fournit aux internautes des informations pertinentes sur votre page et et permet d'attirer une audience mieux ciblée sur votre site.
Suivez les consignes générales sur les données structurées ainsi que les directives propres aux données de ce type. Dans le cas contraire, vos données structurées risquent de ne pas s'afficher en tant que résultats enrichis dans Google Images. Dans chaque type de données structurées, vous devez renseigner l'attribut d'image pour que votre contenu puisse recevoir un badge et figurer dans les résultats enrichis de Google Images. Voici deux exemples de résultats enrichis dans Google Images :
Utiliser des noms de fichiers, des titres et du texte alternatif descriptifs
Google utilise le contenu de la page, y compris les légendes et le titre des éléments visuels, pour déterminer l'objet des images qui y figurent. Dans la mesure du possible, assurez-vous que les images sont placées à proximité du texte qui les concerne, ainsi que sur des pages dont le contenu coïncide avec ce qu'elles représentent.
De même, le nom de fichier peut donner à Google des indices très légers sur l'objet de l'image.
Lorsque cela est possible, utilisez des noms de fichiers courts, mais descriptifs. Par exemple, my-new-black-kitten.jpg est préférable à IMG00023.JPG. Dans la mesure du possible, évitez d'utiliser des noms de fichiers génériques comme image1.jpg, pic.gif et 1.jpg.
Si votre site comporte des milliers d'images, vous pouvez envisager d'automatiser l'attribution de noms aux images. Si vous localisez vos images, n'oubliez pas de traduire également les noms de fichiers. N'oubliez pas les consignes d'encodage des URL si vous utilisez des caractères non latins ou spéciaux.
L'attribut le plus important lorsqu'il s'agit de fournir plus de métadonnées pour une image est le texte alternatif (texte décrivant une image). Il améliore également l'accessibilité pour les personnes qui ne peuvent pas voir les images sur les pages Web, y compris les internautes qui utilisent des lecteurs d'écran ou qui disposent d'une connexion à faible bande passante.
Nous utilisons non seulement le contenu de la page, mais aussi le texte alternatif avec des algorithmes de vision par ordinateur afin de déterminer l'objet de l'image. De plus, le texte alternatif dans les images peut servir de texte d'ancrage si vous décidez d'utiliser ces dernières en tant que liens.
Pour la rédaction de votre texte alternatif, attachez-vous à créer un contenu utile et informatif qui utilise les mots clés de manière appropriée et coïncide avec le thème de la page. Évitez de remplir les attributs alt avec des mots clés (ce qui est également appelé accumulation de mots clés), car cela nuit à l'expérience utilisateur et peut donner l'impression que votre site est du spam.
Déconseillé (texte alternatif manquant) :
<img src="puppy.jpg"/>
Déconseillé (accumulation de mots clés) :
<img src="puppy.jpg" alt="<img src="chiot.jpg" alt="chiot chiots petit chien petits chiens retriever labrador berger allemand setter chien de chasse jack russell terrier nourriture pour chien nourriture pas chère nourriture pour chiot"/>"/>
Préférable :
<img src="puppy.jpg" alt="chiot"/>
Vivement conseillé :
<img src="puppy.jpg" alt="Chiot dalmatien en train de jouer à la balle"/>
Pensez également à l'accessibilité de votre texte alternatif, conformément aux consignes W3.
Pour l'élément <img>, vous pouvez ajouter l'attribut alt de l'élément, tandis que pour les éléments <svg> intégrés, vous pouvez utiliser l'élément <title>. Exemple :
<svg aria-labelledby="svgtitle1"> <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title> </svg>
Nous vous conseillons de tester votre contenu en vérifiant son accessibilité et en utilisant un émulateur de connexion réseau lente.
Désactiver les liens intégrés Google Images
Si vous le souhaitez, vous pouvez empêcher que l'image s'affiche en taille réelle sur la page de résultats de recherche de Google Images en y désactivant les liens intégrés. Pour désactiver les liens intégrés, procédez comme suit :
- Lorsque votre image est demandée, examinez l'URL de provenance HTTP dans la requête.
-
Si la requête provient d'un domaine Google, renvoyez un code d'état HTTP
200ou un code d'état HTTP204sans contenu.
Google explorera quand même votre page et verra l'image, mais affichera une vignette générée au moment de l'exploration dans les résultats de recherche. Vous pouvez désactiver les liens intégrés à tout moment, et lorsque vous le faites, les images de votre site Web n'ont pas besoin d'être traitées à nouveau. Ce comportement n'est pas considéré comme une technique de dissimulation d'image et n'entraîne pas d'action manuelle.
Vous pouvez également empêcher complètement l'image de figurer dans les résultats de recherche.
Optimiser votre site pour SafeSearch
SafeSearch est un paramètre des comptes utilisateur Google. Il permet aux utilisateurs d'indiquer s'ils souhaitent afficher ou bloquer les images, vidéos et sites Web au contenu explicite dans les résultats de recherche Google. Pour que nous puissions appliquer correctement les filtres SafeSearch à votre site si nécessaire, vous devez vous assurer que Google comprend la nature de votre site. En savoir plus sur le balisage des pages pour SafeSearch