Meilleures pratiques SEO pour les images Google

Google propose plusieurs fonctionnalités et produits de recherche qui aident les utilisateurs à découvrir visuellement des informations sur le Web, tels que les
images de résultats textuels, Google Discover et Google Images. Bien que chaque fonctionnalité et produit ait une apparence différente, les recommandations générales pour que les images y apparaissent sont les mêmes.

Vous pouvez optimiser vos images pour qu’elles apparaissent dans les résultats de recherche Google en suivant ces meilleures pratiques :

1. Aidez-nous à découvrir et indexer vos images
2. Optimisez les pages de destination des images

Aidez-nous à découvrir et indexer vos images

Les exigences techniques pour que votre contenu apparaisse dans les résultats de recherche Google s’appliquent également aux images. Étant donné que les images sont un format sensiblement différent du HTML, il existe des exigences supplémentaires pour que les images soient indexées ; par exemple, trouver les images sur votre site est différent, et la présentation des images influence également si une image est indexée et pour les bons mots-clés.

Utilisez des éléments d’image HTML pour intégrer des images

L’utilisation d’éléments d’image HTML standard aide les robots d’indexation à trouver et à traiter les images. Google peut trouver des images dans l’attribut src d’un élément <img> (même lorsqu’il est enfant d’autres éléments, comme l’élément <picture> ). Google n’indexe pas les images CSS.

Bien :

<img src=”puppy.jpg” alt=”Un chiot Golden Retriever” />

Mal :

<div style=”background-image:url(puppy.jpg)”>Un chiot Golden Retriever</div>

Utilisez un sitemap d’images

Vous pouvez fournir l’URL des images que nous n’aurions peut-être pas découvertes autrement en
soumettant un sitemap d’images.

Contrairement aux sitemaps classiques, vous pouvez inclure des URL provenant d’autres domaines dans les éléments
<image:loc> des sitemaps d’images. Cela vous permet d’utiliser des CDN (réseaux de diffusion de contenu) pour héberger des images. Si vous utilisez un CDN, nous vous encourageons à
vérifier la propriété
du nom de domaine du CDN dans la Search Console afin que nous puissions vous informer de toute erreur d’exploration que nous pourrions trouver.

Images responsives

La conception de pages Web responsives conduit à une meilleure expérience utilisateur, car les gens peuvent y accéder sur une multitude de types d’appareils. Consultez notre
guide sur les images responsives
pour en savoir plus sur les meilleures pratiques de gestion 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. Cependant, certains navigateurs et robots d’indexation ne comprennent pas ces attributs. Nous vous recommandons de toujours spécifier une URL de secours à l’aide de l’attribut
src .

L’attribut srcset permet de spécifier différentes versions de la même image, spécifiquement pour différentes tailles d’écran. Par exemple :

L’élément <picture> est un conteneur utilisé pour regrouper différentes versions
<source> de la même image. Il offre une approche de secours afin que le navigateur puisse choisir la bonne image en fonction des capacités de l’appareil, telles que la densité de pixels et la taille de l’écran. L’élément picture est également utile pour utiliser de nouveaux formats d’image avec une dégradation gracieuse intégrée pour les clients qui ne prennent peut-être pas encore en charge les nouveaux formats.

Conformément à la
section 4.8.1 de la norme HTML, assurez-vous de fournir un élément img en guise de secours avec un attribut src
lors de l’utilisation de l’élément picture en utilisant le format suivant :

Utilisez des formats d’image pris en charge

La recherche Google prend en charge les images référencées dans l’attribut src de img dans les formats de fichier suivants :

BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. C’est également une bonne idée de faire correspondre l’extension de votre nom de fichier au type de fichier. Vous pouvez également intégrer des images en ligne sous forme de Data URI. Les Data URI offrent un moyen d'inclure un fichier, tel qu'une image, en ligne en définissant l'attribut src d'un élément img

sous forme de chaîne encodée en Base64 en utilisant le format suivant :
Bien que l’intégration d’images en ligne puisse réduire les requêtes HTTP, jugez soigneusement quand les utiliser car cela peut augmenter considérablement la taille de la page. Pour en savoir plus, consultez la section sur les avantages et les inconvénients de l’intégration d’images en ligne sur notre page web.dev.

