PubliĂ© par le 6 aoĂ»t 2019 ‱ 19 Commentaires

Avec 15  700  000 rĂ©sultats au moment d’écrire ces lignes, on peut dire sans ciller que la requĂȘte Comment bien se rĂ©fĂ©rencer sur Google est pas mal recherchĂ©e


En y regardant de prĂšs, vous trouverez des tas d’astuces parmi les ressources proposĂ©es sur la premiĂšre page de Google.

Et vas-y que je te demande d’optimiser tes balises meta, ton contenu, ou encore tes titres.

Mais parmi tous ces conseils, il y en a un que je n’ai pas trouvĂ© en un coup d’oeil, mĂȘme en sortant ma loupe de dĂ©tective.

Un garçon tire la langue dans une loupe
Vraiment, j’ai bien regardĂ©

Personne ne met en avant l’optimisation SEO des images. Cette pratique est clairement sous-utilisĂ©e, pourtant, elle est loin d’ĂȘtre anodine. 

En travaillant le rĂ©fĂ©rencement de vos photos, vous pourriez notamment obtenir plus de trafic, qui plus est encore plus qualifiĂ© (c’est-Ă -dire que vos visiteurs sont rĂ©ellement intĂ©ressĂ©s par le contenu proposĂ© sur votre site).

Et comme pas mal de webmasters, de blogueurs ou encore de crĂ©ateurs de sites mettent de cĂŽtĂ© cet aspect pour plusieurs raisons (mĂ©connaissance, prioritĂ© au contenu textuel etc.), il y a pas mal d’opportunitĂ©s Ă  saisir. 

Dans cet article, je vais vous expliquer comment travailler le SEO de vos photos pour booster votre visibilitĂ©. 

Je vais notamment vous prĂ©senter 10 points sur lesquels agir dĂšs maintenant, grĂące Ă  des explications didactiques et… imagĂ©es ;-).

Note

Tout au long de cet article, nous allons beaucoup parler du rĂ©fĂ©rencement de vos images sur Google. La raison est simple : il s’agit du moteur de recherche le plus utilisĂ© en France. Il truste 94,2% des parts de marchĂ© (chiffres juin 2019), trĂšs trĂšs loin devant Bing (3,03%) et Yahoo (1,37%).

Pourquoi optimiser le SEO de vos images ?

Optimiser le SEO (*) de vos images peut vous permettre de mieux vous positionner sur Google Images (qui permet la recherche d’images sur Google), et, par ricochet, d’accroütre le trafic sur votre site WordPress.

(*) Note

Avant d’entrer dans les dĂ©tails, petite piqĂ»re de rappel sur deux Ă©lĂ©ments que vous retrouverez tout au long de cet article. SEO signifie Search Engine Optimization (Optimisation pour les moteurs de recherche). Quand on parle de SEO pour vos images, on dĂ©signe donc leur optimisation pour les moteurs de recherche. Google Images est “un service proposĂ© depuis 2001 par le moteur de recherche Google pour permettre de trouver sur le web des images en rapport avec un sujet donnĂ©â€, comme le dĂ©taille Wikipedia.

A ce stade, vous devez peut-ĂȘtre vous demander comment est-il possible que des internautes vous trouvent plus facilement grĂące Ă  vos images, n’est-ce pas ?

Premier élément de réponse : la recherche universelle

Il s’agit des rĂ©sultats affichĂ©s par Google, sur une requĂȘte donnĂ©e, sous la forme de diffĂ©rentes sources : page web, actualitĂ©s, vidĂ©os, shopping, livres ou encore images.

La recherche universelle sur Google

GrĂące Ă  elle, il est donc possible de retrouver des images – les vĂŽtres – en premiĂšre page de Google, juste au-dessus des premiers rĂ©sultats naturels, et directement sous les yeux de vos visiteurs.

Une recherche d'images sur le moteur de Recherche Google

Au-delĂ  des rĂ©sultats relatifs aux pages web, les images peuvent donc vous permettre d’augmenter vos chances d’apparaĂźtre en premiĂšre page de Google.

Note

Petite astuce pour savoir s’il est possible de rĂ©fĂ©rencer vos images en premiĂšre page de Google, grĂące Ă  la recherche universelle. Tapez le mot-clĂ© qui vous intĂ©resse et regardez si des images apparaissent. Si ce n’est pas le cas, il est peut-ĂȘtre prĂ©fĂ©rable de rĂ©flĂ©chir Ă  un autre mot-clĂ©.

