04/05/20 Franck Bugnet Tuto Vidéo

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

Envie d'améliorer le référencement de votre site ? remplissez les balises Alt des images. 
On vous montre comment le faire rapidement et de manière automatisée, avec les infos de votre choix...

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'utilser ce terme car on peut alors les confondre avec le texte affiché parfois sous les images, aussi communément appelé légende :

Définition des légendes et balises alt des photos

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.

Dans toute la suite de cette article, et plus généralement sur tout le site, quand nous utiliserons le terme "légende" , ce sera dans le contexte de PrestaShop, c'est à dire pour parler de la balise alt d'une image.

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. Vosu 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 :

Gestion des photos dans PrestaShop 1.6

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 utilsez 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,  :

Modifier les légendes des photos avec PrestaShop 1.7


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

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


Dans Merlin Backoffice ™ vous disposez nativement  d'un éditeur de légendes automatisé et paramétrable, mulitlingue, 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écedents
    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

Légendes (balises ALT) automatiques. Génial pour le SEO

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 (balises ALT) remplies avec les attributs de couleurs

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.

Astuce 1 : le petit tableau "Texte libre" en bas à droite et le paramètre {text} permettent d'inclure dans vos légendes un texte quelconque différent selon les langues, comme par exemple un slogan ou une url.

Astuce 2 : le paramètre {current} permet de conserver la valeur actuelle de la légende à l'emplacement de votre choix dans la nouvelle légende. Si par exemple une image a pour légende "Je suis une fleur" et que vous programmez le générateur pour remplir la légende avec toto-{current}, la nouvelle légende vaudra "toto-Je suis une fleur".


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 cé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 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"


Modifier en masse les légendes des photos actuelles


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-çi peuvent être conservées lors du remplacement ou mise à jour des photos, grâce à une nouvelle option dans les réglages :

Protection des légendes



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 :  

alt="{$category->name|escape:'html':'UTF-8'}"


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

<img class="content_scene_cat_bg col-xs-12 col-sm-4" alt="{$category->name|escape:'html':'UTF-8'}" {if $category->id_image} src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" {/if} /> 



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 traffic 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 inclu 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 :

Comment ajouter une légende dans les photos incluses dans les descriptions PrestaShop

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":

Comment ajouter une légende dans les photos incluses dans les descriptions avec Merlin Backoffice

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 utilsé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.

SEMrush

Plus important, certaines de ces images méritent votre attention, comme par exemple le logo de votre site. Par defaut 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 d'affichege du logo (cherchez <img ...) se trouve dans le fichier hearder.tpl dans le dossier de votre thème.

Ancienne méthode avec PrestaPricing (obsolete, remplacé par Merlin backoffice depuis 2018)


PrestaPricing ne disposait pas encore de ce puissant générateur de légendes, mais si vous l'utilisez encore, sachez qu'il permet malgré tout de remplir en masse les légendes, avec les noms des produits (correctement traduits). Et en utilsant MagicEdit, on arrive à faire pas mal de choses, même si rien ne vaut Merlin à ce jour.

Remplir ou remplacer automatiquement la légende (ou balise ALT) des images, par le nom des produits :

1. Commencez par sélectionner plusieurs produits, puis affichez et sélectionnez leurs images à modifier

Afficher les images des produits

2. Puis cliquer sur le bouton T (T pour "Texte")

Remplir automatiquement la légende des images

La fenêtre ci-dessous va s'ouvrir: répondez à la question concernant la langue:

En cliquant sur : uniquement dans la langue courante ou dans toutes les langues

Remplir automatiquement la légende des images

Vous constaterez alors que la colonne légende a été automatiquement remplie avec le nom des produits (dans une seule ou toutes les langues selon votre choix):

Remplir la légende des images avec le nom des produits

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.

Accéder aux fonctionnalité de MagicEdit

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

Vidéo de formation détaillée sur les fonctionnalités et l'utilsation de MagicEdit®, l'innovation majeure de PrestaPricing 5.3.


Autres articles de la même catégorie

Cet article vous a plu ? Partagez-le !