SEO pour les images

Étape 1: Remplissez les balises alt.

Étape 2: …?

Le référencement d'image ne se résume pas à écrire quelques balises alt ... beaucoup plus.

Certains peuvent même affirmer qu'avec les récentes avancées de Google dans le domaine de l'apprentissage automatique, les balises alt n'ont plus d'importance. Par exemple, voici ce qui se passe lorsque vous téléchargez une photo d'un chat sur l'API Google Cloud Vision, votre outil d'identification d'images de machine learning:

Google peut dire qu'il s'agit d'une photo d'un chat avec une précision presque parfaite. C'est génial. Je me suis assuré de supprimer toutes les métadonnées de cette image. Vous pouvez également voir que le nom du fichier est un IMG_0696_2 .jpg assez peu descriptif.

Alors, quel est l'intérêt d'ajouter des balises alt si Google comprend le contenu des images? L'image SEO est-elle morte? D'aucune manière.

Dans cet article, je vais examiner des conseils d'optimisation d'image pour obtenir plus de trafic organique.

Nommez vos images de manière appropriée

C'est ce que dit google  à propos des noms de fichiers image:

[…] Le nom du fichier peut donner des indices à Google sur le sujet de l'image. Par exemple, my-new-black-kitten.jpg est meilleur que IMG00023. JPG .

C'est le référencement de base. La plupart des gens font cela.

C'est probablement parce que Google donne ce même conseil depuis des années.

Preuve que les conseils de Google en la matière sont restés constants depuis 2013, via The Wayback Machine.

Mais une fois de plus, compte tenu des récentes avancées de Google dans le domaine de l'apprentissage automatique et de sa nouvelle capacité à reconnaître les images, quelle est l'importance de cela? réellement ?

Bonne question. Je suis conscient que l'exemple du chat était assez impressionnant. Alors, essayons une autre image.

Google est sûr que c'est du fromage 91%. Google a tort, c'est du saindoux / du beurre

Maintenant, je serai le premier à admettre que le beurre ressemble à du fromage dans cette image, mais le point est le même: Google n'est pas parfait - vous devez faire tout ce qui est en votre pouvoir pour les aider à comprendre vos images.

Cela ne veut pas dire Remplissage de mot-clé alors pourquoi oui (bourrage de mots clés). Gardez vos noms de fichiers descriptifs et simples.

Bon: chien.jpg
Mal:  chien-chiot-chiot-chiots-chiots.jpg

Renommer les images ne nécessite pas beaucoup d'efforts pour les rendre plus descriptives. Ensuite, cela vaut la peine de le faire.

Utilisez le champ "alt" et les sous-titres

Le texte alternatif (alt) décrit une image. Les navigateurs affichent également du texte alternatif en cas de problème de rendu des images.

Voici la syntaxe HTML:

<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

Cet exemple vient directement de les directives officielles de Google . Utilisé pour montrer à quoi ressemble une balise alternative bien écrite. Voici ses conseils généraux pour les rédiger:

Google utilise le texte alternatif en conjonction avec 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 et riche en informations qui utilise les mots-clés de manière appropriée et s'inscrit dans le contexte du contenu de la page. Évitez de remplir les attributs alt avec des mots-clés (bourrage de mots-clés) car cela entraîne une expérience utilisateur négative et peut donner à votre site l'apparence d'un spam.

Matt Cutts donne des conseils tout aussi bons pour le texte alternatif dans cette vidéo ancienne mais pertinente:

Cependant, voici un raccourci qui fonctionne presque toujours parfaitement: terminez cette phrase:

»Ceci est une image / capture d'écran / photographie / dessin de __________».

Supprimez toute conjonction ou connexion (par exemple, a / an) de la phrase résultante et utilisez la dernière partie comme texte alternatif. Voici quelques exemples:

»Ceci est une photographie d'un cheesecake au chocolat «.
<img src="cheesecake-chocolate.jpg" alt="cheesecake chocolate"/>

»Ceci est un dessin de mon chat, Mark, joue avec ses jouets «.
<img src="mark-el-gato.jpg" alt="mi-gato-Mark-jugando-juguetes"/>

Vous souhaiterez peut-être vous écarter légèrement de cette formule lors de l'écriture de texte alternatif pour les images de produits. Pour ceux-ci, il peut être utile d'ajouter le produit ou le numéro de série, comme ceci:

<img src="battery-tender.jpg" alt="Battery tender (022-0186G-DL-WH)"/>