C’est trĂšs important, notamment si vous possĂ©dez un business basĂ© sur le visuel.

Prenons par exemple le cas d’un site-ecommerce. L’optimisation du rĂ©fĂ©rencement des images de vos produits peut vous aider Ă  bien vous positionner sur Google.

Vous multipliez vos chances d’augmenter vos ventes, encore plus depuis fĂ©vrier 2018.

A cette Ă©poque, Google a mis Ă  jour sa recherche d’images en supprimant le bouton View Image (Afficher l’image) des photos issues de sa recherche.

A la place, pour consulter l’image en question, Google vous redirige maintenant vers le site web qui l’hĂ©berge, Ă  condition de cliquer sur le bouton Consulter.

Le Wapuu du WordCamp Lille
Le Wapuu officiel du WordCamp Lille 2018. Pour le retrouver dans son contexte, il vous faudra Consulter le site web associé.

Du coup, la probabilitĂ© de recevoir plus de trafic s’accroĂźt.

Autre cas oĂč l’optimisation de vos images peut ĂȘtre trĂšs utile pour votre rĂ©fĂ©rencement WordPress : vous tenez un blog avec de nombreuses photos, comme un blog culinaire ou sur les voyages, par exemple.

Voilà pour la recherche universelle. Ensuite, vous allez voir tout au long de cet article qu’en travaillant le SEO de vos images, vous allez pouvoir :

Cela ne saute pas forcément aux yeux à premiÚre vue, mais ces éléments peuvent participer à un meilleur référencement sur Google.

Pourquoi ? Eh bien figurez-vous que grĂące Ă  son algorithme d’intelligence artificielle appelĂ© Rank Brain, Google est en mesure de comprendre la satisfaction utilisateur.

Cela signifie que plus un utilisateur apprĂ©cie une page, plus il y a de chances que Google amĂ©liore son positionnement sur son moteur de recherche (Ă©videmment, il prend aussi plein d’autres facteurs en compte, mais celui-ci devient de plus en plus important).

En d’autres termes, si un utilisateur se taille au bout de 5 secondes aprĂšs avoir dĂ©barquĂ© sur votre site parce qu’il est perdu, ou que vos contenus ne sont pas pertinents, Google le comprendra et pourra dĂ©cider de moins bien vous positionner.

Un arbitre brandit un carton rouge
Attention, M. l’arbitre Google peut avoir le carton rouge facile

Je prĂ©cise que je schĂ©matise Ă  l’extrĂȘme, car le processus est bien plus complexe. Mais cela vous permet de saisir le sens gĂ©nĂ©ral, je l’espĂšre.

Enfin, n’oublions pas un dernier point important. Si votre positionnement s’amĂ©liore, vous allez ĂȘtre en mesure d’attirer plus de visiteurs et de rĂ©aliser plus de conversions.

Par conversion, on entend une action spĂ©cifique rĂ©alisĂ©e par un visiteur sur votre site WordPress. Par exemple, cela peut ĂȘtre :

  • l’achat d’un produit
  • le tĂ©lĂ©chargement d’un document ou le remplissage d’un formulaire
  • l’inscription Ă  une newsletter etc.

Plus de trafic, plus de ventes, ou encore une meilleure expĂ©rience utilisateur : vous le voyez, optimiser le SEO de vos images peut vraiment ĂȘtre hyper-bĂ©nĂ©fique.

Sans plus attendre, passons Ă  la suite : la partie technique.

Vous allez découvrir 10 points-clés sur lesquels agir pour rendre vos images encore plus visibles sur Google.

PrĂȘt(e) ? C’est parti.

Note

Si le sujet du SEO vous intéresse, WPMarmite propose la formation Enfin visible grùce au référencement.

10 éléments à contrÎler pour un référencement optimal de vos images

Créez une excellente expérience utilisateur

Dans son guide sur les bonnes pratiques relatives aux images, Google prĂ©conise en premier lieu d’“optimiser l’expĂ©rience utilisateur”.

Pour rappel, l’expĂ©rience utilisateur (UX) “rĂ©fĂšre Ă  la qualitĂ© de l’expĂ©rience vĂ©cue par l’utilisateur dans des environnements numĂ©riques”.

