Que vous soyez un blogueur ou que vous écriviez des articles pour un magazine ou un journal en ligne, il y a de fortes chances que vous vous demandiez si votre article a besoin d’une image ou non. La réponse est toujours oui”. Les images donnent vie à un article et contribuent également au référencement de votre site Web. Cet article explique comment optimiser pleinement une image pour le référencement et fournit quelques conseils sur l’utilisation d’images pour la meilleure expérience utilisateur.
Utilisez toujours des images
Les images, lorsqu’elles sont utilisées correctement, aideront les lecteurs à mieux comprendre votre article. Le vieil adage “Une image vaut mille mots” ne s’applique probablement pas à Google, mais c’est certainement vrai lorsque vous avez besoin de pimenter 1 000 mots ennuyeux, d’illustrer ce que vous voulez dire dans un graphique ou un diagramme de flux de données, ou simplement de faire votre publications sur les réseaux sociaux plus attrayantes.
C’est une simple recommandation : ajoutez des images à chaque article que vous écrivez pour les rendre plus attrayants. De plus, étant donné que la recherche visuelle devient de plus en plus importante – comme le montre la vision de Google pour l’avenir de la recherche – elle pourrait s’avérer vous fournir un bon trafic. Et si vous avez du contenu visuel, il est logique de placer le référencement d’image un peu plus haut sur votre liste de tâches.
Il y a quelque temps, Google Images a une toute nouvelle interface avec de nouveaux filtres, métadonnées et même attribution. Ces nouveaux filtres sympas montrent que Google sait de mieux en mieux ce qu’il y a dans une image et comment cette image s’intègre dans un contexte plus large.
Trouver la bonne image
Image SEO : cette image ne dit pas « bienvenue dans notre entreprise », mais plutôt « bienvenue dans une entreprise ».
Il est toujours préférable d’utiliser des images originales – des photos que vous avez prises vous-même – que des photos d’archives. Votre page d’équipe a besoin de photos de votre équipe réelle, pas de ce type à droite ou de l’un de ses amis en photo. Hors sujet : aussi, ce mec a vraiment besoin d’une coupe de cheveux. 
Votre article a besoin d’une image en rapport avec son sujet. Si vous ajoutez une photo au hasard juste pour obtenir une puce verte dans l’analyse de contenu du plugin Yoast SEO, alors vous vous trompez. L’image doit refléter le sujet du message ou avoir des fins d’illustration dans l’article. Essayez également de placer l’image près du texte pertinent. Si vous avez une image principale ou une image que vous essayez de classer, essayez de la garder près du haut de la page, si cela est possible sans vous sentir forcé.
Il y a une raison simple pour le référencement d’image à tout cela : une image avec un texte associé se classe mieux pour le mot-clé pour lequel elle est optimisée. Mais nous discuterons du référencement des images plus loin dans cet article.
Alternatives
Si vous n’avez pas d’images originales que vous pouvez utiliser, il existe d’autres moyens de trouver des images uniques tout en évitant les photos d’archives. Flickr.com est une belle source d’images par exemple, car vous pouvez utiliser des images Creative Commons. N’oubliez pas d’attribuer le photographe d’origine. On aime aussi les images fournies par des sites comme Unsplash. Nous avons un article de blog qui vous donne un aperçu impressionnant de l’endroit où obtenir de superbes images. Évitez les photos de stock évidentes, et si vous utilisez des photos de stock, choisissez celles qui semblent (ok, juste un peu) plus authentiques. Mais quoi que vous utilisiez, vous constaterez probablement que les images contenant des personnes ressemblent toujours à des photos d’archives. À moins que vous n’ayez pris les photos vous-même, ce qui (à notre avis) est toujours la meilleure idée.
Les alternatives évidentes pour les photos pourraient être des graphiques ou des illustrations, ce que nous utilisons chez Yoast. Si cela vous intéresse, notre illustrateur résident Erwin a écrit un article amusant sur la réalisation d’illustrations sur le blog de notre développeur. En outre, une mention honorable devrait être accordée aux GIF animés, car ils sont incroyablement populaires de nos jours.
Mais même si les GIF animés sont populaires, n’allez pas trop loin. Cela rendra votre message plus difficile à lire, car le mouvement de l’image détourne l’attention de vos lecteurs. Ils peuvent également ralentir votre page.
Préparation des images à utiliser dans votre article
Une fois que vous avez trouvé la bonne image – qu’il s’agisse d’une photo, d’une illustration ou d’un graphique – l’étape suivante consiste à l’optimiser pour l’utiliser sur votre site Web. Donc, avant d’ajouter votre image, il y a un certain nombre de choses auxquelles vous devez penser :
Choisissez le bon nom de fichier
Le référencement d’image commence par le nom du fichier. Vous voulez que Google sache de quoi parle l’image sans même la regarder, alors utilisez votre phrase clé de focus dans le nom du fichier image. C’est simple : si vous écrivez un article sur Notre-Dame et que vous utilisez une image montrant un lever de soleil à Paris sur la cathédrale Notre-Dame, le nom du fichier ne doit pas être DSC4536.jpg. Un nom de fichier approprié serait notre-dame-paris-sunrise.jpg, en veillant à ce que le sujet principal de la photo (et de votre article) se trouve au début du nom du fichier.
Choisissez le bon format
Pour les images, le bon format n’existe pas ; cela dépend du type d’image et de la façon dont vous voulez l’utiliser. En bref, nous vous recommandons de :
- . Choisissez JPEG pour des photos ou des illustrations plus grandes : il vous donnera de bons résultats en termes de couleurs et de clarté avec une taille de fichier relativement petite ;
- . Utilisez PNG si vous souhaitez conserver la transparence de l’arrière-plan dans votre image ;
- . Ou, utilisez WebP au lieu de JPEG et PNG. Il produira des résultats de haute qualité avec des fichiers de plus petite taille. Vous pouvez utiliser des outils comme Squoosh pour convertir votre image en WebP.
- . Utilisez SVG pour les logos et les icônes. A l’aide de CSS ou de JavaScript, vous pouvez gérer les images au format SVG, par exemple, les redimensionner sans perte de qualité.
- Si vous savez qu’une grande partie de votre public utilise des navigateurs ou des appareils spécifiques, assurez-vous de vérifier si votre format préféré est pris en charge par ces navigateurs sur CanIuse.com.
Lorsque vous avez choisi le bon nom et le bon format, il est temps de redimensionner et d’optimiser votre image !
Échelle pour le référencement des images
Les temps de chargement sont importants pour l’UX et le SEO. Plus le site est rapide, plus il est facile pour les utilisateurs et les moteurs de recherche de visiter (et d’indexer) une page. Les images peuvent avoir un impact important sur les temps de chargement, en particulier lorsque vous téléchargez une image énorme pour l’afficher en très petit – par exemple, une image de 2500 × 1500 pixels affichée à une taille de 250 × 150 pixels – car l’image entière doit encore être chargée. Redimensionnez donc l’image comme vous voulez qu’elle s’affiche. WordPress vous aide à le faire en fournissant automatiquement l’image en plusieurs tailles après l’avoir téléchargée. Malheureusement, cela ne signifie pas que la taille du fichier est également optimisée, c’est juste la taille d’affichage de l’image. Pensez donc à la taille dans laquelle vous téléchargez vos images !
Utilisez des images réactives
Celui-ci est également essentiel pour le référencement, et si vous utilisez WordPress c’est fait pour vous puisqu’il a été ajouté par défaut à partir de la version 4.4. Les images doivent avoir l’attribut srcset, qui permet de servir une image différente par largeur d’écran — ceci est particulièrement utile pour les appareils mobiles.
Réduire la taille du fichier
La prochaine étape du référencement d’image devrait être de s’assurer que votre image mise à l’échelle est compressée afin qu’elle soit servie dans la plus petite taille de fichier possible.
Bien sûr, vous pouvez simplement exporter l’image et expérimenter des pourcentages de qualité, mais nous préférons utiliser des images de la plus haute qualité possible, en particulier compte tenu de la popularité de la rétine et des écrans similaires de nos jours.
Vous pouvez toujours réduire la taille de fichier de ces images en supprimant les données EXIF, par exemple. Nous vous recommandons d’utiliser des outils comme ImageOptim ou des sites Web comme Squoosh, JPEGmini, jpeg.io ou Kraken.io.
Lorsque vous avez optimisé vos images, vous pouvez tester votre page avec des outils comme Google PageSpeed Insights, Lighthouse, WebPageTest.org ou Pingdom.
Ajouter l’image à votre article
Alors que Google s’améliore pour reconnaître ce qu’il y a dans une image, vous ne devriez pas encore vous fier totalement à leurs capacités. Tout dépend de vous pour fournir le contexte de cette image – alors remplissez autant que vous le pouvez ! Nous verrons comment ci-dessous.
Votre image est prête à être utilisée, mais ne la jetez pas n’importe où dans votre article. Comme mentionné précédemment, l’ajouter à proximité du contenu textuel connexe aide beaucoup. Il garantit que le texte est aussi pertinent pour l’image que l’image l’est pour le texte, ce que les utilisateurs et Google préfèrent.
Légendes
La légende de l’image est le texte qui accompagne l’image sur la page – si vous regardez les images de cet article, c’est le texte dans la zone grise en dessous de chacune. Pourquoi les légendes sont-elles importantes pour le référencement des images ? Parce que les gens les utilisent lors de la numérisation d’un article. Les gens ont tendance à parcourir les en-têtes, les images et les légendes lorsqu’ils parcourent une page Web. En 1997, Jakob Nielsen écrivait :
“Les éléments qui améliorent la numérisation comprennent les titres, les gros caractères, le texte en gras, le texte en surbrillance, les listes à puces, les graphiques, les légendes, les phrases de sujet et les tables des matières.”
En 2012, KissMetrics est allé encore plus loin en déclarant que :
“Les légendes sous les images sont lues en moyenne 300% de plus que le corps du texte lui-même, donc ne pas les utiliser, ou ne pas les utiliser correctement, signifie rater une occasion d’engager un grand nombre de lecteurs potentiels.”
Avez-vous besoin d’ajouter des légendes à chaque image ? Non, car parfois les images servent à d’autres fins. Décidez si vous souhaitez également utiliser le vôtre pour le référencement ou non. Gardant à l’esprit la nécessité d’éviter une sur-optimisation, nous dirions que vous ne devriez ajouter des légendes que là où il serait logique pour le visiteur qu’il y en ait une. Pensez d’abord au visiteur et n’ajoutez pas de légende uniquement à des fins de référencement d’image.
texte alternatif (Alt)
Le texte alternatif (ou balise alt) est ajouté à une image afin qu’il y ait un texte descriptif en place si l’image ne peut pas être affichée au visiteur pour une raison quelconque. On ne peut pas mieux dire que Wikipédia :
“Dans les situations où l’image n’est pas disponible pour le lecteur, peut-être parce qu’il a désactivé les images dans son navigateur Web ou utilise un lecteur d’écran en raison d’une déficience visuelle, le texte alternatif garantit qu’aucune information ou fonctionnalité n’est perdue.”
Le texte alternatif est là pour améliorer l’accessibilité de votre site Web. Assurez-vous donc d’ajouter du texte alternatif aux images que vous utilisez et envisagez d’inclure la phrase clé SEO pour cette page s’il est approprié de le faire. Ne remplissez pas le texte alternatif de chaque image avec des mots-clés. Plus important encore, décrivez ce qu’il y a dans l’image afin que les moteurs de recherche et les internautes puissent en comprendre le sens. Plus les informations entourant une image sont pertinentes, plus les moteurs de recherche jugent cette image importante.
Cependant, veuillez noter que toutes les images n’ont pas besoin d’avoir un texte alternatif. Au lieu de cela, vous devez considérer le texte alternatif comme faisant partie de votre contenu et l’ajouter là où cela a du sens. Par exemple, si vous avez une image uniquement pour des raisons décoratives, cette image n’a pas besoin d’un texte alternatif. Dans ce cas, avoir un texte alternatif n’apporte aucune valeur à vos lecteurs. D’un autre côté, si vous utilisez une image avec une statistique, disons – le nombre de personnes qui recherchent de la crème glacée le mois dernier, cela devrait être reflété dans le texte alternatif. Vous pouvez trouver des conseils pour le texte alternatif dans cet article de W3.
texte du titre (Title)
Lorsque vous survolez une image, certains navigateurs affichent le texte du titre sous la forme d’une “info-bulle”. Chrome affiche le texte du titre comme prévu. Le texte du titre pour les images est similaire et beaucoup de personnes qui utilisent des titres copient simplement le texte alternatif, mais de plus en plus de personnes les omettent complètement. Pourquoi donc? Voici le point de vue de Mozilla :
“Le titre présente un certain nombre de problèmes d’accessibilité, principalement basés sur le fait que la prise en charge du lecteur d’écran est très imprévisible et que la plupart des navigateurs ne l’afficheront que si vous survolez avec une souris (donc, par exemple, aucun accès aux utilisateurs de clavier).”
Il est préférable d’inclure ces informations complémentaires dans le texte principal de l’article, plutôt que de les joindre à l’image.
Ajouter des données structurées d’image
L’ajout de données structurées à vos pages peut aider les moteurs de recherche à afficher vos images sous forme de résultats enrichis. Bien que Google affirme que les données structurées ne vous aident pas à mieux vous classer, elles aident à obtenir une liste plus étoffée dans la recherche d’images. Il y a plus, cependant. Par exemple, si vous avez des recettes sur votre site et que vous ajoutez des données structurées à vos images, Google peut également ajouter un badge à vos images indiquant que cette image appartient à une recette. Google Images accepte les données structurées pour les types suivants :
- Produit
- Vidéo
- Recette
Google a un certain nombre de directives que vous devez suivre si vous voulez que vos images apparaissent riches dans la recherche d’images. D’une part, lorsque vous spécifiez une image en tant que propriété de données structurées, assurez-vous que l’image appartient réellement à l’instance de ce type. De plus, votre image doit avoir l’attribut image et vos images doivent être explorables et indexables. Vous pouvez les trouver toutes les directives générales de Google sur les données structurées.
Yoast SEO ajoute automatiquement les données structurées correctes à un certain nombre d’images sur votre site, comme votre logo ou celles que vous ajoutez à vos articles pratiques construits dans nos blocs. Le plugin trouve toujours au moins une image pertinente sur n’importe quelle page à ajouter au graphique de données structurées. De cette façon, Yoast SEO peut décrire correctement votre page aux moteurs de recherche. Vous souhaitez en savoir plus sur les données structurées ? Inscrivez-vous à notre formation gratuite sur les données structurées si vous souhaitez apprendre à ajouter des données structurées à vos pages !
Cartes OpenGraph et Twitter
Plus tôt, nous avons mentionné l’utilisation d’images pour le partage social. Si vous ajoutez la balise d’image suivante à la section de votre page HTML comme ceci :
<meta property=”og:image” content=”http://example.com/link-to-image.jpg” />
Cela garantira que l’image est incluse dans votre partage sur Facebook (et OpenGraph est également utilisé pour Pinterest, par exemple).
Notre plugin Yoast SEO a une section Social où vous pouvez définir et – dans la version Premium – même prévisualiser vos publications Facebook et Twitter. Les utilisateurs Premium peuvent également utiliser l’intégration Zapier pour automatiser la publication sur les plateformes de médias sociaux. Assurez-vous d’utiliser une image de haute qualité, comme l’image originale que vous avez utilisée dans la publication, car les plateformes sociales utilisent le plus souvent des images de meilleure qualité/plus grandes. Si vous l’avez configuré correctement et qu’il n’affiche pas la bonne image, essayez de vider le cache de Facebook dans le débogueur d’URL. Les cartes Twitter font de même pour Twitter et sont également générées par notre plugin.
Plans de site d’images XML
Si vous êtes un développeur Web, vous vous posez peut-être des questions sur les sitemaps d’image XML. Je préférerais décrire cela comme des images dans des sitemaps XML. Google est clair à ce sujet :
De plus, vous pouvez utiliser les extensions d’image Google pour les sitemaps afin de donner à Google plus d’informations sur les images disponibles sur vos pages. Les informations sur le sitemap des images aident Google à découvrir des images que nous ne pourrions pas trouver autrement (telles que les images auxquelles votre site accède avec du code JavaScript) et vous permettent d’indiquer les images de votre site que vous souhaitez que Google explore et indexe.
De temps en temps, les gens nous posent des questions sur les sitemaps d’images XML. Nous ne les générons pas dans notre plugin, mais suivez les conseils de Google et incluez-les dans la page ou publiez des sitemaps. Faites simplement défiler vers le bas dans notre plan de site de publication et vous verrez que nous avons ajouté des images à toutes nos dernières publications (il y a une colonne juste pour cela). L’ajout d’images à vos sitemaps XML aide Google à indexer vos images, alors assurez-vous de le faire pour un meilleur référencement des images.
Diffuser des images via un CDN d’images
Nous savons tous que les CDN sont l’une des optimisations de vitesse de site les plus populaires. Certaines des entreprises qui fournissent des CDN ont également un CDN spécifique pour les images. Les CDN d’images sont construits autour de tâches de base : optimiser vos images et les faire parvenir à votre visiteur le plus rapidement possible. L’exécution d’un CDN d’images peut accélérer la livraison de vos images de très nombreuses fois.
Un CDN d’images vous permet de gérer la transformation, l’optimisation et la livraison des images. Vous pouvez déterminer ce qui se charge quand et comment cela devrait fonctionner. Par exemple, vous pouvez dire que toutes vos images PNG doivent être converties en webp à la volée, car elles se chargent plus rapidement et offrent la meilleure qualité d’image. Un CDN d’image propose de nombreuses options pour affiner le processus, mais il existe souvent un paramètre par défaut qui est probablement le meilleur pour la majorité des sites.
Il existe de nombreux CDN d’images parmi lesquels choisir, comme Sirv, Cloudinary et Imagekit. De plus, des plates-formes comme Cloudflare vous permettent de déterminer comment redimensionner, reformater et diffuser des images.
Référencement des images : résumé
Le référencement d’image est la somme d’un certain nombre d’éléments. Google s’améliorant chaque jour dans la reconnaissance des éléments dans les images, il est logique de s’assurer que l’image et tous ses éléments contribuent à une bonne expérience utilisateur ainsi qu’au référencement. Il serait stupide d’essayer de tromper Google.
Gardez ces 12 choses à l’esprit lorsque vous ajoutez une image à un article :
- Utilisez une image pertinente qui correspond à votre texte
- Choisissez un bon nom de fichier pour votre image
- Assurez-vous que les dimensions de l’image correspondent à la taille de l’image affichée
- Utilisez srcset si possible
- Réduire la taille du fichier pour un chargement plus rapide
- Ajoutez une légende, le cas échéant, pour faciliter la numérisation de la page
- Utilisez le texte alternatif de l’image. Pas besoin de texte de titre
- Ajoutez des données structurées à vos images
- Ajouter des balises OpenGraph et Twitter Card pour l’image
- Utilisez des images dans vos sitemaps XML
- Diffuser des images via un CDN
- Fournissez tout le contexte que vous pouvez !
En plus de contribuer au référencement et à l’expérience utilisateur, les images peuvent également jouer un rôle important dans la conversion. Alors ne sous-estimez pas l’importance du référencement des images sur votre site !
