RSS
Follow by Email
Facebook
Google+
http://www.responsive-mind.fr/optimiser-images-pour-seo/
Twitter

Obtenir des visites grâce à Google Images ? C’est possible mais ça un peu de travail pour qu’elles soient indexées au mieux. Voici quelques astuces à la portée de tous pour placer vos images en haut des SERP

Le diable se cache dans les détails dit-on. C’est plus que jamais vrai dans le domaine du référencement naturel, où chaque détail compte. Pour l’optimisation des images c’est vrai aussi et de nombreuses erreurs basiques peuvent très facilement être évitées.

vélo orange

Pour illustrer cet article nous allons utiliser la photo ci-dessus. Derrière cette image simple, vous verrez qu’il existe bien des questions à se poser pour qu’elle serve efficacement le référencement de votre site.

1. Sachez décrire l’image pour les moteurs de recherche

Avant de commencer à optimiser vos images, il faut que vous ayez conscience d’une chose : cette image existe en dehors de son contexte, sa description doit donc se limiter aux faits, en faisant abstraction du contexte dans lequel vous la présentez. Ainsi dans notre exemple, la photo montre une bicyclette orange, ni plus, ni moins. Il ne s’agit pas de vente de bicyclette orange si vous êtes un marchand, ni de entretien de bicyclette si vous êtes un atelier de réparation, ni même de la bicyclette que j’ai louée si vous racontez vos dernières vacances… juste une bicyclette orange.

Bicyclette ou vélo ? C’est votre audience qui en décidera. Si ces mots sont des stricts synonymes lequel utiliseriez-vous pour rechercher cet article ? Lequel vos visiteurs utilisent ? Ici on peut faire ce choix assez intuitivement, mais dans d’autres cas il peut être nécessaire réfléchir un minimum pour choisir les mots qui correspondront le mieux aux recherches de vos internautes. Vous pouvez par exemple utiliser l’outil de planification de mots clés de Google Adwords pour connaître la popularité et la concurrence de telle ou telle expression.

utilisation de l'outil de planification des mots clés Google
Comparaison de 2 expressions avec Google Adwords Keyword Planner

Enfin, soyez précis mais pertinent. Pour un badaud il s’agit d’une bicyclette d’un vélo orange mais pour un marchand de vélos il s’agit du modèle 123 de la marque xyz, et la photo représente donc un vélo xyz 123 orange. Pour un réparateur il s’agira bien entendu du même vélo xyz 123 mais, à moins d’être spécialisé dans la réparation de ce modèle en particulier (ou à moins de s’amuser à afficher 100.000 images correspondants à 100.000 modèles de vélo différents) il s’agira d’un vélo à éclairage dynamo… Bref, l’image existe bel et bien sans son contexte mais votre objectif étant de la positionner dans les SERPs, sa description doit finalement être adaptée à la cible à laquelle vous vous adressez.

Pour résumer la description d’une image doit être factuelle, précise et adaptée aux recherches de votre audience. Si vous avez compris cela le plus dur est fait, le reste n’est que mise en œuvre technique.

separateur

2. Soignez le nom du fichier

Si vos yeux et un bon CMS vous permettent de savoir que le fichier qui porte le nom DSC123456.jpg représente un vélo orange, un moteur de recherche n’en n’est pas encore capable. Si vous voulez lui faciliter la tâche, utilisez un nom de fichier pertinent, c’est à dire correspondant à la description de l’image. Notre magnifique photo va donc porter le nom velo-xyz-123-orange.jpg si vous êtes un marchand, velo-eclairage-dynamo.jpg si vous réparez des vélos à éclairage dynamo…

Vous noterez deux points de détails pour bien faire :

  • le nom de fichier ne contient aucun mot vide
  • le séparateur de mots est le tiret (-) plutôt que l’underscore (_)

separateur

3. Utilisez l’attribut ALT correctement