Pour une UX au poil qui serve le référencement de vos images, Google recommande notamment :

  • D’utiliser des images en rapport avec votre contenu textuel. Par exemple, si vous parlez de croquettes pour chat, n’illustrez pas votre propos avec une tondeuse Ă  gazon. Et, bien Ă©videmment, le contenu de votre page doit ĂȘtre “instructif et de haute qualitĂ©â€, selon Google : ce critĂšre est pris en compte pour classer vos images.
  • D’optimiser leur emplacement. Google vous conseille notamment de “placer l’image la plus importante vers le haut de la page”. Elle aurait en effet plus de chances de se positionner correctement.
  • De possĂ©der un site responsive (adaptable sur ordinateur, tablette et smartphone). La firme de Mountain View prĂ©cise que “les internautes utilisent davantage Google Images sur leur mobile que sur leur ordinateur”. Pour savoir si votre site est responsive, vous pouvez utiliser l’outil maison de Google : le test d’optimisation mobile.
  • De faire usage d’images originales. Comprenez, des images prises ou conçues par vos soins et que l’on ne retrouve pas Ă  chaque coin de rue, c’est-Ă -dire sur la plupart des banques d’images. Google n’aime pas le duplicate content (contenu dupliquĂ©) pour vos textes. Disons que c’est sensiblement la mĂȘme chose pour les images. Il favorisera donc les images originales, pertinentes, et en rapport avec votre contenu. Si vous ne pouvez pas faire autrement qu’utiliser une banque d’images, on vous en a listĂ©es quelques-unes dans cet article. Pour sortir du lot, vous pouvez trĂšs bien vous servir d’un outil de crĂ©ation comme Canva, pour mettre au point des visuels sur-mesure.

Comme vous le voyez, apporter une attention particuliùre au contenu, à la navigation, ou encore à l’ergonomie de votre site reste important pour optimiser le SEO de vos images.

Travaillez le nom de vos images

En SEO, le nom de l’image doit ĂȘtre choisi avec soin.
Notamment parce que Google indique que “le nom de fichier peut Ă©galement nous donner des indices sur l’objet de l’image”.

Autrement dit, il est recommandé de le rendre explicite.

Tout Ă  l’heure, je vous ai parlĂ© de croquettes pour chat. Restons dans la thĂ©matique avec un exemple pour que vous compreniez bien.

Imaginons que vous devez donner un nom à une photo représentant un paquet de croquettes.

Lequel vous semble le plus pertinent :

  • IMG00023.jpg
  • OU croquettes-pour-chat.jpg

Si vous optez pour la proposition n°2, vous visez juste. Elle va notamment aider un moteur de recherche à comprendre quel est le sujet de votre image.

Un chaton met la patte Ă  la bouche

Il n’y a pas de rĂšgle prĂ©cise sur le sujet, mais je vous conseille d’opter pour des noms de fichiers courts et descriptifs intĂ©grant le mot-clĂ© de votre choix, sans verser dans le keyword stuffing (accumulation de mots-clĂ©s).

PrĂ©fĂ©rez le tiret du 6 Ă  l’underscore (tiret du 8), et Ă©vitez les majuscules et les accents.

Enfin, je vous conseille de prendre l’habitude de nommer vos images avant de les intĂ©grer sur WordPress.

Au moins tout est propre, et vous n’avez pas à trifouiller au dernier moment.

Optimisez l’attribut alt pour le SEO de vos images

Pour la troisiĂšme Ă©tape de notre checkliste, faisons une halte sur la balise alt de vos images sur WordPress.

Aussi appelĂ© texte alternatif, ce texte sert Ă  dĂ©crire une image et apparaĂźtra Ă  l’écran lorsque cette derniĂšre ne pourra pas ĂȘtre affichĂ©e Ă  vos visiteurs (ex : votre site n’arrive pas Ă  se charger ou l’image est introuvable).

Il prĂ©sente deux intĂ©rĂȘts majeurs :

  • AmĂ©liorer “l’accessibilitĂ© pour les personnes qui ne peuvent pas voir les images sur les pages Web, y compris lorsqu’elles utilisent des lecteurs d’Ă©cran ou lorsque leur connexion est lente”, comme le dĂ©taille Google. Cet attribut est lu oralement par le le lecteur d’écran pour des personnes malvoyantes.
  • Cela aide Google Ă  “dĂ©terminer l’objet de l’image”.

Techniquement, l’attribut alt correspond à une partie de code HTML. Regardez :

Le code HTML d'une balise alt

Mais ne vous inquiétez pas, pas besoin de mettre les mains dans le cambouis pour le remplir.