Google sait quel produit nous recherchons sur la base d'une recherche du numéro de produit uniquement. Donc, l'incorporer dans votre texte alternatif peut aider Google à comprendre qu'il s'agit, en fait, d'une image d'un produit.

Oh, et n'oubliez pas les sous-titres. Celles-ci sont également importantes.

Voici ce que dit Google:

Google extrait des informations sur le sujet de l'image à partir du contenu de la page, y compris Sous-titre  et les titres des images. Dans la mesure du possible, assurez-vous de placer les images à proximité du texte pertinent et sur des pages pertinentes pour le sujet de l'image.3. Choisissez le meilleur type de fichier

La plupart des images sur le Web appartiennent à l'un des trois types de fichiers suivants: JPEG, PNG et GIF.

Chacun d'eux utilise une méthode de compression différente. Cela signifie que la taille des fichiers entre les trois types de fichiers peut varier considérablement. C'est important. Voici pourquoi :

Les images contribuent souvent le plus à la taille globale de la page, ce qui peut rendre les pages lentes et coûteuses à charger..

Le temps de chargement de la page est crucial pour le référencement. Google a confirmé qu'il s'agissait d'un facteur de classement dans les deux ordinateurs de bureau  comme dans les appareils mobiles . Votre tâche consiste à choisir le type de fichier le plus approprié pour chaque image, c'est-à-dire celui qui offre la meilleure compression avec le moins de réduction de qualité.

Dans cet esprit, voici la même image qu'un JPEG, PNG et GIF:

Vous pouvez voir que l'image JPEG est un gagnant clair. Il a la plus petite taille de fichier et il y a peu ou pas de différence notable de qualité d'image entre celle-ci et les deux autres images. Le JPEG est-il donc toujours le bon choix? D'aucune manière.

Je pense que cette illustration dit tout:

De manière générale, les JPEG sont le meilleur format pour les photos, tandis que les PNG sont les meilleurs pour les dessins au trait, le texte, etc. Les GIF sont les meilleurs pour les images en mouvement.

La plupart des applications d'édition d'images professionnelles (par exemple Photoshop) vous donneront la possibilité d'enregistrer 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 de retouche d'image professionnel? Test cet outil gratuit .

Pour les captures d'écran, voici quelques applications qui vous permettent d'exporter dans plusieurs formats:

• Skitch  (Mac)
• Monosnap (Mac, Windows)
• Tir léger  (Mac, Windows)

Il y a aussi un nouveau format d'image sur la scène: WebP. Cela promet une compression supérieure à la fois au format JPEG et PNG. J'ai décidé de le supprimer de l'article pour le moment, car il ne prend actuellement en charge que Chrome et Opera. Vous pouvez obtenir plus d'informations sur WebP ici .

Adapter les dimensions des images

La plupart du temps, nous publions des images qui ne sont pas adaptées à la taille dans laquelle elles sont réellement affichées.

On peut utiliser cet outil  pour redimensionner vos images en masse.

Seule la largeur compte, alors téléchargez vos images en vrac, puis utilisez l'option "largeur maximale" pour ajuster la largeur uniquement.

Nous téléchargeons en masse nos fichiers JPEG et PNG en deux lots distincts. Sinon, l'outil convertira toutes les images en un seul type de fichier image cohérent. 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 génial:

1. Redimensionnement de la largeur maximale Disons que la largeur maximale de votre site Web est de 700 pixels. Vous avez une tonne d'images à redimensionner. Certains sont plus larges que 700px, et certains sont plus étroits que 700px. Vous ne voulez pas redimensionner les plus étroits à 700 pixels, car cela réduira la qualité globale de l'image. Cet outil conserve ces images dans leur taille. Ne redimensionnez que ceux qui sont trop larges.
2. Conserve les noms de fichiers intacts - Vous avez passé des années à nommer vos images pour le référencement. Redimensionnez-les et téléchargez les versions redimensionnées. 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, vous n'aurez donc pas à renommer après le redimensionnement.

Compressez la taille de fichier de vos images

Jetez un œil à ces deux images:

Les deux sont JPEGS. Il y a peu de différence notable de qualité entre les deux, mais la première image est 58% plus petite que la première (31 ko contre 73 ko).

Google a documentation très complète  sur l'optimisation des images pour le Web.

La clé de la taille du fichier est la suivante:

Pour de meilleurs résultats, testez différents paramètres de qualité pour vos images et n'ayez pas peur de rétrograder - Les résultats visuels sont souvent très bons et les économies de taille de fichier peuvent être assez importantes.

