Comment remplir rapidement les légendes (ou balises alt) des images dans PrestaShop ?

Définitions et différences entre balises title (titre), balises alt et légende ?

La balise title (titre en français) est un mot ou une phrase associée à une photo ou à un lien qui apparait dans une info bulle lorsque l'on place le curseur sur l'image ou le lien. Certains moteurs de recherche l'utilisent mais étrangement pas Google. On peut donc dire que pour le référencement elle est quasi inutile. Nous l'utilisons presque exclusivement sur certains liens pour aider les internautes à comprendre où même le lien si ils cliquent dessus.

La balise Alt, ou texte alternatif est un mot ou une phrase décrivant également la même image et initialement destinée aux mal voyants (certains navigateurs peuvent l'énoncer à haute voix). Elle est aussi affichée en lieu et place de l'image lorsque cette dernière n'est pas trouvée ou ne peut être affichée. Et elle est utilisé par Google pour le référencement.

Dans PrestaShop, les balises alt des photos des produits sont appelées légendes. C'est un peu maladroit d’utiliser ce terme car on peut alors les confondre avec le texte affiché parfois sous les images, aussi communément appelé légende :



Dans le monde Wordpress, c'est plus clair, les balises alt s'appellent alt ou texte alternatif et le texte devant être affiché sous ou au dessus des images s'appelle légendes.

Pourquoi est-il important de remplir les légendes (balises alt) des images des produits de PrestaShop?

Google boot a beau affirmer être de plus en plus intelligent, il n'est toujours pas capable de comprendre ce que montrent les photos ou images. Pour lui une image A ou B, c'est strictement la même chose, juste une image. Il ne dispose donc pas nativement de suffisament d'information pour déterminer si cette image est utile aux lecteurs et donc si elle doit donner du bonus lors de l'indexation de la page.

Si par contre l'image dispose d'une balise ALT ou légende bien documentée qui décrit l'image, Google boot qui sait lire et comprendre les textes, saura de quoi il en retourne et vous remerciera (un peu) en retour et référençant mieux la page.

Parfois, il peut même indexer l'image elle-même, c'est à dire la proposer aux lecteurs comme étant une réponse possible à une recherche. Imagez que vous vendiez des robes et que lorsqu'une dame tape "jolie robe bleue", ce soit la photo d'une de vos robes qui lui soit proposée, avec un lien la page de vente de l'article sur votre site. La fortune...

Donc oui il faut remplir les balises alt. Et si Google ne s'en sert pas, au moins vous rendrez service aux mal voyants.

Le problème, est qu'avec PrestaShop, c'est chronophage et pas pratique du tout à faire, jugez plutôt...

Comment remplir les légendes des photos des produits avec PrestaShop ?

PrestaShop 1.0 à 1.5  n'autorise pas l'attribution de balises alt des images produits, c'est une lacune SEO importante pour le référencement des sites.

Sur les Versions 1.6.0.x on peut définir ces balises lors de l'ajout d'une photo, mais il est impossible de les modifier ensuite. Vous n'avez donc pas de seconde chance pour de travailler convenablement votre SEO.

A partir de PrestaShop 1.6.1.x, on peut enfin améliorer sa position sur les moteurs de recherche, mais uniquement une photo à la fois. Il faut procéder ainsi dans l'onglet Images de la fiche produit :



Attention à bien choisir la bonne valeur de position, correspondant à l'image à modifier, sinon vous allez remplacer les légendes de toutes les photos par le même texte. Et pas de retour en arrière possible. Aie.



Si vous utilisez PrestaShop 1.7, c'est déjà un peu plus intuitif, vous pouvez créer et modifier les légendes mais ça reste pénible car on travaille toujours sur une seule photo fois à la fois, en faisant un double clic sur les photos, comme ceci,  :




On voit tout de suite les limites du système : il faut ouvrir chaque fiche produit, une par une, cliquer sur chaque image, une par une et remplir manuellement chaque légende.

Si vous voulez y inclure par exemple votre marque, il faudra la saisir pour chaque image, encore et encore...

C'est lent, mais en plus très incomplet. Comment par exemple saisir les légendes différentes pour chaque langue ? on vous laisse chercher

Saisir ou modifier manuellement les légendes des images avec Merlin Backoffice

Comme on vient de le voir, PrestaShop ne permet de modifier les légendes des images qu'à partir de la version 1.6.1, en ouvrant chaque fiche produit une par une, c'est très long. Mais heureusement, si vous avez Merlin Backoffice, il n'y a rien de plus simple, quelle que soit la version de PS :

1. Afficher et sélectionner les produits à modifier
2. Aller dans le sous onglet "Images" de l'onglet "Déclinaisons et images"
3. Afficher les images
4. Saisir ou modifier les légendes directement dans les cellules de la la colonne "Légende".

Remplir en masse les légendes des photos des produits, avec les rubriques de votre choix, grâce à Merlin Backoffice

Dans Merlin Backoffice ™ vous disposez nativement  d'un éditeur de légendes automatisé et paramétrable, multilingue, fonctionnel quelque soit la version de PS, de 1.2 à la dernière 1.7. On change de monde.

L'idée est de choisir librement avec quelles rubriques vous souhaitez que les légendes soient remplies.

Prenons un exemple : vous souhaitez que toutes les futures photos ajoutées dans les fiches produits soient automatiquement enrichies avec une légende composée de la référence de l'article, suivie d'un tiret puis du nom de sa catégorie (traduite dans la langue du client) puis d'un autre tiret et enfin de votre marque.

Pour cela il suffit de suivre ces étapes :

1. Allez dans l'onglet des "Images" et cliquez sur le bouton "Réglages"
2. Allez dans l'onglet "Légendes"
3. Videz le contenu du champ en bas de la fenêtre, qui contient les réglages par défauts ou vos réglages précédents
4. Cliquez sur le + à gauche de "reference", pour que s'ajoute {reference} dans le champs du bas
5. Tapez un tiret à la suite de {reference} ( ce pourrait aussi être un espace ou tout autre texte libre)
6. Cliquez sur le + à gauche de "category"
7. Puis un autre tiret et enfin tapez le nom de votre marque
8. Sauvez les réglages

A partir de maintenant, toutes les nouvelles photos auront une légende dynamiquement remplie selon ces règles.

Par exemple "REF123-Robes de soirée-SITOLOG"

Légendes contenant les attributs, comme la couleur, des déclinaisons

En incluant sur le + de "attributes", on ajoute le paramètre {attributes}, celui-ci est dynamiquement remplacé lors de la génération par la liste des attributs communs à toutes les déclinaisons du produit associées à la photo, par exemple sous la forme "Couleur:bleu Taille:XL" :

Légendes multilingues

Merlin va encore plus loin en vous permettant de définir des légendes différentes pour chaque langue.

En effet, tous les paramètres "traduisibles", comme le nom du produit ou de celle de sa catégorie donneront lieu à des légendes construites et affichées dans la langue du visiteur.

Génération des légendes pendant l'importation de fichiers de produits ou de déclinaisons

Ce générateur est également fonctionnel pour les images ajoutées via l'outil d'importation de fichiers Excel ou CSV, en même temps que la création ou modification des produits. Inutile donc d'inclure et devoir remplir manuellement une colonne "Légendes" dans vos fichiers.

Tout est automatisé et cela vous fait gagner un temps fou.

Remplir les balises ALT lors de la création de déclinaisons avec le générateur

Le générateur avancé de déclinaisons de Merlin, permet d'associer des photos aux attributs. Par exemple pour associer toutes les photos de produits rouge à l'attribut de couleur rouge.

Il est donc logique de pouvoir aussi utiliser le générateur de légendes de photos à partir de ce générateur avancé de déclinaisons, pour inclure directement les balises Alt des photos ajoutées aux déclinaisons dès de leur création.

Le paramètre {attributes} expliqué plus haut montre alors toute sa puissance. Quel site concurrent du votre peut se vanter d'avoir pour chaque photo une légende indiquant la couleur de la déclinaison de l'article ?

Remplacer, modifier ou remplir en masse les balises Alt des photos déjà associées aux produits

Bien sûr vous pouvez aussi utiliser ce générateur de légendes pour remplir, remplacer ou enrichir les légendes des photos existantes. Pour cela :

1. Affichez les photos des produits de votre choix
2. Sélectionnez celles à modifier
3. Cliquez sur le bouton "Actions groupées"
4. Cliquez sur "Légendes"

Cela ouvre la fenêtre du générateur de légende, vérifiez le paramétrage et cliquez sur le bouton "Appliquer".

Possibilité de conserver les légendes lors du remplacement ou mise à jour de photos

Peut être savez-vous que Merlin est capable de mettre à jour des photos. Il vous suffit de glisser un nouveau fichier depuis votre explorateur de fichiers, sur une photo affichée dans Merlin, pour la remplacer. Que se passe t'il alors pour les légendes ? : 
Si vous aviez déjà patiemment rempli manuellement les légendes de vos images. Celles-ci peuvent être conservées lors du remplacement ou mise à jour des photos, grâce à une nouvelle option dans les réglages :

Comment remplir les légendes des logos des catégories ?

Nativement, avec PrestaShop, cela n'est pas possible. Aucun champ dans la base n'existe pour stocker les légendes des photos des catégories. Ce n'est pas critique car sur un site cela représente finalement souvent assez peu de photos. C'est quand même dommage de s'en passer totalement, le SEO étant un ensemble de petites briques qui en s'ajoutant finissent par donner un résultat, autant essayer d'enrichir également ce type de photos avec une balise alt. Surtout que le référencement des pages catégories est souvent plus important encore que celui des pages produits.

La solution que nous avons choisie est assez basique, elle consiste à modifier légèrement le code du fichier category.tpl de thème, de façon à inclure en dur le balisage alt, dans le code d'affichage des logos.

Techniquement il faut mettre les mains dans le code, mais ça reste simple. Il suffit d'ajouter le code alt="le texte de ma légende" dans la balise <img ... /> qui sert à afficher une image.
 
Se pose alors la question, avec quoi remplir la balise alt des catégories ? le plus simple est d'y inclure le nom de la catégorie.
Techniquement cela consiste à inclure ce bout de code pour un PrestaShop 1.6 :  

Comme ceci par exemple dans category.tpl (code à adapter à votre version de PrestaShop et à votre thème):

Conseils supplémentaires pour améliorer votre référencement PrestaShop grâce aux images

Et pas seulement le référencement des pages, mais aussi votre visibilité et trafic grâce à l'indexation et référencement des images dans Google images. C'est assez simple, il suffit de veiller à :

• Suivre les conseils de cet article pour remplir toutes les balises alt.
• Inclure les vraies dimensions des photos (résolution width et height en pixels).
• Nommez les fichiers avec votre marque et des mots clés, sans espace ni accents (ex : module_prestashop_prix_sitolog.jpg).
• Optimisez les réglages de compression d'images de PrestaShop pour obtenir le meilleur compromis poids/taille des vignettes.
• Ne dépassez pas 200K par image.
• Sauvez vos photos de produits en 800x800 pixels (avec le thème par défaut - peut être différent avec d'autres thèmes).
• Démarquez-vous avec de belles images qui font vendre.
• Choisissez un module de sitemap qui inclut les urls des images.

Balise alt des autres types d'images

Images présentes dans les descriptions des produits et catégories

Si vous utilisez l'éditeur tinyMCE intégré dans PrestaShop pour saisir vos descriptions, c'est assez simple à faire, un champ (Image description) est prévu pour cela dans le widget d'ajout d'une image :



Si vous utilisez l'éditeur HTML intégré dans Merlin (il s'agit de CKEditor), c'est le même principe, le champ s'appelant "Texte de remplacement":

Images dans les pages CMS

Si vous vous demandez ce qu'est une page CMS dans PrestaShop et bien vous êtes en plein dedans. La page de cet article, comme toutes celles de notre base de connaissances sont des pages CMS PrestaShop. Donc il s'agit d'un type de pages natives de PrestaShop, autres que les pages produits et catégories de produit, pouvant être utilisées pour toutes sortes d'usages, souvent purement informatif.

Si vous voulez bien référencer vos pages CMS, contenant de belles photos ou graphiques, il va falloir leur donner une légende à elles aussi. La méthode reste la même que ci-dessus, si vous utilisez également l'éditeur tinyMCE.

Merlin n'intègre pas encore (mais ça va venir) un système de gestion des pages CMS. Lorsque cela sera en place, vous pourrez gérer les balises alt des CMS comme on vient de vous l'expliquer pour les produits.

Images décoratives

Il s'agit par exemple des imagettes permettant de passer d'une page à l'autre ou parfois sans action associée.

On vous conseille, bien que cela ne doive pas être votre priorité, de leur ajouter une balise alt vide (alt="") et pourquoi pas une balise noindex (ok, on s'éloigne un peu du sujet). Ne serait-ce que pour avoir de meilleurs indices qualité dans Semrush dont on vous a déjà parlé, le seul outil de management et suivi de performance SEO que nous préconisons.

Plus important, certaines de ces images méritent votre attention, comme par exemple le logo de votre site. Par défaut il contient déjà une balise alt, mais remplie seulement avec le nom donné à votre site dans les réglages du thème.

Comme ce logo est affiché sur toutes les pages du site, ce n'est pas une mauvaise idée d'enrichir cette légende avec quelques mots clé décrivant votre business. Le code affichage du logo (cherchez <img ...) se trouve dans le fichier hearder.tpl dans le dossier de votre thème.

Comment ensuite modifier en masse les légendes ?

Grâce à MagicEdit ! Souvenez-vous qu'en faisant un clic droit dans la colonne légende, vous avez accès au menu contextuel qui permet de lancer MagicEdit.

Vous ne connaissez pas MagicEdit ? voir ou revoir le tutoriel complet :