WordPress vous propose ce champ sur chaque photo présente dans votre BibliothÚque de médias (et automatiquement lorsque vous allez ajouter une nouvelle illustration).

L'encart de texte alternatif sur WordPress

Pensez Ă  le remplir pour chacune de vos photos, c’est important, mĂȘme si WordPress vous indique de laisser ce champ vide si “l’image est purement dĂ©corative”.

Désormais, voyons voir comment en rédiger un de façon propre et optimisée.

Ici, l’idĂ©e consiste Ă  dĂ©crire votre image de façon informative en quelques mots, en incluant votre mot-clĂ© de maniĂšre appropriĂ©e (sans sur-optimisation).

Un chat allongé sur un frigo

Par exemple, pour cette photo, je mettrais : “Un chat allongĂ© sur un frigo”.

Concernant la longueur de cette balise alt, il n’y a pas vraiment de rĂšgle Ă©tablie.

Privilégiez un format court (quelques mots doivent suffire) et évitez de rédiger un paragraphe.

Enfin, si vous voulez voir Ă  quoi ressemble un attribut alt sur-optimisĂ©, voyez l’exemple mis en avant par Google :

Un exemple d'attribut alt sur-optimisé

Vous avez compris : ne reproduisez surtout pas ça chez vous.

Note

Concernant l’optimisation de vos noms d’images et de vos textes alternatifs, vous pouvez aussi jeter un oeil au plugin premium Image SEO. Ce dernier va s’occuper de les rĂ©Ă©crire automatiquement « grĂące Ă  l’intelligence artificielle et au machine learning ».

Et quid de la balise title ?

On a parfois tendance à confondre l’attribut alt et l’attribut title. Pourtant, les deux n’ont rien à voir.

L’attribut title correspond au titre de l’image, c’est-Ă -dire celui qui sera affichĂ© par certains navigateurs lors du survol de l’image (rien Ă  voir avec le nom du fichier, donc).

Il prĂ©sente un intĂ©rĂȘt certain en termes d’accessibilitĂ© mais soulĂšve pas mal d’opinions contraires.

Il est possible de l’ajouter sur WordPress, mais je ne vous conseille pas forcĂ©ment de le faire. Quoi qu’il en soit, son titre devra ĂȘtre court et diffĂ©rent de celui proposĂ© dans votre balise alt.

L'encart pour renseigner un attribut Title sur WordPress

Vous retrouverez le champ de l’attribut Title en cliquant sur Modifier lorsque vous sĂ©lectionnez une photo Ă  l’intĂ©rieur d’un article ou d’une page, par exemple.

Modifier l'attribut Title

Le W3, l’organisme qui Ă©dite les rĂšgles du web, explique par exemple que de nombreux robots des moteurs de recherche (ceux qui scannent votre contenu pour le rĂ©fĂ©rencer) ne sont pas en mesure de toujours suivre les spĂ©cifications de cet attribut.

Par exemple, faire apparaĂźtre le titre de l’image lors du survol de la souris ne sera pas possible si l’internaute utilise uniquement un clavier ou un Ă©cran tactile.

Note

Google prĂ©cise aussi que les lĂ©gendes peuvent l’aider Ă  “dĂ©terminer l’objet des images qui y figurent”. Une lĂ©gende reprĂ©sente le texte affichĂ© sous vos images. N’en profitez pas forcĂ©ment pour mettre des lĂ©gendes un peu partout dans l’espoir de faire les yeux doux au moteur de recherche. Encore une fois, restez dans la logique suivante : si cela est pertinent pour l’utilisateur, faites-le. Sinon, abstenez-vous.

Choisissez le bon format de fichier

“Google Images accepte les images aux formats BMP, GIF, JPEG, PNG, WebP, SVG ainsi que les images intĂ©grĂ©es”, dĂ©taille le guide sur les bonnes pratiques relatives aux images Google.

Ça, c’est pour le topo gĂ©nĂ©ral. En pratique, vous allez la trĂšs grande majoritĂ© du temps utiliser l’un des 3 formats universels suivants : le JPEG (ou JPG), le PNG et le GIF.

De façon globale, on serait plutĂŽt tentĂ© d’utiliser presque exclusivement le JPG, car il s’agit du plus lĂ©ger des 3 (ce critĂšre revĂȘt une importance cruciale, comme vous le verrez dans le point n°5).

Sauf que cela n’est pas aussi simple.