Google recommande trois outils open source pour vous aider: Guetzli , MozJPEG  (par Mozilla) et pngquant . Vous pouvez lire leurs directives d'utilisation de ces outils ici . Cependant, gardez à l'esprit qu'il s'agit d'outils de ligne de commande. Si vous n'êtes pas à l'aise avec ces outils, la recommandation de Google est d'utiliser ImageOptim, un outil gratuit pour Mac. (Trouvez des alternatives Linux et Windows ici ).

Déposez simplement 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.

Aussi retirer le  Les données EXIF par défaut. Cela permet de réduire encore plus la taille du fichier, bien que ce ne soit pas le cas d'habitude  beaucoup de. On peut utiliser cet outil Web gratuit  (officiellement recommandé par Google) pour supprimer les données EXIF si vous ne prévoyez pas d'utiliser ImageOptim.

Google a déclaré  que les données EXIF peuvent être un "facteur de classement" dans Google Images.

Pour cette raison, c'est peut-être quelque chose que nous voulons garder. La suppression des données EXIF peut être désactivée dans les paramètres ImageOptim.

Aussi, si vous faites SEO local , cela peut être une autre bonne raison de conserver les données EXIF intactes. Google n'a jamais dit explicitement qu'il analysait les données EXIF telles que les coordonnées GPS pour influencer les classements locaux, mais de nombreux professionnels du référencement le pensent.

Notre verdict? Les avantages potentiels de laisser les données EXIF intactes, lors 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, des JPEG, des PNG. Je les ai tous jetés dans cet outil dans les paramètres par défaut. J'ai fait la même chose pour d'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)
• Pixel court :  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 JPEG. Mais c'était l'un des pires pour la PNG. Cependant, une mise en garde est à noter: ImageOptim utilise par défaut un 70% de qualité PNG. Vous pouvez accéder à 40%.

Néanmoins, si vous vous en tenez aux résultats des paramètres par défaut ci-dessus, Shortpixel semble être le meilleur compresseur d'image complet.

C'est particulièrement une bonne nouvelle pour les utilisateurs de WordPress car il existe un Plugin WordPress ShortPixel . C'est gratuit jusqu'à 100 images par mois.

6. Créez un plan de site image

C'est ce que dit google  à propos des plans de site d'image:

Les images sont une source importante d'informations sur le contenu de votre site. Vous pouvez fournir à Google des détails supplémentaires sur vos images et fournir l'URL des images que nous ne pourrions peut-être pas découvrir autrement en ajoutant des informations à un plan de site d'image.

Celles-ci  Voici les balises que vous pouvez utiliser dans les plans de site d'image:

