Référencement d’images : 12 conseils pratiques pour plus de trafic organique
Certains pourraient même affirmer qu’avec les récents progrès de Google en matière d’apprentissage automatique, les balises alt n’ont plus d’importance. Par exemple, voici ce qui se passe lorsque vous téléchargez la photo d’un chat dans l’API Vision de Google Cloud, leur outil d’identification d’images par apprentissage automatique :
Google peut dire que c’est la photo d’un chat avec une précision quasi parfaite. C’est impressionnant.
REMARQUE: Je me suis assuré de supprimer toutes les métadonnées de cette image. Vous pouvez également voir que le nom de fichier IMG_0697_2.jpg est peu explicite.
Alors quel est donc l’intérêt d’ajouter des balises alt si Google comprend le contenu des images ? Le référencement naturel des images est-il mort ? Pas du tout.
Dans cet article, je vais vous présenter 12 conseils pratiques afin d’optimiser les images pour augmenter le trafic organique de votre site web:
Besoin d’aide pour générer du traffic naturel de qualité ?
Atteindre les premières positions sur Google
1. SEO images : Nommez vos images de manière appropriée
Voici ce que dit Google à propos des noms de fichiers d’images :
[…] le nom de fichier peut donner à Google des indices sur le sujet de l’image.
Par exemple: mon-nouveau-chaton-noir.jpg est préférable à IMG00023.JPG.
La plupart des gens font ça, car c’est parce que Google donne ce même conseil depuis des années.
Preuve que l’avis de Google en la matière est resté constant depuis 2013, via The Wayback Machine.
Mais une fois encore, compte tenu des récentes avancées de Google en matière d’apprentissage automatique et de sa nouvelle capacité à reconnaître les images, quelle importance cela revêt-il vraiment ?
C’est une bonne question. Je suis conscient que l’exemple du chat était assez impressionnant. Alors essayons une autre image.
Google est sûr à 91% que c’est du fromage mais il a tort. C’est du beurre.
Je suis le premier à admettre que le beurre ressemble au fromage, mais le problème reste entier : Google n’est pas parfait et vous devez faire tout ce qui est en votre pouvoir pour l’aider à comprendre vos images.
Cela ne veut pas dire qu’il faut faire du bourrage de mots-clés. Faites en sorte que vos noms de fichiers soient descriptifs et simples.
Bon : chien.jpg
Mauvais : chien-chiot-chien-pupilles-chiot.jpg
Renommer les images pour les rendre plus descriptives ne demande pas beaucoup d’efforts. Cela vaut donc la peine de le faire.
2. Alt image SEO : Utilisez un texte alt et des légendes descriptives
Le texte alt (texte alternatif) décrit une image. C’est ce que le navigateur affiche pour les utilisateurs. Les navigateurs affichent également le texte alternatif s’il y a un problème de rendu des images.
Voici la syntaxe HTML :
<img src="/puppy.jpg" alt="Chiot dalmatien jouant à la balle"/>
Cet exemple provient directement des directives officielles de Google. Il est utilisé pour montrer à quoi ressemble une balise alt bien rédigée. Voici leurs conseils généraux pour les rédiger :
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. […] Lorsque vous choisissez un texte alternatif, concentrez-vous sur la création d’un contenu utile, 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 les attributs alt avec des mots clés (keyword stuffing), car cela entraîne une expérience négative pour l’utilisateur et peut faire en sorte que votre site soit considéré comme du spam.
Matt Cutts donne des conseils tout aussi judicieux concernant le texte alternatif dans cette vidéo ancienne (en anglais), mais toujours pertinente :
Cependant, voici un raccourci qui fonctionne presque toujours parfaitement – essayez de terminez cette phrase :
« Ceci est une image/une capture d’écran/une photographie/un dessin de __________. »
Supprimez toutes les conjonctions ou liaisons (par exemple, “ceci est”) de la phrase obtenue et utilisez la dernière partie comme texte alternatif. Voici quelques exemples :
« Ceci est une photographie d’un cheesecake au chocolat. »:
<img src="/cheesecake-chocolat.jpg" alt="Cheesecake au chocolat"/>
« C’est un dessin de mon chat, Mark, qui joue avec ses jouets. »:
<img src="/mark-mon-chat.jpg" alt="Mon chat, Mark, jouant avec ses jouets"/>
Vous pouvez vous écarter légèrement de cette formule pour rédiger le texte alt des images de produits. Dans ce cas, il peut être utile d’ajouter le numéro de produit ou de série, comme suit :
<img src="/tendeur-batterie.jpg" alt="Tendeur de batterie (022-0186G-DL-WH)"/>
Google ne dispose d’aucune directive officielle indiquant que vous devez procéder ainsi. Mais c’est logique car Google comprend clairement les relations entre les noms de produits et les numéros de série/produits. Vous en voulez la preuve ? Jetez un coup d’œil aux recherches connexes pour cette requête :
Google sait quel produit nous recherchons sur la base d’une recherche portant uniquement sur le numéro du produit. L’intégration de cette information dans votre texte alt peut donc aider Google à comprendre qu’il s’agit en fait de l’image d’un produit.
Et n’oubliez pas les légendes. Elles sont également importantes.
Voici ce que dit Google à ce sujet :
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 à proximité d’un texte pertinent et sur des pages en rapport avec le sujet de l’image.
3. Image SEO : Choisissez le meilleur type de fichier
La plupart des images sur le Web sont de l’un des trois types de fichiers suivants : JPEG, PNG et GIF.
Chacun d’entre eux utilise une méthode de compression différente. Cela signifie que la taille des fichiers entre ces trois types de fichiers peut varier considérablement. C’est important et voici pourquoi c’est important:
Les images sont souvent celles qui contribuent le plus à la taille globale des pages, ce qui peut rendre leur chargement lent et coûteux.
Le temps de chargement des pages est crucial pour le référencement naturel. Google a confirmé qu’il s’agit d’un facteur de classement, tant sur les ordinateurs de bureau que sur les mobiles. Votre tâche consiste donc à choisir le type de fichier le plus approprié pour chaque image, c’est-à-dire celui qui offre la meilleure compression avec la moindre réduction de la qualité.
En gardant cela à l’esprit, voici la même image en JPEG, PNG et GIF :
Vous pouvez voir que l’image JPEG est clairement gagnante. Elle a la plus petite taille de fichier, et il n’y a pas de différence notable en termes de qualité d’image entre cette image et les deux autres. Le format JPEG est-il toujours le bon choix ? Pas toujours.
En règle générale, les JPEG sont le meilleur format pour les photographies, tandis que les PNG conviennent mieux aux dessins au trait, au texte, etc. Les GIF sont les meilleurs pour les images animées. Lisez ceci (Anglais) pour en savoir plus sur les différences techniques entre ces trois formats.
La plupart des applications professionnelles d’édition d’images (par exemple, Photoshop) vous offrent la possibilité d’enregistrer une image au format JPEG, PNG ou GIF. Vous pouvez également les utiliser pour convertir une image d’un format de fichier à un autre. Vous n’avez pas de logiciel d’édition d’images professionnel ? Essayez cet outil gratuit.
Pour les captures d’écran, voici quelques applications qui vous permettent d’exporter dans plusieurs formats :
NOTE: Un nouveau format d’image fait également son apparition : WebP. Il promet une compression supérieure à celle du JPEG et du PNG. Cependant, j’ai décidé de ne pas en parler dans cet article car il n’est actuellement pris en charge que par Chrome et Opera. Vous pouvez en savoir plus sur WebP.
4. Taille image : Redimensionnez vos images en fonction des dimensions de votre site.
Voici à quoi ressemble le blog Aurone sur mon écran de 27 pouces :
Vous avez remarqué qu’il y a beaucoup d’espace blanc de chaque côté de ce contenu ? C’est parce que la largeur maximale du contenu du blog est de 720px. En d’autres termes, quelle que soit la taille de votre écran, les images ne sont jamais affichées à une largeur supérieure à 720px.
Plus le nombre de pixels qui composent votre image est élevé, plus la taille du fichier sera importante.
Le navigateur redimensionnera les images d’une largeur supérieure à 720px pour les adapter à l’écran (du moins avec les sites Web Responsive bien codés). Mais, chose importante, le navigateur doit toujours charger l’image en taille réelle. En d’autres termes, si nous devions télécharger une image de 6000px de large, le navigateur devrait toujours charger le fichier image entier même si l’image s’affiche à 720px. ça va être lent !
La solution consiste à redimensionner et à télécharger les images dans la largeur maximale dont vous avez besoin. Sachez que cette largeur peut ne pas être de 720px. Cela dépend de la conception générale de votre site Web. La première étape consiste à le déterminer. Vous pouvez le faire en fouillant dans votre CSS.
ATTENTION: Soyez vigilent à cela, surtout si vous utilisez un design responsive. Parfois, la largeur de votre site Web peut être plus élevée sur les petits écrans que sur les grands.
Vous pouvez ensuite utiliser cet outil pour redimensionner vos images par lots.
Seule la largeur compte, alors téléchargez vos images en masse et utilisez l’option « largeur maximale » pour ajuster uniquement la largeur.
Vous devez télécharger vos JPEG et PNG en deux lots distincts. Sinon, l’outil convertira toutes les images en un type de fichier identique. Vous pouvez choisir entre JPEG et PNG dans l’outil lui-même.
Utilisez l’option appropriée pour le lot d’images que vous optimisez.
Voici deux raisons pour lesquelles cet outil est formidable :
- Redimensionnement selon la largeur maximale : Disons que la largeur maximale de votre site Web est de 700px. Vous avez un certain nombre d’images qui doivent être redimensionnées. Certaines sont plus larges que 700px, d’autres sont plus étroites que 700px. Vous ne voudrez donc pas redimensionner (agrandir) les images les plus étroites à 700px, car cela diminuerait la qualité de l’image. Cet outil permet de conserver ces images à leur taille originale. Il ne redimensionne que celles qui sont trop larges.
- Conserve les noms de fichiers intacts : Vous avez passé des heures à nommer vos images pour le référencement naturel. Vous les redimensionnez et téléchargez les versions redimensionnées. Vous ouvrez le fichier .zip pour trouver image1.png, image2.png. (Vous comprendrez cette frustration si vous avez déjà téléchargé des images à partir de Google Docs). Cet outil conserve les noms de fichiers intacts, ce qui vous évite de devoir les renommer après le redimensionnement.
5. Optimiser les images : Réduire le poids du fichier de vos images
Jetez un coup d’œil à ces deux images :
Les deux sont des images JPEG. Il y a peu de différence notable de qualité entre les deux, mais la première image est 58% plus petite que la seconde (31kb contre 73kb).
Google propose une documentation très complète sur l’optimisation des images pour le web.
Le point essentiel à retenir en ce qui concerne la taille des fichiers est le suivant :
Pour obtenir de meilleurs résultats, essayez différents paramètres de qualité pour vos images, et n’ayez pas peur de réduire la qualité.
Les résultats visuels sont souvent très bons et les économies de taille de fichier peuvent être très importantes.
Google recommande trois outils open-source pour vous aider dans cette tâche : Guetzli, MozJPEG (par Mozilla) et pngquant. Vous pouvez lire leurs directives pour l’utilisation de ces outils ici. Toutefois, sachez qu’il s’agit d’outils en ligne de commande. Si vous n’êtes pas à l’aise avec ces outils, Google vous recommande d’utiliser ImageOptim, un outil gratuit pour Mac. (Vous trouverez des alternatives pour Linux et Windows ici).
Il suffit de déposer vos images, et elles seront compressées.
Vous pouvez modifier le niveau de compression dans les paramètres et même activer la compression avec perte.
Il supprime également les données EXIF par défaut. Cela permet de réduire davantage la taille du fichier, mais généralement pas de beaucoup. Vous pouvez utiliser cet outil Web gratuit (officiellement recommandé par Google) pour supprimer les données EXIF si vous ne souhaitez pas utiliser ImageOptim.
CONSEIL: Google a déclaré, dans cette video, que les données EXIF des images pouvaient être un « facteur de classement » dans Google Images. Pour cette raison, c’est peut-être quelque chose que vous pouvez garder. Vous pouvez désactiver la suppression des données EXIF dans les paramètres d’ImageOptim. Notre verdict ? Les avantages potentiels de laisser les données EXIF intactes – lorsqu’on fait du référencement local – l’emportent probablement sur les inconvénients.
Quelle est la qualité des résultats de cet outil ? J’ai décidé de faire une petite expérience. J’ai pris un petit échantillon de 15 images, certaines en JPEG, d’autres en PNG. Je les ai toutes lancées dans cet outil (avec les paramètres par défaut) et j’ai fait de même pour quelques autres alternatives.
Voici comment ils se sont comportés en termes de réduction de la taille moyenne des fichiers :
- Imageoptim : 69% (JPEG). 40% (PNG)
- Shortpixel : 42% (JPEG). 59% (PNG)
- Kraken.io : 13% (JPEG). 63% (PNG).
- TinyPNG : 27% (JPEG). 65% (PNG).
- Optimizilla : 27% (JPEG). 60% (PNG)
- Imagify.io : 6% (JPEG). 1% (PNG)
- Compressor.io : 42% (JPEG). 58% (PNG)
Imageoptim (l’outil recommandé par Google) était de loin le meilleur pour les JPEG. Mais il était l’un des pires pour les PNG. Il convient toutefois de noter une mise en garde : ImageOptim propose par défaut une qualité de 70 % pour les PNG, mais vous pouvez descendre jusqu’à 40%.
En le faisant, la compression moyenne passe à 75,6 % pour les PNG. Cela fait de lui, de loin, le grand gagnant pour les JPG et les PNG.
Néanmoins, si l’on s’en tient aux résultats des paramètres par défaut ci-dessus, Shortpixel semble être le meilleur compresseur d’images à tous les niveaux.
C’est une bonne nouvelle pour les utilisateurs de WordPress, car il existe un Plugin ShortPixel pour WordPress. Il est gratuit jusqu’à 100 images par mois.
De plus, il vous donne la possibilité de compresser toutes les images que vous avez déjà sur votre site WordPress. Vous ne pouvez pas faire cela avec les autres outils de la liste.
6. SEO image : Créer un sitemaps d’images
Voici ce que dit Google à propos des sitemaps d’images :
Les images constituent une source importante d’informations sur le contenu de votre site. Vous pouvez donner à Google des détails supplémentaires sur vos images et fournir les URL des images que nous ne pourrions pas découvrir autrement qu’avec l’aide d’un sitemaps d’images.
Voiçi les balises que vous pouvez utiliser dans les sitemaps d’images :
Si vous utilisez WordPress et Yoast SEO, les images sont ajoutées automatiquement à votre sitemap. C’est même vrai pour les sites dont les pages » médias » sont réglées sur noindex. (Remarque : c’est désormais le paramètre par défaut de la dernière version de Yoast.) Toutefois, Yoast n’inclut que les balises <image:image> et <image:loc> requises. Si vous ajoutez des légendes à vos images dans WordPress, Yoast ne les ajoute pas.
Vous devrez les inclure vous-même, manuellement.
Point Intéressant:
La documentation de Google sur les sitemaps d’images est plutôt floue. Elle ne précise nulle part la syntaxe souhaitée pour la balise <image:geo_location>. Il n’est pas clair si une image de Sheffield, au Royaume-Uni, doit être étiquetée comme :
<image:geo_location>Sheffield, England</image:geo_location>
<image:geo_location>Sheffield, United Kingdom</image:geo_location>
Il en va de même pour <image:licence>. Google espère-t-il que vous établissiez un lien vers ces pages officielles de licence Creative Commons ? Ou préfère-t-il que vous établissiez un lien vers une page de licence sur votre site ?
Egalement, Google précise que :
Les sitemaps d’images peuvent contenir des URL d’autres domaines, contrairement aux sitemaps ordinaires, qui appliquent des restrictions inter-domaines. Cela permet aux webmasters d’utiliser des CDN (réseaux de diffusion de contenu) pour héberger des images. Nous vous encourageons à vérifier le nom de domaine du CDN dans Search Console afin que nous puissions vous informer de toute erreur de crawl que nous pourrions trouver.
C’est utile de le savoir si vous utilisez un CDN pour héberger vos images. Nous y reviendrons plus tard.
7. Format image : Utiliser des images vectorielles le cas échéant
Voici ce que dit Google à propos des graphiques vectoriels :
Les images vectorielles utilisent des lignes, des points et des polygones pour représenter une image. Ils conviennent parfaitement aux images constituées de formes géométriques simples (par exemple, les logos, le texte, les icônes, etc.) et donnent un affichage net à toutes les résolutions et à tous les zooms, ce qui en fait un format idéal pour les écrans haute résolution et les ressources qui doivent être affichées à différentes tailles.
De nombreux sites utilisent des graphiques vectoriels pour leurs logos et d’autres éléments simples sur le site.
Les SVG (Scalable Vector Graphics) sont peut-être le format vectoriel le plus populaire sur le Web. Ils ont été développés par le World Wide Web Consortium (W3C) et sont basés sur XML. En tant que tels, tous les navigateurs Web modernes les prennent en charge.
Quel que soit le navigateur, l’appareil ou la résolution d’écran dont vous disposez, les SVG auront un aspect limpide car ils ne pixellisent pas. Vous pouvez afficher un SVG sur un écran de la taille d’une planète, il ne perdra pas une pixel de qualité.
REMARQUE: Vous voulez savoir comment créer des SVG ? Lisez ceci. Vous pouvez également exporter des illustrations au format SVG à l’aide de la plupart des applications de conception graphique modernes telles qu’Adobe Illustrator.
Voici les suggestions de Google pour optimiser les SVG :
- Les fichiers SVG doivent être minifiés pour réduire leur taille.
- Les fichiers SVG doivent être compressés avec GZIP.
L’outil qu’ils recommandent pour réduire les fichiers SVG est svgo.
Vous n’êtes pas à l’aise avec une interface en ligne de commande ? Utilisez cette application Web ou cette application Mac pour faire la même chose. Toutes deux offrent une interface simple de type glisser-déposer pour réduire de tels fichiers. Je préfère l’application Web.
Cette capture d’écran résume tout ce que vous devez savoir sur les SVG. Vous pouvez voir que la taille originale du SVG était de 8.54kb. C’est incroyablement petit. La version minifiée (et gzippée) est encore plus petite avec seulement 3.56kb – une économie de 41.67%.
La compression Gzip est une fonction qui est activée au niveau du serveur. En d’autres termes, le SVG ci-dessus n’utilisera que 3,56 kb de bande passante si le serveur le permet – sinon, il utilisera 8,54 kb.
Utilisez cet outil pour vérifier si la compression gzip est activée sur votre serveur. Sinon vous pouvez suivre ces instructions pour l’activer si ce n’est pas le cas.
8. Utilisez des images responsives
Disons que vous téléchargez une image de 720px de large sur votre site.
Si une personne visite le site sur un appareil mobile avec un affichage beaucoup plus petit, par exemple 320px de large, son navigateur doit toujours charger l’image de 720px. Cette image sera parfaite. Mais il en va de même pour une image de 320 pixels de large.
Vous voyez le problème ? Le chargement de l’image de 720px est un gaspillage de bande passante et ne sert qu’à ralentir la vitesse de chargement de la page. Ce n’est pas bon pour le référencement naturel.
La solution consiste à utiliser la balise srcset.
Il s’agit d’un élément magique du code HTML qui indique au navigateur de charger différentes versions d’une image pour différentes résolutions d’écran.
Voici la syntaxe, suivie d’une explication :
<img src="/image.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w">
La première partie de la syntaxe est une balise <img> assez standard. Nous incluons ensuite des liens vers deux autres versions de la même image dans des tailles différentes – moyenne (1000px de large) et grande (2000px de large).
Je vais reprendre cette partie de l’explication presque mot pour mot de cet article, car il explique parfaitement ce qui se passe ici.
Immaginons que vous êtes sur un appareil dont la largeur d’écran est de 320px et qui est un affichage 1x (non rétina). Les images que vous avez sont small.jpg (500px de large), medium.jpg (1000px de large), et large.jpg (2000px de large).
Le navigateur va faire quelques calculs rapides :
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25OK, donc pour un écran 1x, 1,5625 est le plus proche de ce dont le navigateur a besoin. C’est un peu élevé, mais c’est la meilleure option par rapport aux autres qui sont beaucoup trop grandes.
Un autre navigateur visite maintenant le site. Il s’agit également d’un écran de 320px, mais d’un écran rétina (2x). Ce navigateur fait le même calcul, mais ensuite, il fait :
- OK, donc pour un écran 2x, je vais éliminer l’image 1.5625 parce qu’elle est trop petite pour moi et qu’elle risque de faire un mauvais affichage. il va utiliser l’image 3.125.
Cela a beaucoup plus de sens car le navigateur choisit essentiellement l’image la plus adéquate à envoyer au visiteur, ce qui réduit la bande passante et améliore le temps de chargement. Parfait. Mais cela signifie-t-il que vous devez télécharger plusieurs tailles différentes de toutes vos images ? Pas nécessairement.
Par exemple, le CMS WordPress s’en occupe automatiquement (à partir de WordPress 4.4, que vous devriez tous utiliser maintenant). Pour chaque image que vous téléchargez, WordPress crée ces versions par défaut :
- Vignette : Une coupe carrée (150px par 150px).
- Moyen : Redimensionné de manière à ce que le côté le plus long ait une largeur ou une hauteur de 300 pixels.
- Moyennement grand. Redimensionné à 768 pixels de large.
- Large : Redimensionné de manière à ce que le côté le plus long ait une largeur ou une hauteur de 1024 pixels.
- Plein : image originale.
En outre, WordPress ajoute automatiquement la balise srcset.
Notez que vous pouvez utiliser la syntaxe @2x si vous souhaitez optimiser pour les écrans rétina. Il existe également un plugin WordPress qui prend en charge ce type d’affichage dès le départ. Cela dit, à moins que vous ne fassiez des folies avec la compression d’image (c’est-à-dire tout ce qui est inférieur à ~40%) pour les JPEG, vous trouverez probablement que vos images « normales » s’adaptent très bien aux écrans rétina. C’est en tout cas mon expérience.
9. Utilisez les données structurées (pour les recettes, les produits et les vidéos).
Les données structurées (ou schema markup an anglais) sont probablement quelque chose que vous connaissez mieux dans le contexte de la recherche Web Google. Il ressemble à ceci dans les résultats de recherche ordinaires :
Mais saviez-vous que le balisage de données structurées peut également être pertinent pour le référencement des images ?
En effet, Google affiche des badges pertinents sur les vignettes dans les résultats de recherche d’images sur mobile. Voici à quoi ils ressemblent :
Voici ce que dit Google à propos de ces badges :
Si vous avez des images sur votre site, vous pouvez aider les utilisateurs à identifier le type de contenu associé à l’image en utilisant des données structurées appropriées sur vos pages. Cela permet aux utilisateurs de trouver rapidement un contenu pertinent et d’envoyer un trafic mieux ciblé sur votre site.
Actuellement, Google prend en charge quatre types de balisage : produits, recettes, vidéos et GIF.
Il est facile de s’assurer que vos images affichent ces badges dans la recherche d’images Google. Il suffit d’ajouter le balisage de données structurées approprié à la page.
- Ajout de balises de recettes aux pages de recettes.
- Ajoutez des balises de produit aux pages de produits.
- Ajoutez des balises vidéo aux pages contenant des vidéos.
Notez que les GIF ne nécessitent pas de balisage supplémentaire : Google sait déjà qu’il s’agit de GIF.
Bien entendu, si vous n’avez pas ce type de contenu sur votre site Web, vous n’avez pas à vous soucier du balisage de données structurées. Il est probable que Google prenne en charge les badges pour ces quatre types de contenu car il a reconnu que ses utilisateurs recherchent souvent ce type de contenu dans Google Images.
10. Pensez au Lazy-Loading
Le Lazy-Loading (chargement progressif en Français) consiste pour le navigateur à différer le chargement des images (ou de tout autre objet – vidéo, etc.) jusqu’à ce qu’il soit nécessaire de les afficher à l’écran. Concrètement, les images sont chargées au fur et à mesure qu’elles doivent être affichées, c’est-à-dire lorsque vous faites défiler la page.
Voici ce que dit Google à propos du chargement progressif :
Le Lazy-Loading peut accélérer considérablement le chargement des pages longues qui comportent de nombreuses images en dessous de la ligne de flottaison, en les chargeant soit au besoin, soit lorsque le contenu principal a fini de se charger.
La question de savoir si les images chargées progressivement sont bonnes ou mauvaises pour le référencement naturel a fait l’objet de nombreux débats par le passé. Google a également envoyé des messages contradictoires. Cependant, la meilleure indication que Google recommande effectivement le lazy-loading c’est en 2018 avec le message suivant :
Google explique ici comment mettre en œuvre le chargement progressif (d’une manière qui garantit qu’ils peuvent voir le contenu chargé progressivement – très important !) Il existe plusieurs méthodes différentes, mais elles font toutes appel à Javascript. Si vous n’êtes pas familier ou à l’aise avec ce genre de choses, il peut être intéressant d’engager un professionnel pour vous aider.
Si vous utilisez WordPress, il existe quelques plugins pour le chargement progressif.
La plupart d’entre eux ont de mauvaises critiques. Mais selon notre expérience, le plugin A3Lazy Load nous semble fonctionner correctement.
11. Utiliser la mise en cache du navigateur
La mise en cache du navigateur permet de stocker les images (ou d’autres fichiers) dans le navigateur de vos visiteurs. Le résultat est que les pages se chargent plus rapidement pour eux s’ils visitent votre site Web les fois suivantes.
Par exemple, lorsque vous êtes arrivé sur cet article de blog, vous avez dû télécharger toutes les images de l’article et les afficher dans votre navigateur. Or, sans la mise en cache du navigateur, ce processus devrait être répété dans son intégralité si vous souhaitez relire cette page demain.
Toutefois, grâce à la mise en cache du navigateur, ce dernier conserve certaines de ces images. Ainsi, lorsque vous consultez à nouveau cette page – ou une page similaire – il n’est pas nécessaire de les télécharger toutes à nouveau. Beaucoup d’entre elles sont déjà sur votre ordinateur et se chargeront donc beaucoup plus rapidement.
Voici ce que dit Google à propos de la mise en cache du navigateur :
La mise en cache HTTP peut accélérer le temps de chargement de vos pages lors de visites répétées.
Lorsqu’un navigateur demande une ressource, le serveur qui la fournit peut indiquer au navigateur la durée pendant laquelle il doit stocker temporairement ou « mettre en cache » la ressource. Pour toute demande ultérieure de cette ressource, le navigateur utilise sa copie locale préchargée, au lieu d’aller la chercher sur le réseau.
Vous pouvez même voir cet avertissement dans Google PageSpeed Insights si votre site Web peut bénéficier de la mise en cache du navigateur :
Alors comment activer la mise en cache du navigateur pour vos images ?
Dans WordPress par exemple, c’est assez simple. Il suffit d’installer un plugin comme W3Total Cache. Il activera la mise en cache du navigateur par défaut et ajoutera les modifications nécessaires à votre fichier .htaccess.
Pour les utilisateurs non-WordPress, vous devrez ajouter ce code à votre fichier .htaccess manuellement :
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
</IfModule>
Vous pouvez remplacer la partie « 1 year » par « 1 month », « 1 week », « 1 day », « 1 hour », etc. Ces paramètres devraient néanmoins convenir à la plupart des sites. Ce sont également les valeurs que W3 Total Cache utilise par défaut.
NOTE IMPORTANTE: Vérifiez que ce code est compatible avec votre serveur avant de le mettre en œuvre. Les fichiers .htaccess peuvent parfois être un véritable casse-tête.
12. Utiliser un CDN
La plupart des sites web diffusent tous leurs fichiers (y compris les images) à partir d’un seul serveur situé à un seul endroit.
Si nous supposons que votre serveur Web se trouve au Royaume-Uni, vos images n’ont pas à parcourir de longues distances lorsqu’un visiteur britannique se rend sur votre site Web. Cependant, c’est une autre histoire pour vos visiteurs américains. Les images doivent voyager beaucoup plus loin pour être affichées. Cela réduit la vitesse de chargement de votre site Web.
Les réseaux de diffusion de contenu (CDN) résolvent ce problème en mettant en cache vos fichiers sur un réseau mondial de serveurs. Ainsi, lorsqu’une personne visite votre site web, les images sont chargées à partir du serveur le plus proche d’elle.
Voici un GIF de CloudFlare (qui propose entre autres un CDN) qui décrit parfaitement ce processus :
Il existe de nombreux CDN. Voici quelques-uns d’entre eux :
- Cloudflare (propose une version gratuite) ;
- KeyCDN ;
- Amazon CloudFront (propose une version gratuite) ;
- Google CloudCDN (propose un essai gratuit)
Si vous utilisez WordPress, la configuration d’un CDN est simple. Inscrivez-vous au CDN de votre choix, suivez les instructions, puis utilisez un plugin comme W3Total Cache, CDNEnabler ou WPRocket pour activer le CDN sur votre site. C’est aussi simple que cela.
Il convient toutefois de noter que votre CDN aura une URL du type xyz.nom-du-fournisseur.com.
Ce n’est pas bon pour le référencement pour les raisons suivantes :
- Vos images sont effectivement hébergées sur un domaine distinct. Si quelqu’un choisit d’intégrer une de vos images et de créer un lien vers vous, il y a des chances qu’il crée un lien vers le CDN à la place. Cela signifie que vous perdez un lien.
- Cela peut poser des problèmes si vous souhaitez changer de fournisseur de CDN à l’avenir. Vous devrez modifier (ou rediriger) toutes les URL de vos images, etc.
Voici les conseils de John Mueller en ce qui concerne les CDN :
Pour cette raison, je vous recommande de mettre en place un enregistrement CNAME. Il s’agit d’un alias qui peut être utilisé à la place de l’affreuse URL qui vous est attribuée par le fournisseur de CDN. Ainsi, au lieu de xyz.cdnprovider.com, votre CDN peut être cdn.votre-site-web.com.
Lisez ce guide (en anglais) pour savoir comment le configurer (et tout ce que vous devez savoir sur les CDN en général).
CONSEIL
Les CDN d’images existent également.
Google en recommande deux dans sa documentation officielle : Cloudinary et imgix.
Ce qui est intéressant avec les CDN d’images, c’est qu’ils permettent d’automatiser le processus d’optimisation des images. C’est une recommandation de Google et, honnêtement, si vous avez un gros site Web, c’est une bonne idée.
Ces services ne sont généralement pas gratuits, mais ils permettent de gagner beaucoup de temps.
Pour finir
Le référencement des images est un sujet complexe. Google a des tonnes de documentation sur le sujet. Leur page sur l’automatisation de l’optimisation des images compte plus de 15 000 mots.
C’est pourquoi il est important de noter que je n’ai pas couvert absolument tout dans cet article. Ce serait impossible. Vous pouvez lire la documentation de Google si vous voulez tout savoir (et si vous avez quelques semaines devant vous). Cet article se concentre délibérément sur les éléments les plus importants, qui à mon avis, auront un impact positif et le plus important sur le référencement naturel de votre site web.
Mais pour résumer le sujet, voiçi une illustration qui récapitule tous les critères importants pour que vos images soient bien référencées sur Google:
N’oubliez pas que vous devez également faire un effort pour vous assurer que vos images sont de haute qualité et qu’elles contribuent à une bonne expérience utilisateur. Cela signifie qu’il faut éviter les photos de mauvaise qualité, rendre les images de produits extensibles, etc…
Positionner mon site web dans les premiers résultats Google