Pour vous aider Ă  choisir le meilleur format, retenez que :

  • Le JPEG est conçu pour les photos et images dotĂ©es de milliers de couleurs ou de nuances de gris. PrĂ©fĂ©rez ce format pour toutes les images oĂč les nuances de couleur ont leur importance. En rĂšgle gĂ©nĂ©rale, cela concerne la plupart des photos, les captures d’écrans etc. Par contre, il ne gĂšre pas la transparence.
  • Le PNG s’utilise notamment pour les schĂ©mas, images simples, logos ou images dotĂ©es de transparence. Utilisez-le pour conserver de petits dĂ©tails avec une rĂ©solution Ă©levĂ©e.
  • Le GIF concerne les images animĂ©es. Attention au poids des fichiers si vous utilisez les GIFs, ils peuvent ĂȘtre trĂšs lourds. Pensez Ă  le rĂ©duire grĂące Ă  l’outil Ezgif.

Si vous avez encore un doute, Google propose un schĂ©ma assez parlant dans son Guide de l’optimisation de l’image :

Schéma des fichiers d'images

Note

Google vous incite aussi Ă  utiliser son format d’image maison, le WebP. Ce format d’image matricielle permet de compresser encore plus vos images qu’en JPG et PNG, sans perte de qualitĂ©. Pour le poids de vos photos, c’est super, sauf que WordPress ne prend pas encore en charge ce type de fichier nativement. Si cela vous intĂ©resse, vous pouvez contourner ce problĂšme en utilisant l’extension WebP Express. Par contre, le format WebP n’est pas encore supportĂ© par tous les navigateurs,comme Safari par exemple.

RĂ©duisez la taille et le poids de vos images

Parmi les quelques 200 critĂšres pour positionner une page, Google prend notamment en compte son temps de chargement.

En d’autres termes, plus ce temps est long, moins votre page aura de chances de bien se positionner (je simplifie ici car pleins d’autres aspects entrent en compte).

Et s’il y a bien un truc qui peut plomber la vitesse de votre site, ce sont vos images.

Rendez-vous compte : on estime qu’elles reprĂ©sentent plus de 50% du temps de chargement de votre site !

Comme indiquĂ© dans l’article Comment optimiser un site WordPress sans se ruiner, une page ne doit pas, en rĂšgle gĂ©nĂ©rale, dĂ©passer 2MO.

Avec seulement quelques photos trop lourdes (une seule peut mĂȘme suffire), il peut dĂ©jĂ  ĂȘtre trĂšs simple de franchir ce palier.

Alors dans le but de soigner l’expĂ©rience utilisateur et le SEO de vos images – rappelez-vous de notre premier point -, vous allez donc devoir les mettre au rĂ©gime afin de ne pas faire fuir vos visiteurs et de ne pas augmenter votre taux de rebond.

L’idĂ©e ? RĂ©duire leur poids sans trop perdre en qualitĂ©, en conservant des images nettes.

Pour cela, il existe plusieurs options.

La premiĂšre ? Photoshop. Le logiciel premium de la suite d’Adobe comporte une fonction trĂšs pratique appelĂ©e Enregistrer pour le web.

Enregistrer pour le web sur Photoshop

Si vous préférez un outil gratuit, vous pouvez vous tourner vers Gimp.

La solution n°2 ? Utiliser une extension dédiée. Il en existe plusieurs sur le marché comme :

Sur WPMarmite, Alex utilise Imagify. Cet outil va compresser toutes vos photos sans perte de qualité.

Optimisation d'une image sur Imagify
Un exemple d’image optimisĂ©e par Imagify sans perte de qualitĂ© (capture issue de leur site officiel).

TroisiÚme possibilité : les outils en ligne. Je pourrais vous citer :

Maintenant, vous devez peut-ĂȘtre vous poser la question suivante : quelle est la taille optimale d’une image SEO ?

En fait, disons qu’elle ne devrait pas ĂȘtre plus grande que la largeur de votre page. Et cette largeur diffĂšre en fonction de votre site.
Pour la connaütre, vous pouvez consulter le code de votre page grñce à l’inspecteur de Chrome, par exemple. Pour l’activer, faites un clic droit sur la page web de votre choix, puis choisissez Inspecter.

Largeur du contenu sur l'inspecteur Chrome

Vous pouvez constater ci-dessus (voir le petit encadré rouge) que la largeur maximale du contenu est de 860 pixels.