L’attribut alt de la balise d’insertion d’image joue un rôle plus important qu’il n’y parait. En effet vous pouvez très bien construire un site complet sans renseigner un seul de ces attributs mais d’une part vous priverez une partie de vos visiteurs d’informations importantes sur vos images (certains navigateurs affichent cet attribut à la place de l’image elle-même) et d’autre part, et c’est ce qui nous intéresse dans le strict contexte SEO, les moteurs de recherche utilisent cet attribut pour connaître le contenu de vos images.

Vous devez donc fournir une description pertinente de vos images dans leur attribut alt, mais seulement sur les images qui apportent de la valeur à votre contenu. Quelle que soit la façon dont votre site est conçu, il y a fort à parier que vos pages comportent plusieurs images sans aucune importance sémantique (liens de partage vers les réseaux sociaux, boutons de navigation …) ces images ne doivent pas avoir d’attribut alt ou mieux encore un attribut alt vide qui indique que vous spécifiez que cette image n’est pas significative.

Pour compléter votre lecture je vous invite à consulter cet article qui fournit des informations complémentaires sur l’utilisation de la propriété alt en SEO.

separateur

4. Utilisez l’attribut TITLE

Je ne parle pas ici de la balise <title> mais bien de l’attribut title de la balise img. Selon les spécifications W3C, l’attribut title doit être utilisé pour apporter des informations supplémentaires sur une image, des informations dont l’absence ne perturbe pas la lecture. De nombreux navigateurs (dont chrome et firefox) affichent le contenu de cet attribut sous la forme d’une info-bulle au passage de la souris.

Si l’importance de cet attribut est moindre, profitez donc de cet espace d’expression pour enrichir le champ lexical de votre image en utilisant des expressions que vous auriez écartées de l’attribut alt, ou encore pour ajouter des informations secondaires qui ne correspondent pas aux critères de pertinence que nous avons définis dans le premier paragraphe. Ainsi en tant que marchand vous pouvez insérer quelques caractéristiques techniques (La bicyclette XYZ 123 est fournie avec une béquille et un éclairage à dynamo).

Bien entendu il n’est pas vraiment intelligent d’utiliser cet attribut (ni aucun autre d’ailleurs) pour glisser une liste de 300 mots clés en pensant pouvoir jouer au plus malin pendant des années.

5. Ajoutez une légende à votre image

Si vous utilisez WordPress vous avez certainement l’habitude de cette astuce : en ajoutant une légende à vos images vous pouvez ajouter encore un peu de texte descriptif qui, s’il n’est pas directement inclus dans la balise <img>, ajoutera de la richesse sémantique à votre page sans en avoir l’air.

Pour vos visiteurs il s’agira d’un élément visuellement lié à l’image donc qui aura toute légitimité à se trouver là. Pour les moteurs de recherche il s’agira d’un élément basique div, span ou p qui sera donc géré comme n’importe quel autre élément de la page.

Exemple de légende d'une image
L’image et sa légende sont groupées dans une div mais la légende n’est rien d’autre qu’un simple paragraphe

Le texte de la légende sera directement visible par tous vos visiteurs, si vous choisissez d’utiliser cette optimisation vous devrez donc être très attentif à la qualité de rédaction et à la pertinence de son texte. Que diriez-vous de Dernier né de la marque XYZ, le vélo de ville 123 est disponible en différents coloris (ici orange lycopène) pour illustrer notre exemple ?

6. Fournissez des fichiers à la bonne résolution

Savez-vous quelle est la résolution du navigateur préféré de vos internautes ? Vous n’imaginez pas la quantité de sites sur lesquels je suis intervenu sur lesquels le webmaster (comprendre par là la personne en charge de la publication de contenu) avait inséré de belles images prises avec un superbe appareil photo directement en résolution 2300×1700 (si ce n’est plus) pour un poids de plusieurs Mo. Calculons ensemble le temps de chargement d’une page contenant 5 photos de 4 Mo chacune avec une connexion ADSL permettant de télécharger à 500 Ko par seconde (ce qui est très raisonnable en 2016) : nous avons 20 Mo à télécharger au total donc il nous faudra 40 secondes pour afficher les images, ce qui n’est plus du tout raisonnable en 2016. Sans compter le travail que fera le navigateur pour redimensionner et afficher ces images, la quantité de RAM utilisée pour l’affichage de la page…

