Peut-on cacher du texte dans les SVG et Canvas sans risque SEO ?

Pourquoi Google met-il en garde contre le texte caché dans les SVG ?

Les fichiers SVG (Scalable Vector Graphics) sont des formats d'image vectorielle qui peuvent techniquement contenir du texte balisé. De même, l'élément canvas HTML5 permet de dessiner des graphiques dynamiques via JavaScript, y compris des caractères textuels.

Le problème ? Google traite ces contenus comme des objets graphiques, pas comme du texte indexable classique. Même si le code source contient des balises <text> dans un SVG, le moteur de recherche ne leur accorde pas la même valeur qu'à du texte présent dans le DOM HTML standard.

Qu'est-ce que cela signifie concrètement pour l'indexation ?

Un crawler qui rencontre un SVG ou un canvas ne va pas nécessairement extraire et indexer le texte qu'il contient. Les lecteurs d'écran utilisés par les personnes malvoyantes rencontrent le même obstacle : le contenu devient invisible pour eux.

Cacher du texte dans ces formats revient donc à envoyer un signal contradictoire à Google : vous prétendez afficher une information visuellement, mais vous la rendez techniquement inaccessible. C'est exactement le type de manipulation que les algorithmes cherchent à détecter.

Est-ce que tous les SVG posent problème ?

Non. Un SVG utilisé pour afficher un logo, une icône ou un graphique décoratif ne pose aucun souci. Le problème survient quand on y intègre du contenu textuel stratégique : titres, paragraphes de corps de texte, listes à puces contenant des mots-clés.

Certains développeurs ont tenté de bourrer des SVG de keywords invisibles pour gonfler artificiellement la densité sémantique d'une page. C'est précisément ce cas de figure que Mueller vise avec sa mise en garde.

• Les SVG et canvas sont traités comme des objets graphiques, pas comme du texte indexable classique
• Le texte caché dans ces formats est inaccessible aux crawlers et aux lecteurs d'écran
• Utiliser ces techniques pour du contenu stratégique nuit au référencement et à l'accessibilité
• Les SVG décoratifs ou iconographiques restent parfaitement légitimes
• Toute tentative de keyword stuffing via SVG risque d'être détectée comme manipulation

Cette recommandation est-elle cohérente avec les observations terrain ?

Oui, et elle s'inscrit dans une tendance de fond. Google privilégie de plus en plus l'accessibilité comme signal de qualité. Les sites qui respectent les standards WCAG (Web Content Accessibility Guidelines) obtiennent souvent de meilleurs résultats, même si Google ne l'affirme pas directement.

J'ai observé plusieurs cas où des pages utilisant massivement du texte en SVG pour des raisons esthétiques ont vu leur performance chuter en trafic organique après des mises à jour d'algorithme. Le contenu existait techniquement, mais Google ne le valorisait pas. Remplacer ces SVG par du HTML stylisé en CSS a systématiquement corrigé le problème.

Quelles nuances faut-il apporter à cette déclaration ?

Mueller parle de « cacher » du texte, ce qui suggère une intention manipulatrice. Si vous utilisez un SVG pour des raisons légitimes — infographies complexes, schémas techniques — et que vous fournissez une alternative textuelle via un attribut alt ou une description HTML adjacente, vous restez dans les clous.

Le vrai danger concerne les tentatives de dissimulation pure : texte blanc sur fond blanc dans un SVG, canvas rempli de keywords invisibles positionnés hors viewport. Ces techniques datent des années 2000 et restent détectables. [À vérifier] : Google affirme traiter le texte SVG différemment, mais ne précise jamais avec quelle pondération exacte ni si tous les types de SVG sont logés à la même enseigne.

Dans quels cas cette règle ne s'applique-t-elle pas strictement ?

Si votre contenu SVG est purement décoratif ou illustratif et que le texte important figure en HTML standard sur la même page, vous n'avez aucun souci à vous faire. Un logo en SVG avec du texte vectoriel ? Pas de problème.

En revanche, si vous construisez des landing pages entières en canvas (certains frameworks JavaScript le font), vous vous tirez une balle dans le pied. Le contenu devient un trou noir pour les crawlers. Même chose pour les sites qui génèrent des graphiques dynamiques en canvas sans fournir de transcription HTML : Google ne peut pas deviner ce que contient l'image.

Que faut-il faire concrètement pour éviter ce piège ?

Première étape : auditer vos pages pour identifier où vous utilisez des SVG ou des canvas contenant du texte. Un simple « Inspecter l'élément » dans Chrome permet de repérer ces zones. Si vous voyez des balises <svg> ou <canvas> contenant du texte stratégique, il faut agir.

Ensuite, deux options. Soit vous remplacez ces éléments par du HTML stylisé en CSS (souvent la meilleure solution pour le SEO). Soit vous conservez le SVG/canvas pour des raisons techniques, mais vous ajoutez une version textuelle accessible via une balise <div> adjacente ou un attribut aria-label pertinent.

Quelles erreurs éviter absolument ?

Ne tombez pas dans le piège de la sur-optimisation. Certains SEO, en découvrant que le texte SVG pose problème, se mettent à remplacer tous leurs graphiques par du HTML. Résultat : des pages lourdes, lentes, visuellement dégradées.

L'autre erreur classique : ajouter du texte caché en aria-label ou alt text qui ne correspond pas au contenu visuel réel. Google détecte ces incohérences. Si votre SVG affiche un logo, l'alt doit décrire le logo, pas contenir une liste de keywords sans rapport.

Comment vérifier que mon site est conforme ?

Utilisez un lecteur d'écran comme NVDA ou JAWS pour naviguer sur vos pages clés. Si le contenu textuel important n'est pas vocalisé, c'est que Google ne le voit probablement pas non plus. Complétez avec un test Lighthouse dans Chrome DevTools : il signale les problèmes d'accessibilité.

Côté indexation, vérifiez dans la Search Console que vos pages stratégiques sont bien explorées et indexées avec leur contenu complet. Un écart entre ce que vous voyez dans le navigateur et ce que Google rapporte dans l'aperçu de la page doit vous alerter.

• Auditer toutes les pages contenant des SVG ou canvas avec du texte stratégique
• Remplacer par du HTML/CSS quand c'est possible, ou ajouter une alternative textuelle accessible
• Tester avec un lecteur d'écran (NVDA, JAWS) pour valider l'accessibilité
• Vérifier l'indexation réelle dans Google Search Console
• Ne jamais utiliser de texte caché manipulateur (blanc sur blanc, hors viewport)
• Documenter les choix techniques pour faciliter la maintenance future