Quand vous rédigez une page sur votre site ou que vous écrivez un article, vous allez naturellement utiliser des images. Ces images ont plusieurs vocations, deux principales à mon sens : aérer le texte mais surtout appuyer une argumentation. Dans certains cas, une image vaut souvent mieux que mille mots, c’est le cas avec les schémas dans les explications scientifiques, les captures d’écran pour illustrer un tutoriel ou encore les photos pour présenter un récit ou un concept. Elles ont toutes les chances de plaire aux internautes et d’être utiles, donc ça va dans le bon sens pour Google et le référencement. Voici le guide 2023 pour vous aider à adopter les bons réflexes avec les images dans le cadre du référencement naturel.
Quand on parle de référencement naturel, on évoque surtout le contenu « texte » : le moteur de recherche ne peut pas lire le contenu d’une image. C’est encore difficile pour Google de dire qu’une photo représente tel paysage ou qu’une capture d’écran explique tel procédé !
Pourtant, même si les images ne peuvent pas vous permettre de gagner directement des positions dans les moteurs de recherche, elles peuvent vous amener une part non négligeable de trafic (via Google Images par exemple).
Nous verrons aussi à l’inverse que les images non optimisées peuvent vous pénaliser.
Les règles d’or pour insérer une image en 2023
La mission de Google, c’est de présenter le meilleur contenu à l’internaute pour chaque requête donnée. Et ne me demandez pas la formule magique, c’est Google qui estime qui est le meilleur pour chaque résultat ! Tout cela pour dire qu’en général, Google à tout intérêt de ne pas décevoir les internautes ! Si on applique cette théorie au niveau des images, il faut que :
- qu’elle soit rapide à charger (imaginez vos photos de vacances de 5000 px de largeur chargée par un internaute via une connexion Edge).
- capable d’être lue par tous, sur tous les supports : mobile, ordinateur, tablette mais aussi logiciel de transcription.
- corresponde au contenu recherché : si un internaute recherche « Monte Cinto » sur Google images, il s’attend à avoir une photo de montagne en Corse.
Bref, il y a des réflexes à adopter vis à vis des images, des actions à mener avant de la charger et une fois qu’elle est insérée dans votre page / article.
C’est ce que nous allons voir ci dessous.
Quel format pour les images ?
Des formats d’images, il y en a plein, j’en utilise principalement 2 mais on pourrait en lister 3.
- le JPEG : c’est l’extension de fichier que j’utilise pour les photos
- le PNG : c’est l’extension que j’utilise pour les illustrations, dès qu’il y a peu de couleurs. On utilise aussi cette extension d’image dès qu’il faut gérer de la transparence.
- le GIF : il n’utilise que 256 couleurs, ça permet notamment de créer des images animées.
Avant chargement : optimisez la taille des images et leur poids
Est ce vraiment important de charger une image de 5000 px de largeur pour illustrer un contenu qui sera de toute façon lu sur une largeur de contenu de 1200 px maximum ?
A la rigueur, ce n’est pas très grave si votre image n’est pas trop lourde ! Plus votre image est large, plus elle sera lourde. Une bonne façon de réduire son poids, c’est de commencer par la réduire en taille.
Personnellement, je mets toutes mes images à 1200 px de largeur, et souvent 630 px de hauteur, car cela correspond aussi à ce qu’attends facebook et d’autres réseaux sociaux.
Redimensionner et optimiser avec photoshop
Photoshop est un excellent logiciel qui n’est pas utilisé uniquement dans le cadre du design !
J’utilise photoshop à longueur de journée pour :
- retoucher mes images avant de les charger sur mon site web
- redimensionner mes images (comme je vous disais ci dessus, en général je les place dans une zone de 1200 px x 630 px)
- alléger les images. Au moment de l’enregistrement, Photoshop propose de réduire la qualité de l’image et donc l’alléger. Pour un rendu final sur le web, on peut souvent diviser par 5 ou 6 le poids de l’image soit voir de différence.
J’écrirai un tuto dédié pour vous montrer mes 5 réflexes sur Photoshop pour optimiser les images.
Astuce : dans fichier > script, vous pouvez aussi réduire des images à la pelle, en créant un script de redimensionnement.
Optimiser avec Tiny PNG
Si vous ne redimensionnez pas vos images, vous pouvez simplement les passer sous TinyPNG avant de la charger (attention, il faut que l’image fasse moins de 5Mo avant de la passer sur tiny PNG)
Tiny PNG est un service en ligne, qui optimise le poids de l’image (vous pouvez aussi les traiter par lots). Tiny PNG supprime les infos inutiles présentes dans l’image
Comme vous le voyez sur le « avant-après » ci dessus, les infos supprimées par Tiny PNG sont celles générées par les appareils photos, comme par exemple la date de prise de photo, le type d »appareil etc. Tiny PNG réduit la taille de l’image sans en altérer la qualité.
Image non passée sur TINY, elle pèse 4 Mo et met beaucoup de temps à se charger. Elle mesure plus de 4000 px de largeur, ce qui est bien trop grand pour un format WEB
Image passée sur TINY PNG, elle pèse encore 1,2 mo (ce qui est bien trop lourd) mais vous voyez que l’image a été réduite de 65% en poids sans perdre en qualité.
Même si les connexions internet sont amenées à afficher de plus en plus rapidement les pages web (grâce à la fibre ou la 4G / 5G), les images doivent être réduites autant que possible pour :
- améliorer le temps de chargement des pages
- prendre le moins de place possible sur votre serveur
- utiliser le moins de bande passante possible.
- améliorer le référencement de votre site et l‘indexation sur Google Images (si c’est mieux pour l’internaute, c’est donc mieux noté par Google)
Post chargement dans la page : le ALT et le titre de l’image ?
Quand vous insérez une image dans la page, vous pouvez renseigner du texte autour de cette image, pour renseigner à la fois l’internaute mais aussi les moteurs de recherche
Le Alt de l’image
Le ALT de l’image est un attribut :
- c’est le contenu qui apparaît quand votre image ne s’affiche pas correctement. Bon ça, c’est pas tous les jours….
- c’est aussi le texte qui est lu par les logiciels de synthèse vocale pour les malvoyants .
- c’est ce qui permet d’indiquer à Google ce que contient votre image.
En HTML, le ALT de l’image se place ainsi :
<img src="nom-de-image.jpg" alt="le ALT de l'image"/>Rassurez-vous, pas besoin de mettre les mains dans le code. La plupart des CMS en ligne ou les outils de création de sites comme WordPress permettent de renseigner facilement le ALT au moment d’insérer une image dans la page.
Quelques mots suffisent (3 ou 4 mots), pas besoin de le truffer de mots clés, ce serait assimilé à du spam. De la même façon que vous rédigez, soyez naturel quand vous renseignez le ALT d’une image, en décrivant ce qu’elle contient.
Ici, vous trouverez un autre exemple concret pour optimiser le ALT de l’image.
Le title de l’image
Le title est aussi un attribut qui se place sur l’image, c’est ce qui apparaît en infobulle quand on survole l’image avec la souris. Le titre peut aider le moteur de recherche à mieux comprendre une image
Le nom de l’image
Le nom de l’image, c’est ce qui apparaît devant l’extension. Sans chercher à truffer de mot clé le nom du fichier, je vous conseille de la nommer intelligemment. gdsyGDSY.jpeg par exemple, ce n’est pas intelligent ! Préférez un nom :
- significatif : si vous avez besoin de rechercher cette image dans votre bibliothèque médias de wordpress, la recherche se fera sur le nom !
- correctement orthographié
- sans espace et avec des tirets.
Exemple : si j’avais besoin d’illustrer ce paragraphe avec une image, je lui donnerai comme nom « nommer-une-image.jpeg« , ça me permettra de la retrouver si je veux l’insérer dans un autre article dont la thématique sera les « images » d’illustration.
La légende de l’image
C’est le texte qui s’affiche en dessous de l’image, sur WordPress. Une fois l’image insérée dans la page, cliquez dessus et renseignez une présentation de l’image à la place de « Légende de l’image« . Une légende s’adresse aux internautes, pour donner plus d’infos sur l’image. Elle peut se mettre en forme : gras, italique avec ou sans lien hypertexte.
On parlera un peu plus bas de tout le texte dans l’environnement de l’image et de son intérêt pour le référencement de celle ci sur Google Images.
Le texte autour de l’image
Vous allez naturellement écrire autour d’une image. Dans vos paragraphes, vous allez donc naturellement parler du contenu de votre image !
La légende fait partie du texte le plus proche de l’image dans le code HTML, ne la négligez pas et utilisez des mots clés judicieux.
Google utilise donc le ALT mais aussi tout le texte présent autour de l’image (dans les paragraphes mais aussi les H2 ou les H3, et même le titre de la page)
Le 23 septembre, j’ai ajouté un ALT sur l’image ci-dessous, à voir dans quelques semaines quel sera le résultat.
Du coup, le référencement des images, ça marche comment ?
Comme le référencement d’une page web ! On sait ce qui plait à Google, on applique les recommandations, mais on ne sait pas exactement comment ça marche, c’est le mystère de l’algorithme. Appliquez-vous à :
- optimiser la taille et le poids des images
- renommer vos images
- renseigner le ALT de chaque image
- appliquez-vous à parler du contenu de l’image dans l’environnement de celle-ci (paragraphes, titres de paragraphes etc…)
Si l’image est purement décorative, que c’est un élément de design de votre site, rien ne sert de l’optimiser !