Si vous utilisez WordPress et Yoast SEO, les images sont automatiquement ajoutées à votre plan de site. Cela est même vrai pour les sites dont les pages "médias" sont définies sur noindex. ( Noter: c'est maintenant le paramètre par défaut dans la dernière version de Yoast). Cependant, Yoast ne comprend que les exigences  et les  Étiquettes.

La documentation de Google pour les plans de site d'image est assez rare. Nulle part ils ne spécifient la syntaxe souhaitée pour le  hashtag.

Google affirme également que:

Les sitemaps illustrés peuvent contenir des URL d'autres domaines, contrairement aux sitemaps classiques, qui imposent des restrictions interdomaines. Cela permet aux webmasters d'utiliser des CDN (réseaux de diffusion de contenu) pour héberger des images. Nous vous recommandons de vérifier le nom de domaine CDN dans la Search Console afin que nous puissions signaler les erreurs d'exploration que nous pouvons trouver.

Il est utile de savoir si vous utilisez un CDN pour héberger vos images. Nous en reparlerons plus tard.

Utilisez des images vectorielles le cas échéant

C'est ce que dit google  à propos des graphiques vectoriels:

Les graphiques vectoriels utilisent des lignes, des points et des polygones pour représenter une image. [Ils sont] idéaux pour les images constituées de formes géométriques simples (par exemple, logos, texte, icônes, etc.) et offrent des résultats nets à chaque résolution et réglage de zoom, ce qui en fait un format idéal pour les affichages haute résolution et les éléments qui doivent être affichés dans differentes tailles.

De nombreux sites utilisent des graphiques vectoriels pour leurs logos et 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 une apparence nette car ils ne sont pas pixélisés. Il pourrait afficher un SVG sur un écran de la taille d'une planète; Je ne perdrais pas une once de qualité.

Voici les suggestions de Google pour optimiser SVG:

• Les fichiers SVG doivent être minimisés pour réduire leur taille.
• Les fichiers SVG doivent être compressés avec GZIP.

Les usages cette application web  ou cette application Mac  pour faire la réduction de taille. Les deux offrent une interface simple de glisser-déposer pour minimiser ces fichiers. Je préfère l'application Web.

Cette capture d'écran résume tout ce que vous devez savoir sur SVG. Nous pouvons voir que la taille d'origine du SVG était de 8,54 Ko. Voilà incroyablement petit. La version réduite (et compressée) est encore plus petite avec seulement 3,56 Ko, soit une économie de 41,67%.

La compression Gzip est quelque chose qui est activé au niveau du serveur. En d'autres termes, le SVG ci-dessus n'utilisera que 3,56 Ko de bande passante si le serveur le permet; sinon, il utilisera 8.54k.

Utiliser cet outil  pour vérifier si la compression gzip est activée sur votre serveur. 

Servir des images réactives

Disons que nous téléchargeons une image de 720 pixels de large sur votre site.

Si quelqu'un visite sur un appareil mobile avec un écran beaucoup plus petit, par exemple 320 px de large, le navigateur doit toujours charger l'image 720 px. Cette image aura l'air parfaitement bien. Mais il en serait de même pour une image de 320 px de large.

Voyez-vous le problème? Le chargement de l'image 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.

La solution est d'utiliser srcset.

C'est un morceau la magie de 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">

WordPress prend en charge automatiquement (un depuis WordPress 4.4 , que tout le monde devrait utiliser maintenant). Pour chaque image que vous téléchargez, WordPress crée ces versions  par défaut:

• Miniature : Un cadrage carré (150 px par 150 px).
• Moitié - Redimensionné pour que le côté le plus long soit de 300 pixels de large ou de haut.
• Moyen large . Redimensionné à 768 pixels de large.
• Grand - Redimensionné si le côté le plus long est de 1024 pixels de large ou de haut.
• Plein : image originale.

De plus, WordPress ajoute également srcset automatiquement.

Pour réitérer: ce code est entièrement généré par WordPress. Nous ne téléchargeons pas plusieurs versions de cette image.

Utiliser le balisage de schéma (pour les recettes, les produits et les vidéos)

Le balisage de contour est probablement quelque chose que vous êtes le plus familier dans le contexte de la recherche sur le Web Google. Cela ressemble à quelque chose comme ça dans les résultats de recherche réguliers:

Mais saviez-vous que le balisage de schéma peut également être pertinent pour le référencement d'images?

En effet, Google affiche des badges pertinents dans les miniatures dans les résultats de recherche d'images mobiles. Voici à quoi ils ressemblent:

Google dit cette  à 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 aide les utilisateurs à trouver rapidement du contenu pertinent et envoie un trafic mieux ciblé vers votre site.

Actuellement, Google prend en charge quatre types de marques: 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 vous suffit d'ajouter le balisage de contour approprié à la page.

Ajouter la recette  de marques sur les pages de recettes.

Ajouter produit  marqué sur les pages produits.

Ajouter un balisage à partir de vidéo aux pages avec des vidéos.

Gardons à l'esprit que les GIF ne nécessitent aucun balisage supplémentaire - Google sait déjà qu'ils sont des gifs.

Google prend probablement en charge les badges pour ces quatre types de contenu, car ils ont reconnu que leurs utilisateurs recherchent souvent ce type de contenu sur Google Images.

Chargement paresseux

Le chargement différé se produit lorsque le navigateur diffère le chargement des images (ou de tout autre objet, vidéo, etc.) jusqu'à ce qu'elles doivent être affichées à l'écran. D'autres images sont téléchargées lorsqu'elles doivent être téléchargées, c'est-à-dire au fur et à mesure que vous faites défiler.

C'est ce que dit google  à propos du chargement paresseux:

Le chargement différé peut considérablement accélérer le chargement sur de longues pages qui incluent de nombreuses images sous le pli en les chargeant au besoin ou lorsque le contenu principal a terminé le chargement et le rendu.

Il y a eu beaucoup de débats dans le passé pour savoir si les images téléchargées paresseusement sont bonnes ou mauvaises pour le référencement. Google a également envoyé messages mitigés . Cependant, la meilleure indication que Google recommande le chargement paresseux en 2018 est peut-être la suivante:

C'est une recommandation de l'outil PageSpeed ​​Insights de Google .

Il existe plusieurs méthodes différentes, mais elles impliquent toutes Javascript. Si vous n'êtes pas familier ou mal à l'aise avec de telles choses, il peut être utile de faire appel à un spécialiste pour vous aider.

Si vous utilisez WordPress, comme nous le sommes, il existe des plugins de chargement paresseux.

Profitez de la mise en cache du navigateur

La mise en cache du navigateur est l'endroit où les images (et autres fichiers) sont stockées dans les navigateurs de vos visiteurs. Le résultat est que les choses se chargent plus rapidement s'ils visitent votre site Web à l'avenir.

Par exemple, lorsque vous avez atterri sur cet article de notre blog, vous deviez télécharger toutes les images de l'article et les afficher dans votre navigateur. Désormais, sans la mise en cache du navigateur, ce processus doit être répété dans son intégralité si vous souhaitez relire cette page demain.

Cependant, avec la mise en cache du navigateur, ce qui se passe, c'est que votre navigateur se retrouve avec certaines de ces images. Ainsi, lorsque vous voyez à nouveau cette page, ou une page similaire, vous n'avez pas besoin de tous les télécharger à nouveau. Beaucoup sont déjà sur votre PC ou appareil mobile et se chargeront donc beaucoup plus rapidement.

C'est 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 des pages lors de visites répétées.

Lorsqu'un navigateur demande une ressource, le serveur fournissant la ressource peut indiquer au navigateur combien de temps il doit temporairement stocker ou «mettre en cache» la ressource. Pour toute demande ultérieure pour cette ressource, le navigateur utilise sa copie locale, plutôt que d'aller sur le réseau pour l'obtenir.

Vous pouvez même voir cet avertissement dans Google PageSpeed ​​Insights  Si votre site Web pourrait bénéficier de la mise en cache du navigateur:

Alors, comment activer la mise en cache du navigateur pour vos images?

Dans WordPress, c'est assez simple. Installons simplement un plugin comme Cache total W3 . Cela 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>
Expire Actif le
# 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"


Vous pouvez changer la partie de «1 an» à «1 mois», «1 semaine», «1 jour», «1 heure», etc. Cependant, ce paramètre devrait fonctionner correctement pour la plupart des sites. Ce sont également les valeurs que W3 Total Cache utilise par défaut.

Utilisez un CDN

La plupart des sites Web diffusent tous leurs fichiers (y compris les images) à partir d'un seul serveur en un seul endroit.

Si nous supposons que votre serveur Web se trouve au Brésil, vos images n'auront pas à voyager très loin lorsqu'une personne du Brésil visitera votre site Web. Cependant, c'est une histoire différente pour vos visiteurs d'autres endroits. Les images doivent voyager beaucoup plus loin pour les atteindre. Cela ralentit la vitesse de chargement de votre site Web.

Les réseaux de distribution de contenu (CDN) résolvent ce problème en mettant vos fichiers en cache sur un réseau mondial de serveurs. Désormais, lorsque quelqu'un visite votre site Web, les images seront téléchargées à partir du serveur le plus proche.

Voici un GIF sympa de CloudFlare  qui représente parfaitement ce processus:

Il existe de nombreux CDN. Ce ne sont que quelques-uns d'entre eux:

• Cloudflare  (niveau gratuit disponible);
• CléCDN ;
• Amazon CloudFront  (niveau gratuit disponible);
• Google Cloud CDN  (essai gratuit disponible)

Si vous utilisez WordPress, la configuration d'un CDN est facile. Inscrivez-vous pour obtenir le CDN choisi, suivez les instructions puis installez un plugin comme Cache total W3 , Activateur CDN  ou WP Rocket  pour activer le CDN sur votre site. C'est si facile.

L'avantage des CDN d'image est qu'ils aident à automatiser le processus d'optimisation d'image. C'est quelque chose que Google recommande et honnêtement, si vous avez un grand site Web, c'est une bonne idée.

Dernières pensées

Le référencement d'image est un sujet complexe. Google a des tonnes de documentation à ce sujet. 

Pour cette raison, il est important de noter que nous n'avons pas couvert absolument tout dans cet article. Ce serait impossible. Ils peuvent lire la documentation Google. Cet article se concentre délibérément sur les «gros» éléments qui, selon moi, auront l'impact le plus positif sur le référencement.

Gardons à l'esprit que vous devez également faire un effort pour vous assurer que vos images sont de haute qualité et contribuent à une excellente expérience utilisateur.