ONGLET IMAGES.

Présentation de l’onglet Images

Les images sont l’une des ressources les plus présentes sur les sites et e-commerce, pour mettre en valeur produits et services. Les moteurs de recherche leur accordent beaucoup d’attention et, mal gérées, elles peuvent devenir un vrai point faible et entraîner des pénalités dans les SERP.

Parmi les facteurs à optimiser, fais attention à :

• Poids des images : le poids des images peut influer sur le temps de chargement de la page et entamer le budget de crawl. Comme elles font partie, par nature, des éléments les plus grands d’une page HTML (en espace occupé), si elles ne sont pas bien configurées elles peuvent pénaliser le LCP (Core Web Vitals). Le SEO Spider utilise le kilo-octet comme unité de mesure.
• Nom des images : un nom de fichier adapté aide le robot à indexer correctement l’image et à l’intégrer dans la recherche d’images, y compris pour des requêtes associées.
• Texte alternatif : cet attribut est très important car il permet au robot de comprendre immédiatement le contenu de l’image. Avec le nom de fichier et la position dans le texte, il permet une bonne indexation dans la recherche d’images et protège le site d’éventuelles pénalités « douces ». Les attributs alt doivent fournir un texte alternatif pertinent et descriptif sur le rôle de l’image, et apparaissent ainsi dans le code HTML :

<img src="screamingfrog-logo.jpg" alt="Screaming Frog" />

L’onglet Images affiche les données de toutes les images trouvées pendant un crawl, internes comme externes, découvertes via les balises « img src » ou « a href ». Les attributs alt (souvent appelés à tort « balises alt ») se consultent en cliquant sur l’URL d’une image puis sur l’onglet « Image Details » de la fenêtre inférieure.

Les images décoratives doivent avoir un texte alternatif vide (alt="") et non absent, pour que les technologies d’assistance comme les lecteurs d’écran puissent les ignorer.

<img src="decorative-frog-space.jpg" alt="" />

Colonnes

Les colonnes disponibles sont :

• Address : l’URL crawlée.
• Content : le type de contenu de l’image (jpeg, gif, png, etc.).
• Size : la taille de l’image en kilo-octets. À l’export, la taille est exprimée en octets : il faut donc diviser par 1 024 pour obtenir des kilo-octets.
• Indexability : si l’URL de l’image est indexable ou non indexable.
• Indexability Status : la raison pour laquelle une URL d’image n’est pas indexable, par exemple si elle est canonicalisée vers une autre URL ou porte une balise « noindex ».

Filtres de l’onglet Images

1234

1ImagesL’onglet dédié aux images.2FiltresDe Over 100 KB à Missing Size Attributes.3SizeLe poids de chaque image.4Barre latérale ImagesCombien d’images relèvent de chaque filtre.

Les filtres disponibles sont très utiles :

• Over 100kb : les images de plus de 100 Ko. La vitesse de la page est extrêmement importante pour les utilisateurs et le SEO, et les grosses ressources comme les images sont souvent l’une des causes les plus courantes de lenteur. Ce filtre sert simplement de règle générale pour repérer les images assez lourdes qui peuvent mettre plus de temps à charger. Elles sont à considérer pour l’optimisation, avec les opportunités de l’onglet PageSpeed, qui utilise l’API PSI et Lighthouse pour mesurer la vitesse.
  Cela aide à repérer les images non redimensionnées, chargées hors écran, non optimisées, etc. Tu peux aussi personnaliser ce filtre dans 1Configuration›2Spider›3Preferences pour définir un seuil différent des 100 Ko par défaut.
• Missing Alt Text : les images qui ont un attribut alt dans le HTML mais sans texte. Clique sur l’adresse (URL) de l’image puis sur l’onglet « Image Details ». Les images devraient avoir un texte alternatif descriptif, optimisé pour décrire l’image sémantiquement et pour aider les lecteurs d’écran utilisés par les personnes aveugles et malvoyantes.
• Missing Alt Attribute : les images sans aucun attribut alt.
• Alt Text Over 100 Characters : les images dont le texte alternatif dépasse 100 caractères. Évite d’empiler des mots-clés dans cet attribut et préfère un texte sémantiquement cohérent avec le contexte de l’image.
• Background Images : les images chargées en arrière-plan CSS, découvertes avec le rendu JavaScript et la Crawl Analysis.
• Incorrectly Sized Images : les images servies plus grandes que la taille à laquelle elles s’affichent à l’écran (nécessite le rendu JavaScript et la Crawl Analysis).
• Missing Size Attributes : les images sans attributs width et height, une cause fréquente de CLS.

Tutoriel vidéo

Tutoriel vidéoTutoriel Screaming Frog : comment analyser les imagesRegarder la vidéo3:33