Optimisez pour la vitesse et la qualité

Les photos de haute qualité attirent davantage les utilisateurs que les images floues ou peu claires. De plus, les images nettes sont plus attrayantes pour les utilisateurs dans la vignette de résultat et peuvent augmenter la probabilité d’obtenir du trafic. Cela dit, les images sont souvent le facteur qui contribue le plus à la taille globale de la page, ce qui peut rendre les pages lentes et coûteuses à charger. Assurez-vous d’appliquer la
dernière optimisation d’image
et des techniques d’image responsive
pour offrir une expérience utilisateur rapide et de haute qualité.

Analysez la vitesse de votre site avec
PageSpeed Insights
et visitez notre page
Pourquoi la vitesse est-elle importante ?
pour en savoir plus sur les meilleures pratiques et techniques pour améliorer les performances du site Web.

Optimisez les pages de destination des images

Bien que ce ne soit pas immédiatement évident, le contenu et les métadonnées des pages où une image est intégrée peuvent avoir une grande influence sur la façon dont et l’endroit où l’image peut apparaître dans les résultats de recherche Google.

Spécifiez une image préférée avec des métadonnées

La sélection d’un aperçu d’image par Google est entièrement automatisée et prend en compte un certain nombre de sources différentes pour sélectionner l’image d’une page donnée qui est affichée sur Google (par exemple, une
image de résultat textuel
ou l’image d’aperçu dans Discover).

Vous pouvez influencer l’image sélectionnée en fournissant votre image préférée via l’une des sources de métadonnées suivantes :

• Spécifiez la propriété primaryImageOfPage
  de schema.org avec une URL ou un ImageObject.

  Ou spécifiez une propriété d’image URL ou ImageObject et attachez-la à l’entité principale (en utilisant les propriétés mainEntity
  ou mainEntityOfPage de schema.org) :
• Spécifiez la balise meta og:image Lorsque vous choisissez votre image préférée pour une utilisation dans le balisage schema.org ou dans la balise

meta
og:image suivez ces meilleures pratiques : Choisissez une image pertinente et représentative de la page.

• Évitez d’utiliser une image générique (par exemple, le logo de votre site) ou une image avec du texte dans le balisage schema.org ou dans la balise
• meta og:image Évitez d'utiliser une image avec un rapport hauteur/largeur extrême (comme des images trop étroites ou trop larges). Utilisez une haute résolution, si possible.
• Vérifiez le titre et la description de votre page
• La recherche Google génère automatiquement un lien de titre et un extrait pour expliquer au mieux chaque résultat et son rapport avec la requête de l’utilisateur. Cela aide les utilisateurs à décider s’ils doivent cliquer sur un résultat ou non. Voici deux exemples de ce à quoi pourraient ressembler les liens de titre et l’extrait sur une page de résultats de recherche Google :

Nous utilisons un certain nombre de sources différentes pour ces informations, y compris les informations dans les balises

title

et
meta de chaque page. Vous pouvez nous aider à améliorer la qualité du lien de titre et de l'extrait affichés pour vos pages en suivant les directives de title

et snippet de Google.
Ajoutez des données structurées Si vous incluez des données structurées, Google peut afficher vos images dans certains

résultats enrichis

, y compris un
badge proéminentdans Google Images, qui donne aux utilisateurs des informations pertinentes sur votre page et peut générer un trafic mieux ciblé vers votre site.
Suivez les directives générales sur les données structurées

ainsi que toutes les directives spécifiques à votre type de données structurées ; sinon, vos données structurées pourraient ne pas être éligibles pour l’affichage de résultats enrichis dans Google Images. Pour chacun de ces types de données structurées, l’attribut d’image est un champ obligatoire pour être éligible à un badge et à un résultat enrichi dans Google Images. Voici deux exemples de ce à quoi pourraient ressembler les résultats enrichis dans Google Images : Utilisez des noms de fichiers, des titres et un texte alternatif descriptifs
Google extrait des informations sur le sujet de l’image à partir du contenu de la page, y compris les légendes et les titres des images. Dans la mesure du possible, assurez-vous que les images sont placées près d’un texte pertinent et sur des pages pertinentes pour le sujet de l’image.

