Le format SVG n’est pas une nouveauté. Il a été inventé en 1999 par une équipe du W3C. Cependant, avec l’avènement du responsive design et de certaines techniques telles que l’utilisation des polices de caractères CuFon, ces images reviennent sur le devant de la scène. Pourquoi, et qu’en est-il d’un point de vue du référencement naturel ?
En quoi le SVG est-il un format idéal pour le responsive design ?
SVG signifie « Scalable Vector Graphics » ou « graphique vectoriel adaptable » en français. Il s’agit donc d’un format d’image vectoriel qui peut être redimensionné à volonté. Le vectoriel, s’il est bien connu des infographistes, n’a jusque maintenant était que très peu utilisé pour le WEB. Pourtant, à chacune de ses utilisations, il fait grand bruit. Ce fût le cas lorsque Adobe édita son célèbre Flash, qui permettait pour la première fois de de publier sur la toile des animations sans que l’internaute ai à les charger pendant des heures.
Le concept du vectoriel est simple : Plutôt que de dessiner les centaines de pixels qui vont former un cercle, pourquoi ne pas donner tout simplement la formule de ce cercle au navigateur ? L’un des principaux avantages est que si l’image est agrandie, la formule du cercle est toujours valable, là où les coordonnées de chaque point de l’image pixelisée restent les mêmes, d’où la pixelisation.
Ci-dessous un exemple d’image SVG, avec le logo de la revanche des sites. C’est grand, c’est fait exprès 🙂
Amusez-vous à diminuer et agrandir la largeur de la fenêtre de votre navigateur : l’image s’adapte parfaitement à n’importe quelle taille, automatiquement, à l’infini. Ce sera même encore plus probant à cette adresse à laquelle vous pourrez également jouer avec la hauteur : https://www.la-revanche-des-sites.fr/signature/logo-la-revanche-des-sites.svg
En quoi le SVG est-il un format adapté pour le SEO ?
Premièrement, brisons une légende urbaine : Google indexe les images SVG (oui, c’est une légende urbaine de geek). A l’heure où j’écris cet article, google a référencé exactement 26 millions d’images au format svg (n’hésitez pas à laisser un commentaire à cet article si vous observez une évolution 😉. Vérifiez par vous-même dans cet exemple des SERPs de Google.
Deuxièmement, mettons fin à une crainte qui n’a plus lieu d’être (ou presque) : La plupart des navigateurs savent interpréter le format d’image SVG. C’est le cas par exemple de Chrome, Safari (également la version iphone, à partir de Safari 4), Firefox et Internet explorer (à partir du 9). Je ne me suis pas embêté à le faire sur l’image SVG présente dans cet article (car j’imagine qu’il faut être un geek à jour dans son navigateur pour le lire, et que les lecteurs du futurs seront dotés d’outils exhaustifs), mais il est tout à fait possible de renseigner une image alternative en cas d’échec de lecture :
<body><svg width= »250″ height= »150″><!– Ici le code de l’image svg que je ne détaille pas –><foreignObject width= »0″ height= »0″ overflow= »hidden »><!– Ci-après une bonne vieille balise image de secours –><img src= »mon-image-de-secours.jpg » width= »250″ height= »150″ alt= »ouf… » /></foreignObject></svg></body>
Premier avantage du SVG pour le SEO : le poids
Les faits étant établis, nous pouvons passer à la première vertu du format SVG pour le référencement naturel : le poids. La grande image ci-dessus pèse 13,8ko, quelle que soit sa taille, là où les formats « traditionnels », sans égaler sa qualité, pèserait au moins dix fois plus. Imaginez que tous les éléments graphiques de votre site WEB soient dix fois plus légers, tout en s’adaptant parfaitement aux formats de tous les devices, du smartphone à l’écran de cinéma. Vous aurez dores et déjà gagné quelques grâces aux « yeux » des moteurs de recherche.
Deuxième avantage du SVG pour le SEO : la compressivité
En effet, comme je le disais, le SVG, ce sont des formules, bref, du texte. Et un fichier texte, tout comme le HTML, ça se compresse. Il est donc tout à fait possible de minifier, compresser, gzipper votre code. Il était déjà pas bien lourd, mais là, on s’envole.
Troisième avantage du SVG pour le SEO : l’intégration
En effet, nous venons de le voir, le SVG, c’est du texte. On peut donc l’appeler comme un fichier externe, comme on le ferait pour une image :
<img src= »mon-image-svg-seo.svg » width= »250″ height= »150″ alt= »Cool ! » />
ou mieux, avec une balise Object qui nous permet de renseigner la fameuse solution de secours :
<object data= »mon-image-svg-seo.svg » width= »250″ height= »150″ type= »image/svg+xml »><!– Ci-après une bonne vieille balise image de secours –><img src= »mon-image-de-secours.jpg » width= »250″ height= »150″ alt= »ouf… » /></object>
ou même en CSS :
div {background-image: url(mon-image-svg-seo.svg.svg);}
Il est bien-sûr possible de donner ses propriétés à l’image en dehors de l’image elle-même, dans ce fameux bout de code CSS présent sur notre page ou ailleurs ; ceci est fort pratique lorsque l’on sait que le référencement naturel doit souvent composer avec les contraintes d’intégration.
Quatrième avantage du SVG pour le SEO : ajout de données lexicales
Si vous avez lu cet article jusque ici, ce qui en soi est déjà plutôt contre-nature (pensez-y) ; vous vous dites peut-être « mais attend … si le SVG c’est du texte … y’aurait pas moyen d’y ajouter un peu de contenu qui profiterait à mon référencement naturel ? ». La réponse est YES WE CAN ! C’est en tout cas ce que pensent certains mecs bizarres dont il vaut mieux taire le nom ici. Mais je le pense également, alors je ne vais pas non plus m’étendre sur le sujet …
<svg role= »img » aria-label= »Titre au top pour mon SEO et allez, pourquoi même une description ? »><title>Mon super titre SVG SEO</title><desc>Une bonne grosse description comme on aime pour le référencement naturel</desc>Et ici le code de votre image svg …</svg>
Et si je ne veux pas indéxer mes images SVG dans Google ?
Rien de plus facile. Encore une fois, c’est du texte. Il suffit donc d’ajouter un « X-Robots-Tag: noindex” dans le HTTP header du fichier SVG 😉
La Revanche des Sites, agence SEO à Lille et à Paris vous accompagne dans l’optimisation de votre SEO.
