Comment optimiser votre référencement sur Google en travaillant vos images ?

Depuis que le recherche universelle est présente (2007), Google affiche des résultats issus de ses moteurs de recherche verticaux comme par exemple l'actutalité, les images et les vidéos. Il est alors devenu important d’optimiser le référencement des images, même si le site n’est pas spécialisé dans ce domaine. L'optimisation des images fait maintenant parti des bases du SEO et est incourtanable pour optenir un bon référencement.

 L’objectif de cet article est de présenter une synthèse de tout ce qu’on connait à propos de l’optimisation du référencement des images.

 

Plan de l'article :

1. Critères d’optimisation des images pour le référencement

   1. Les critères les + importants pour le SEO

   2. Code HTML d’une image dans une page web

   3. Responsive des images (adaptation à la taille de l'écran)

   4. Autres critères SEO pour les images

   5. Astuces

2. Indexation des images

   1. Comment bien indexer ses images dans Google ?

   2. Comment empêcher Google d’indexer mes images ?

   3. Comment supprimer une image indexée par Google ?

 

Critères d’optimisation des images pour le référencement

 

1. Les critères les + importants pour le SEO

 

Soignez le contexte sémantique de l’image

Le plus important, c’est le contexte sémantique dans lequel vous insérez l’image. Il est généralement admis que les moteurs se basent sur, au minimum, les 7 à 10 mots avant et après la balise image : soignez-les !

 

Incluez une légende sous l'image

Maintenant que l’on sait que le contexte sémantique est important, je vous recommande d’ajouter systématiquement une légende !

Profitez-en pour décrire l’image avec des termes différents et complémentaires dans la sémantique de ceux utilisés dans l’attribut alt.

En HTML5, utilisez le conteneur <figure> qui contient la balise <img> et la balise <figcaption> pour la légende (exemple de code ci-après).

 

Remplissez l'attribut ALT de la balise IMG (texte alternatif)

Remplissez systématiquement l’attribut alt de la balise img en y mettant une description courte de l’image contenant des mots clés.

N’oubliez pas que Google comprend les mots dans un contexte. N’utilisez donc pas juste une série de mots-clés mais écrivez une petite phrase ayant du sens. La phrase utilisée pour cet attribut doit réellement correspondre à l’image et au contexte sémantique de l’image.

N’oubliez pas que l’attribut alt est présent pour améliorer l’accessibilité de vote page, notamment pour les mal-voyants. Ce n’est donc pas uniquement pour les robots.

Remarque : on parle ici des images qui illustrent le contenu de la page, pas celles qui servent uniquement au design. Pour ces dernières, qu’on appelle « images décoratives », il faut un attribut alt mais vide, afin qu’il soit ignoré par les lecteurs d’écran.

 

2. Code HTML d’une image dans une page web

 

Voici un exemple de code HTML5 optimisé pour le référencement des images :

------

<p>Ici un paragraphe soigné avec quelques mots-clés</p>

<figure>

   <img src="/images/mot-cle.jpg"

     alt="Petite description avec des mots-clés, destinée aux robpts et aux mal voyants"

     title="Autre description destinée aux internautes">

   <figcaption>Légende incluant des mots-clés appartenant à la sémantique de l’image</figcaption>

</figure>
------

Remarques

• Vous pouvez ajouter un lien pointant vers une autre page web ou vers une autre version de l’image (par exemple haute résolution).
• L’attribut title n’est pas indispensable. Mettez-le s’il permet de rendre service à l’utilisateur.

 

3. Responsive des images (adaptation à la taille de l'écran)

 

Plutôt que d'utiliser une image dont la taille varie en fonction de la taille de l'écran, il est recommandé de proposer plusieurs images de taille différentes. Cela permet d'améliorer l'éxperience utilisateur et la vitesse de chargement de vos pages.

Voici 2 techniques permettant cela :

• l’attribut srcset de la balise img permet de définir plusieurs noms de fichiers ainsi que les tailles d’écran associées
• la balise source (incluse dans un bloc picture) permet de définir différentes versions de la même image, dans des formats différents (par exemple un format vectoriel comme SVG en plus d’un format comme PNG)

Voiçi un exemple de code HTML avec img srcset :

------

<img

  srcset="soleil-320w.jpg 320w, soleil-480w.jpg 480w, soleil-800w.jpg 800w"

  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"

  src="soleil-800w.jpg"

  alt="soleil Responsive Web"

>
------

Voiçi un exemple de code HTML avec picture et source :

------

<picture>

  <source type="image/svg+xml" srcset="soleil.svg">

  <source type="image/webp" srcset="soleil.webp">

  <img src="soleil.png" alt="soleil">

</picture>
-------

 

4. Autres critères SEO pour les images

 

Position de l'image dans la page

L’emplacement de l’image dans la page semble compter pour Google (on parle de ranking factor). Comme vous l’aurez compris, l’image la plus importante et pertinente pour votre page doit se situer au début du contenu principal.

 

Nom de l’image avec mots-clés

Pour un bon référencement, faut-il mettre des mots-clés dans le nom du fichier image ? Je le conseil, mais c’est vraiment secondaire et l’impact sur le référencement n’a pas été démontré !

 

Autres ranking factors pour le référencement des images

Voici d’autres critères rapportés par d'autres experts :

• Balise title : mettez dans la balise title de la page hébergeant l’image des mots-clés en rapport avec l’image
• Balise h1 : mettez dans une balise h1 sur la page hébergeant l’image des mots-clés en rapport avec l’image
• filtre SafeSearch : dans tous les mots-clés, n’incluez aucune référence au sexe, sinon l’image sera filtrée par le filtre parental SafeSearch
• Backlinks de la page hébergeant l’image : comme pour le référencement classique, faites en sorte d’avoir des mots-clés stratégiques dans les textes des liens pointant vers la page incluant l’image

 

L’attribut title de la balise img

L'attribut title n’est pas pris en compte par les moteurs de recherche. Il n'a donc aucun impact connu sur le référencement, mais vos visiteurs le verront (sur ordinateur) s’ils mettent leur souris au-dessus de votre image.

 

5. Astuces

 

Les tags dans Google Image

Pour améliorer votre contenu éditorial entourant l’image (ce qui vous aidera également à créer une page de qualité), regardez les « tags » que Google affiche au-dessus de ses résultats :

Dans mon exemple, pour la requête « voyage » Google suggère « brésil», « ile maurice», « avion », « assurance voyage », « conseiller »… Incluez les termes appropriés dans votre texte, de façon naturelle.

Autres conseils :

• Si vous utilisez un tableau (balise table), assurez-vous d’inclure des mots-clés dans la même cellule du tableau que celle qui inclut l’image
• Ne mettez pas de mots clés dans l’attribut alt des images qui servent au design de votre site (et qui n’ont pas de rapport avec ces mots-clés). C’est inefficace et peut être assimilé à du spamdexing.
• Optimisez le texte du lien qui mène soit à la page web intégrant l’image, soit à l’image elle-même (ce texte de lien doit évidemment contenir des mots-clés)

 

Référencement des photos

Pour bien référencer vos photos, assurez-vous de respecter les consignes générales (belle image inédite, grande, sur la largeur de contenu, dans un contexte sémantique adéquat). Optez pour le format WebP ou JPEG et png pour un affichage sur tous les navigateur et optimisez la compression.

 

Indéxation des images

 

1. Comment bien indexer ses images dans Google ?

 

Si dans les premières années de Google image, il était difficile de les indexer, aujourd’hui Google s’est bien amélioré et l’indexation est très rapide.

Vous pouvez vous assurer que la page contenant l'image est bien indexé. Vous pouvez également utiliser des sitemaps images qui facilitent leur indexation.

 

2. Comment empêcher Google d’indexer mes images ?

 

Vous devez envoyer des informations aux robots de Google par le fichier robots.txt :

• pour bloquer uniquement la recherche d’images de Google : User-agent: Googlebot-Image
• pour bloquer tous les services de Google : User-agent: Googlebot
• pour bloquer tous les moteurs de recherche : User-agent: *

Par exemple pour empêcher le crawl par Googlebot-Image du répertoire /images/ (à la racine) :

User-agent: Googlebot-Image

Disallow: /images/

Pour empêcher le crawl par Googlebot-Image de tous les fichiers PNG :

User-agent: Googlebot-Image

Disallow: /*.png$

Pour empêcher le crawl par Googlebot-Image de toutes vos images :

User-agent: Googlebot-Image

Disallow: /

Attention, si vous avez des instructions pour un user-agent précis, seulement celles-ci seront appliquées pour le user-agent en question. Si vous avez d’autres instructions dans une section User-agent: *, elles seront ignorées par ce user-agent.

 

3. Comment supprimer une image indexée par Google ?

 

Il est compliqué de supprimer de Google des images provenant d'un autre site. Pour cela vous devez faire une demande.

Pour supprimer les images de Google provenants de votre site, vous pouvez utiliiser l’outil de suppression d’URL dans l’ancienne Search Console. N’oubliez pas que sans mesure de votre côté, la suppression est temporaire (90 jours). C’est à vous de vous assurer qu’en plus de cette demande, vous avez :

• soit interdit le crawl de l’image
• soit supprimé l’image (elle ne renvoie plus un code 200)
• soit paramétré l’envoi d’un entête X-Robots-Tag noindex

 

Merci d’avance pour tous vos commentaires et vos retours d’expériences, qui permettront de compléter ce guide 😀