De même, le nom du fichier peut donner à Google de très légers indices sur le sujet de l’image. Dans la mesure du possible, utilisez des noms de fichiers courts mais descriptifs. Par exemple,

my-new-black-kitten.jpg

est meilleur que
IMG00023.JPG . Évitez d’utiliser des noms de fichiers génériques comme image1.jpgpic.gif 1.jpg, si possible. Si votre site contient des milliers d'images, vous voudrez peut-être envisager d'automatiser la dénomination des images. Si vous localisez vos images, n'oubliez pas de traduire également les noms de fichiers, en gardant à l'esprit que, ru ru
Directives d’encodage d’URL si vous utilisez des caractères non latins ou spéciaux.

L’attribut le plus important pour fournir plus de métadonnées pour une image est le texte alternatif (texte qui décrit une image), ce qui améliore également l’accessibilité pour les personnes qui ne peuvent pas voir les images sur les pages Web, y compris les utilisateurs qui utilisent des lecteurs d’écran ou ont des connexions à faible bande passante.

Google utilise le texte alternatif ainsi que des algorithmes de vision par ordinateur et le contenu de la page pour comprendre le sujet de l’image. De plus, le texte alternatif dans les images est utile comme texte d’ancrage si vous décidez d’utiliser une image comme lien.

Lors de la rédaction du texte alternatif, concentrez-vous sur la création de contenu utile et riche en informations qui utilise les mots-clés de manière appropriée et qui est dans le contexte du contenu de la page. Évitez de remplir alt
attributs avec des mots-clés (également appelés
bourrage de mots-clés), car cela entraîne une expérience utilisateur négative et peut amener votre site à être considéré comme du spam.

Mauvais (texte alternatif manquant):

<img src=”puppy.jpg”/>

Mauvais (bourrage de mots-clés):

<img src=”puppy.jpg” alt=”chiot chien bébé chien chiot chiots chiots chiens chiots portée chiots chien retriever labrador lévrier setter pointeur chiot jack russell terrier chiots nourriture pour chiens nourriture pour chiens bon marché nourriture pour chiots“/>

Mieux:

<img src=”puppy.jpg” alt=”chiot“/>

Le meilleur:

<img src=”puppy.jpg” alt=”Chiot dalmatien jouant à rapporter“/>

Tenez également compte de l’accessibilité de votre texte alternatif, conformément aux
directives W3. Pour le <img> élément, vous pouvez ajouter l’attribut alt de l’élément, tandis que pour les éléments <svg> en ligne, vous pouvez utiliser l’élément
<title> . Par exemple :

Nous vous recommandons de tester votre contenu en
auditant l’accessibilité
et
en utilisant un émulateur de connexion réseau lente.

Si une image est référencée sur plusieurs pages au sein d’un site Web plus vaste, tenez compte du
budget d’exploration du site. En particulier, référencez systématiquement l’image avec la même URL, afin que Google puisse mettre l’image en cache et la réutiliser sans avoir besoin de la demander plusieurs fois.

Désactivation des liens en ligne de Google Images

Si vous le souhaitez, vous pouvez empêcher l’image en taille réelle d’apparaître sur la page des résultats de recherche Google Images en désactivant les liens en ligne dans les résultats de recherche Google Images.
Pour désactiver les liens en ligne :

1. Lorsque votre image est demandée, examinez l’
   en-tête de référent HTTP
   dans la requête.
2. Si la requête provient d’un domaine Google, répondez avec un 200 code d’état HTTP 204 ou un

code d’état HTTP et aucun contenu.
Google continuera d’explorer votre page et de voir l’image, mais affichera une image miniature générée au moment de l’exploration dans les résultats de recherche. Cette désactivation est possible à tout moment et ne nécessite pas de retraitement des images d’un site Web. Ce comportement n’est pas considéré comme du cloaking

d’image et n’entraînera pas d’actions manuelles.
Alternativement, vous pouvez

empêcher complètement l’image d’apparaître dans les résultats de recherche.

Optimiser pour SafeSearch
SafeSearch est un paramètre des comptes d’utilisateurs Google qui spécifie s’il faut afficher, flouter ou bloquer les images, vidéos et sites Web explicites dans les résultats de recherche Google. Assurez-vous que Google comprend la nature de votre site afin que Google puisse appliquer les filtres SafeSearch à votre site si nécessaire..