Cela signifie que quelle que soit la taille de votre Ă©cran, les images s’afficheront toujours Ă  860 pixels de large au maximum. Inutile, donc, d’avoir des photos plus grandes.

Pour terminer cette partie, j’aimerais attirer votre attention sur le temps de chargement.

Comme indiquĂ© un peu plus haut, votre site se doit d’ĂȘtre rapide et performant pour favoriser le SEO de vos images.

Dans cette optique, l’extension de cache Premium WP Rocket dispose de deux fonctionnalitĂ©s intĂ©ressantes pour propulser votre site dans les Ă©toiles :

  • Le Lazy loading : le plugin va charger vos images uniquement lorsqu’elles apparaĂźtront dans la fenĂȘtre de l’internaute.
Le Lazy load sur WP Rocket
  • La mise en cache du navigateur et du serveur : cela permet d’accĂ©lĂ©rer votre site.

Désactivez les pages associées aux images

WordPress a son caractĂšre et, parfois, il se comporte comme un petit cachottier.

Lorsque vous ajoutez une image, notre CMS favori va, par dĂ©faut, la lier au fichier mĂ©dia, c’est-Ă -dire vers une page comportant uniquement l’image (comme ceci http://monsite.com/wp-content/uploads/2014/07/nom_de_mon_image.jpg).

Par dĂ©faut, ce lien s’ouvre dans la mĂȘme fenĂȘtre. De fait, lorsque vos visiteurs vont cliquer sur l’image, ils se retrouveront sur une page avec seulement cette image, et vous risquez de les faire partir.

Pour votre rĂ©fĂ©rencement naturel, ce n’est pas vraiment tip-top.

Sans compter que Google aura tendance à assimiler cette page à du contenu peu pertinent (eh oui, elle ne contient pas de texte, on lui fait pas à l’envers à notre moteur de recherche).

Du coup, il va falloir vous retrousser les manches et solutionner tout ça.
PremiĂšre possibilitĂ© : traiter le problĂšme au cas par cas. Quand vous insĂ©rez une image dans un article ou une page, vĂ©rifier qu’Aucun soit bien sĂ©lectionnĂ© dans l’encart concernant vos RĂ©glages de lien.

RĂ©glages de lien

Maintenant, vos visiteurs ne pourront plus cliquer sur vos images et ils resteront sur la page Ă  lire votre article.

De mĂȘme, ne sĂ©lectionnez pas Page du fichier joint. Cela affichera votre image sur une page de votre site et n’apportera rien de plus Ă  vos visiteurs ni aux moteurs de recherche.

Seconde possibilitĂ© pour Ă©radiquer le problĂšme de façon dĂ©finitive : Yoast SEO. Le cĂ©lĂšbre plugin de rĂ©fĂ©rencement dispose d’une option pour “dĂ©sactiver” les pages associĂ©es.

Rendez-vous dans l’onglet MĂ©dias du menu RĂ©glages SEO et vĂ©rifiez que Oui soit bien cochĂ©.

Réglages des médias sur Yoast SEO

Utilisez des images responsive pour optimiser le SEO de vos images

Vous ĂȘtes toujours lĂ  ? J’espĂšre que vous vous rappelez de notre passage sur le responsive, au dĂ©but de cet article.

Comme je vous l’ai expliquĂ©, l’adaptation sur n’importe quel type de support constitue une obligation pour tout site web qui se respecte.

Et cela concerne aussi les images, qui doivent ĂȘtre responsive. Ce n’est pas moi qui l’affirme, mais Google.

Si vous voulez soigner le SEO de vos images, autant le caresser dans le sens du poil (oui, on reste pas mal dans le champ lexical du chat, vous avez remarqué ?).

Pour rendre une image responsive, il existe un attribut HTML appelĂ© srcset. Essayez de le prononcer Ă  voix haute, vous allez voir, c’est pas tout simple.

Plus sĂ©rieusement, ce fameux srcset va indiquer Ă  votre navigateur favori de charger telle ou telle version de votre image en fonction de la rĂ©solution de votre l’écran.

Grùce à cela, vous allez singuliÚrement améliorer le temps de chargement de votre page et économiser de la bande passante sur votre serveur. Pas mal.

Maintenant, reste un problĂšme : oĂč et comment intĂ©grer ce fichu code, surtout si vous n’avez jamais mis les mains dans le cambouis.

RĂ©ponse : nulle part. WordPress vous fait une fleur et s’en charge seul, comme un grand, depuis sa version 4.4. Vous n’avez donc rien Ă  faire.

Note

Au moment d’écrire ses lignes, WordPress tourne sous la version 5.2. Pour des raisons de sĂ©curitĂ©, notamment, je vous invite Ă  mettre Ă  jour votre site vers la derniĂšre version de WordPress, si ce n’est pas dĂ©jĂ  fait. Pour la marche Ă  suivre, suivez le guide.

Voici à quoi ressemble ce fameux attribut srcset dans le code d’une image HTML :

L'attribut secret dans le code HTML d'une image

Juste pour information, la lettre w est une unité qui permet de déterminer la largeur de la photo en pixels.

Vous voyez sur la capture ci-dessus qu’il y en a plusieurs (ex : 817w ; 350w ; 610w) afin que la photo s’adapte Ă  la taille de l’écran.

Mettez en place un sitemap pour les images

Un sitemap est un fichier qui liste toutes les URLs (adresses) de votre site web.

Google vous invite Ă  en utiliser un spĂ©cifiquement pour les images, notamment parce que cela va lui fournir “des informations supplĂ©mentaires sur celles-ci” et lui indiquer lesquelles parcourir et indexer.

De plus, cela lui permettra “d’identifier des images susceptibles de ne pas ĂȘtre prises en compte autrement (par exemple les images accessibles par le biais de code JavaScript).”

Au final, il aura plus de cartes en main pour afficher vos belles photos dans ses résultats de recherches.

Une femme mélange des cartes

Tout ça, c’est trĂšs bien. Mais vous devez vous demander comment crĂ©er un sitemap pour vos images en SEO ?

Si vous utilisez Yoast, c’est du tout cuit !

L’extension va automatiquement ajouter les informations associĂ©es Ă  votre image dans votre sitemap XML. A condition d’en avoir un d’activĂ©.

Si ce n’est pas encore le cas, et pour bien saisir toutes les subtilitĂ©s du sitemap, je vous invite Ă  consulter l’article que nous lui avons dĂ©diĂ© sur le blog de WPMarmite.

Ajoutez des données structurées

Poursuivons avec les donnĂ©es structurĂ©es. Il s’agit d’une mĂ©thode de balisage HTML qui aide Google Ă  comprendre de quel type est votre contenu.

Vous les connaissez peut-ĂȘtre sous le nom de Schema.org.

Grùce à elles, vos images peuvent apparaßtre sous forme de résultats enrichis sur Google Images.

Par exemple, des badges recette, produit et vidéo peuvent apparaßtre sur les images miniatures lors de la navigation sur mobile :

Un exemple du badge Recette sur Google Images
Un exemple du badge Recette sur Google Images

Comme vous pouvez le constater, le badge Recette situĂ© en bas Ă  gauche de la photo m’indique que des ingrĂ©dients sont prĂ©sents sur ce rĂ©sultat de recherche.

En cliquant sur la photo, j’ai effectivement accĂšs Ă  une recette de pizza thon-poulet-chorizo (sacrĂ© mĂ©lange, mais c’est sĂ»rement dĂ©licieux).

Une recette de pizza thon-poulet-chorizo

Maintenant, reste le cÎté technique : comment intégrer ce marquage sur votre site ?

Google les accepte pour les 3 éléments ci-dessous, et vous indique comment procéder :

AprĂšs, pour ĂȘtre franc, si vous dĂ©butez, vous risquez d’ĂȘtre un peu perdu au milieu d’appellations un peu barbares comme JSON-LD ou RDFA.

Une autre solution consiste Ă  utiliser une extension, comme :

Activez l’Open Graph

Pour terminer, je vous propose d’évoquer l’Open Graph. Rien Ă  voir avec le dernier tournoi de tennis Ă  la mode.

Ici, on parle d’un protocole crĂ©Ă© par Facebook qui vous permet de dĂ©finir quelle image les rĂ©seaux sociaux vont afficher quand des utilisateurs voudront partager des contenus issus de votre site WordPress.

GrĂące Ă  cela, vous avez la main sur ce qui va ĂȘtre partagĂ© et pouvez mettre en avant le clichĂ© qui vous semble plus pertinent, afin qu’il gĂ©nĂšre le maximum de clics.

Et qui dit plus de clics, dit plus de trafic, dit potentiellement un bénéfice pour votre stratégie SEO. Vous suivez ?

Tout ça c’est bien beau, mais comment ça marche ? Il vous suffit simplement d’insĂ©rer , des balises toutes simples et archi-comprĂ©hensibles dans le code de vos pages.

Par exemple, amusez-vous avec og:title, og:type, ou encore og:image.

Facile, non ? Bon, j’arrĂȘte la torture et passe Ă  la solution simple.

Pour ajouter des donnĂ©es Open Graph, le plus pratique consiste Ă  utiliser l’extension Yoast SEO (oui, encore elle).

Pour cela, direction l’onglet RĂ©seaux sociaux du menu du plugin.

L'onglet RĂ©seaux sociaux de Yoast

Pour le paramĂ©trage, Alex s’est dĂ©jĂ  penchĂ© sur le sujet dans l’article consacrĂ© Ă  Yoast SEO. Je vous invite Ă  vous y rĂ©fĂ©rer pour ĂȘtre au point.

Note

Dans la mĂȘme veine que l’Open Graph, sachez que vous pouvez aussi paramĂ©trer des Twitter Cards. Elles permettent de joindre du contenu additionnel Ă  votre tweet initial (photo, vidĂ©o, information sur un produit ou service, etc.) afin de vous aider Ă  gĂ©nĂ©rer plus de trafic sur votre site web. Vous pouvez aussi les configurer grĂące Ă  Yoast SEO.

Comment vérifier le trafic de vos images ?

Une fois toutes ces optimisations mises en place, il peut-ĂȘtre intĂ©ressant de savoir l’impact que cela a pu gĂ©nĂ©rer sur votre trafic.

Aprùs tout, c’est l’un des objectifs, non ?

Pour ce faire, rendez-vous sur la Google Search Console, le couteau-suisse de Google.

Cet outil gratuit vous permet de gérer vos sites et de suivre votre référencement.

Le prĂ©alable est de possĂ©der un compte Search Console, que vous pouvez crĂ©er si ce n’est pas le cas Ă  cette adresse.

Une fois sur la page d’accueil du site de votre choix, cliquez sur le lien Ouvrir le rapport de l’encart Performances.

Aperçu des performances de vos images sur la Search Console

Sur la page suivante, vous avez accÚs à un graphique avec 4 éléments :

  • Le nombre total de clics.
  • Le nombre total d’impressions (le nombre de liens vers votre site affichĂ©s sur Google).
  • Le CTR moyen (Click Through Rate, soit le taux de clic moyen).
  • La position moyenne (votre position moyenne sur Google).

Pensez Ă  choisir Image dans le type de recherche, en haut, Ă  gauche :

Statistiques images Google Search Console
Pour ce site, y’a du boulot Ă  faire 😉

Sous ce graphique, vous retrouverez un tableau vous présentant notamment :

  • RequĂȘtes : il s’agit des mots-clĂ©s que les internautes ont tapĂ© pour tomber sur vos images.
  • Pages : vous retrouvez ici les pages qui ont gĂ©nĂ©rĂ© le plus de clics et d’impressions pour vos images.
  • Pays : dĂ©signe les pays oĂč ont Ă©tĂ© consultĂ©es vos images.
  • Appareils : prĂ©sente le nombre de clics et d’impressions sur ordinateur, tablette et smartphone.

GrĂące Ă  ces donnĂ©es, vous allez ĂȘtre en mesure de rĂ©ajuster votre stratĂ©gie de rĂ©fĂ©rencement de vos images.

PrĂȘt(e) Ă  booster le SEO de vos images ?

En appliquant les conseils distillĂ©s tout au long de cet article, vous ĂȘtes dĂ©sormais en mesure d’optimiser le SEO de vos images.

N’hĂ©sitez pas Ă  utiliser cet article comme un mĂ©mento, une sorte de checkliste pour vĂ©rifier que vous ĂȘtes bien dans les clous lorsque vous ajoutez des illustrations sur votre site WordPress.

Et n’oubliez d’intĂ©grer cette pratique Ă  votre stratĂ©gie SEO globale, surtout si vous disposez d’un business qui met en avant les photos.

Avec un minimum d’efforts et de la rigueur, vous devriez rĂ©colter les fruits de votre travail au cours des prochaines semaines.

Je vous laisse dĂ©sormais la parole, votre avis m’intĂ©resse.

Sur quoi allez-vous travailler en premier ? Avez-vous d’autres astuces, non Ă©voquĂ©es ici, Ă  partager aux lecteurs de WPMarmite ?

Faites-le moi savoir en laissant un commentaire ci-dessous.