Arrêtons là le carnage si vous le voulez bien et redevenons sérieux une seconde. Vous devez servir vos images dans la résolution dans laquelle elles seront affichées et ne pas les redimensionner dans le navigateur. Si votre site utilise le Responsive Design, essayez de servir une image adaptée à la résolution du navigateur (vous trouverez ici quelques techniques pour gérer des images standard ou Retina).

Sachez que hors compression un fichier de 800×600 px est 9 fois plus petit qu’un fichier de 2400x1800px, le temps de chargement du fichier sera donc 9 fois moins importante. Au fait, est-ce qu’on vous a déjà dit que le temps de chargement d’une page peut avoir un impact sur son référencement ?

7. Choisissez le bon format de fichier

Exit les images .bmp, cela semble relativement clair à tout le monde depuis l’an 2000, mais il reste un flou autour des 3 formats de fichiers populaires sur internet : le jpeg, le gif et le png. Nous n’allons pas nous lancer dans des explications théoriques ici, mais je peux vous livrer quelques pistes :

  • Le jpeg est particulièrement adapté aux photos mais il utilise une compression destructive, c’est à dire que plus vous réduisez le poids de vos images (à résolution identique), plus vous perdez de pixels et donc de netteté. Pour ce qui est de la résolution d’une image jpg, pour le web une résolution de 72 dpi est parfaite;
  • Le gif utilise une palette fixe de 256 couleurs, ce format gère la transparence et est parfaitement adapté aux graphiques et illustrations très simples;
  • Le png permet d’utiliser une palette de plus de 256 couleurs et gère la transparence comme le gif, cependant les images complexes générées sont souvent plus lourdes qu’au format jpeg. Le format png est particulièrement adapté aux logos ou autres icônes.

Le meilleur moyen de faire votre choix est encore de tester : enregistrez votre image dans les 3 formats ci-dessus et mettez en ligne celle dont le rendu est bon et dont le poids est le plus faible.

8. Allégez encore vos images

Vous croyiez en avoir fini avec ces histoires de perte de poids ? C’était sans compter sans les données exif qu’elle contiennent éventuellement si elles sont au format jpg. Ces données permettant d’obtenir tout un tas d’information à propos de la photo elle-même ne sont pas utiles dans la publication web et leur effacement vous permettra de gagner encore quelques octets.

A ma connaissance le meilleur outil pour supprimer ces données facilement est Trimage mais il n’est disponible que sous Linux. Si vous connaissez un bon outil gratuit pour Windows et/ou Mac, n’hésitez pas à partager vos liens en commentaires.

9. Un sitemap pour vos images

Que votre site propose des photos zoomées chargées en ajax ou que vous souhaitiez simplement vous assurer que toutes vos images sont correctement indexées, la dernière optimisation que je vous propose est d’ajouter vos images à votre fichier sitemap, voire mieux, de créer un fichier sitemap dédié aux images.

Dans cet article de Google, vous pourrez découvrir en détail comment créer ce fichier. Vous constaterez que l’attribut alt n’est pas prévu (je suppose que c’est parce qu’il est obligatoire dans la balise img) mais que le title et la légende le sont en revanche.

Comme dans toute optimisation pour le référencement naturel, ces conseils ne sont que des améliorations facultatives, absolument rien ne vous oblige à les mettre en place, mais la plupart sont vraiment des basiques que vous utilisez peut-être déjà parce que votre CMS vous le propose, sans soupçonner leur importance réelle.

Si vous avez une question sur cet article ou autre astuce à partager pour améliorer le SEO des images, n’hésitez pas à utiliser les commentaires ci-dessous, ils sont là pour ça !

Si vous avez aimé cet article, vous aimerez peut-être



Source : Source de l'image d'exemple

RSS
Follow by Email
Facebook
Google+
http://www.responsive-mind.fr/optimiser-images-pour-seo/
Twitter
9 astuces pour des images optimisées SEO

Une pensée sur “9 astuces pour des images optimisées SEO

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *