Optimiser le SEO de votre site grâce aux images
Pourquoi il est important d’optimiser les images de votre site ?
- améliorer le classement dans les moteurs de recherche
- accélérer le chargement de votre site
- créer un meilleur engagement
Votre classement dans les résultats de recherche Google peut être affecté par le temps de chargement du site. Si vous n'optimisez pas les images, cette différence de temps de chargement pourrait vous faire passer à la page suivante des résultats de Google.
Nous devons donc faire tout ce qui est en notre pouvoir pour que notre site Web se charge aussi rapidement que possible.
Pour cela il faut réduire la taille de vos fichiers et nommer vos fichiers d'images pour améliorer encore votre classement dans les moteurs de recherche.
Les formats d’images
.PNG - graphiques, illustrations ou tout ce qui est transparent
Si vous utilisez un graphique, un dessin au trait ou une illustration, il est préférable d'utiliser le format .png (portable network graphics). Le format PNG est une compression sans perte et offre des options de transparence. Ainsi, si vous souhaitez que votre graphique soit placé sur un fond de couleur et qu'il n'y ait pas de boîte blanche derrière lui, le format .png transparent est la solution idéale - parfait pour les logos.
.JPG - photographies
Si vous utilisez une photo, vous voudrez utiliser le format .jpg (joint photographic experts group). Le JPG est un format compressé avec perte qui permet de stocker les photographies dans une taille inférieure à celle des autres formats. L'exception à cette règle est que si la photo contient du texte qui doit être clair comme de l'eau de roche, vous pouvez utiliser le format .png.
La taille des images
La taille de vos images dépend de l'utilisation que vous en ferez sur le site.
Images de bannières
Il s'agit d'images qui s'étendent sur toute la largeur de votre site Web. Elles doivent avoir une largeur de 2000px. Pour économiser sur la taille du fichier, il est également utile qu'elles soient orientées en paysage plutôt qu'en portrait, vous pouvez donc les recadrer en paysage.
Arrière-plans de couleur unie
Si vous utilisez un arrière-plan de couleur unie, vous pouvez utiliser un très petit échantillon de la couleur enregistré au format .png. Squarespace répétera automatiquement l'échantillon.
Images sans bannière
Images en orientation paysage
En règle générale, si une image en format paysage est destinée à apparaître dans une lightbox (un popup qui affiche l'image dans une vue plus grande, souvent dans le cadre des blocs de la galerie) ou à être affichée sur la majeure partie de la largeur de votre site web, elle doit avoir une largeur de 1500px.
Si vous l'utilisez comme une image en ligne (affichée sur la page dans le texte) et qu'elle ne sera pas agrandie, je recommande de l'enregistrer à 750px de large.
Images en orientation portrait
En règle générale, j'enregistre les images en orientation portrait à 750px de large.
Optimisation de la taille des images
Pour optimiser la taille des images, je recommande d'utiliser https://www.bulkresizephotos.com/ pour définir votre largeur en fonction des dimensions en pixels que nous avons abordées dans la dernière section. Téléchargez vos images en masse pour gagner du temps.
Squarespace recommande que chaque image soit inférieure à 500 Ko et que la taille totale de la page soit inférieure à 5 Mo. Je vise encore moins pour chaque taille d'image, <350 KB pour les images de bannière et <200 KB pour les images sans bannière, et une taille totale de page de <3 MB. Dans certains cas, comme les pages de portfolio contenant beaucoup d'images, vous devrez peut-être mettre en balance la vitesse de chargement de la page et la mise en valeur de votre travail. Dans ce cas, je vous recommande de maintenir la taille totale de la page à moins de 5 Mo.
Si la taille de vos fichiers d'image est toujours trop importante après avoir utilisé la fonction Redimensionner les photos en masse, vous pouvez les soumettre à une autre méthode de compression en utilisant https://tinypng.com/.
Vous pouvez vérifier la taille des pages à l'aide d'un outil comme celui-ci : https://sitechecker.pro/page-size/.
Cette image de chiot mignon était à l'origine de 1,3 Mo (presque 5 fois la recommandation de Squarespace) lorsqu'elle a été téléchargée à partir d'Unsplash (un site de photos de stock - nous en parlerons plus en détail plus tard !) Après avoir été redimensionnée à 1500px de large sur bulkresizephotos.com, la taille du fichier a été réduite à 83 KB, soit une réduction de plus de 10x. L'image est toujours aussi belle et votre site Web est devenu beaucoup plus rapide.
L'importance des noms de fichiers d'images et comment nommer les vôtres
Maintenant que la taille de notre fichier image a été optimisée, il est temps d'optimiser davantage notre image pour le référencement. Pour ce faire, nous commençons par créer un nom de fichier pertinent.
Choisissez votre nom de fichier de manière réfléchie.
Votre nom de fichier doit avoir un sens par rapport à votre site Web et à l'image elle-même. Les moteurs de recherche utilisent cette information pour comprendre le contexte de votre site Web, de sorte que les noms de fichiers pertinents sont utiles pour le classement des recherches. Votre nom de fichier est une excellente occasion d'intégrer vos mots clés s'ils sont pertinents pour l'image.
À FAIRE :
Utilisez des tirets (et non des traits de soulignement ou d'autres caractères) pour séparer les mots - les moteurs de recherche peuvent ainsi les analyser correctement.
Veillez à ce que les noms des images soient courts, mais descriptifs.
Renommez l'image avant de la télécharger sur Squarespace.
À NE PAS FAIRE :
Utiliser plus de cinq mots pour nommer votre image.
Par exemple, si je suis un photographe et que je poste une photo d’une disquette prise lors d’un shooting pour la marque Vans je peux nommer le fichier "shooting-voiture-vans.jpg".
Une mise en garde : attention au "bourrage de mots clés". Si vous suivez l'exemple ci-dessus, vous ne nommerez pas chaque image de votre site Web "shooting-voiture-vans-1", "shooting-voiture-vans-2", etc. Utilisez des mots qui ont un sens dans le contexte de votre site Web et de la photo, mais ne répétez pas les mêmes mots ou expressions dans le même ordre plus de quelques fois.
Bon : shooting-voiture-vans.jpg
Mauvais : shootingvoiturevans.jpg (sans trait d'union pour séparer les mots)
Good: shooting-laverie-vans.jpg
Bad: shooting-laverie-vans-montantes-jean-bleu-2023.jpg (too long)
Le texte alternatif et comment l’ajouter sur votre site Squarespace
Le texte Alt, ou texte alternatif, désigne les mots qui s'affichent à la place d'une image si celle-ci ne se charge pas ou pour les personnes utilisant des dispositifs d'accessibilité tels que les lecteurs d'écran. Autre élément important, le texte alternatif est utilisé par les moteurs de recherche comme facteur de classement de votre site Web.
Le texte alternatif doit être descriptif et spécifique. Pour la photo de notre gâteau de mariage, nous pourrions utiliser "shooting photo vintage pour la marque de chaussures Vans ". Le texte alt ne doit pas dépasser 125 caractères.
Pour les images Inline, la légende devient le texte alt. Vous pouvez définir une légende, puis la masquer en utilisant l'option "Ne pas afficher la légende" dans le panneau Image, sous l'onglet Conception. Pour les autres styles d'images du bloc d'images (Poster, Card, Overlap, Collage et Stack), définissez d'abord votre image comme une image Inline pour ajouter la légende, puis changez l'image pour le style que vous souhaitez utiliser.
Pour les images de la galerie, le titre devient le texte alt. Si vous n'ajoutez pas de titre, la description devient le texte alternatif.
Pour les images de produits, le titre (sous Modifier les métadonnées de l'image) devient le texte alt.
Pour les vignettes d'articles de blog et d'événements, le titre devient le texte alt.
Les images de bannières n'ont pas de texte alternatif. Vérifiez donc que le nom de votre fichier est descriptif.
Devriez-vous utiliser l'intégration intégrée d'Unsplash ?
Nous devons faire tout ce qui est en notre pouvoir pour que notre site se charge aussi rapidement que possible.
L'utilisation de l'intégration intégrée d'Unsplash implique des fichiers d'images beaucoup plus volumineux (et un site Web plus lent) que la méthode que j'ai décrite dans ce cours.
Par exemple, regardons l'image de notre shooting :
Image ajoutée directement à Squarespace depuis l'intégration d'Unsplash : 1,1 MO
Image téléchargée depuis Unsplash.com, optimisée, puis téléchargée sur Squarespace : 90 KB
Une économie de taille de fichier de plus de 10x.
Plus petit, c'est plus rapide - et plus rapide, c'est mieux
Nous savons qu'un site plus rapide peut potentiellement signifier un meilleur engagement des visiteurs et une meilleure position dans les résultats des moteurs de recherche. Donc, même si l'intégration d'Unsplash est facile, si vous prenez le temps d'optimiser les images et de les télécharger vous-même, vous pouvez accélérer le chargement de votre site.
Le saviez-vous ?
Vous pouvez réutiliser les images que vous avez déjà téléchargées sur votre site Web. Lorsque vous ouvrez le bloc Image, cliquez sur Rechercher une image, puis sur Importé dans la fenêtre qui s'ouvre. Vous pouvez faire défiler une bibliothèque d'images déjà présentes sur votre site Web pour les réutiliser.
D'autres façons d'optimiser votre site Web
Tous les sites Web de Squarespace sont conçus pour être facilement indexés par les moteurs de recherche, mais vous devez prendre certaines mesures importantes pour tirer le meilleur parti de ces fonctionnalités.
Parcourez la liste de contrôle officielle Squarespace pour le référencement afin de vous assurer que votre site est optimisé à la fois pour les moteurs de recherche et pour les visiteurs de votre site.
Conseil avancé :
Si vous changez l'URL des pages de votre site Web (comme /à propos ou /mon ancienne page), assurez-vous d'utiliser le mappage d'URL pour préserver votre classement dans les moteurs de recherche. Si vous avez plus de quelques pages à rediriger, j'ai créé une feuille de calcul pratique de mappage d'URL que vous pouvez utiliser pour créer le code nécessaire.
Si vous le souhaitez, l’équipe créative peut se charger d’optimiser le SEO de votre site pour vous, n’hésitez pas à nous contacter !
