Vous vous posez la question de l’indexation d’une image au format SVG ? Est-ce que les robots d’indexation accèdent bien à l’image ? Est-ce que l’image est comprise par les moteurs de recherche ? Voyons d’abord de qu’est le format SVG avant de répondre à la problématique SEO.
Le format SVG, c’est quoi ?
SVG signifie Scalable Vector Graphics, en d’autres termes c’est un format de données qui permet de créer des graphiques vectoriels. Il est inspiré des formats VML et PGML. Cependant, SVG est recommandé par la W3C à l’inverse de ces derniers.
SVG utilise le XML afin de créer des éléments graphiques pour le web. Très utilisé pour afficher des graphiques mais il peut être également utilisé pour réaliser des dessins plus avancés que de simples graphiques.
A savoir aussi que SVG peut être utilisé avec du CSS pour définir le style des éléments graphiques comme par exemple la couleur ou la police d’écriture. De même, ces éléments peuvent être manipulé comme d’autres élément du DOM.
L’un des principaux avantages de ce format est que l’on peut redimensionner une image sans perdre la qualité initiale à l’inverse d’une image jpeg ou png par exemple.
SVG et SEO
Il existe plusieurs façons d’inclure une image SVG dans une page HTML dont 3 principales :
- Via une balise img
- Via une balise object
- Via une balise svg
En fonction de l’inclusion choisie, nous pouvons impacter l’indexation des images SVG.
La balise img
La balise img lorsqu’il est possible de la déployer est à favoriser (en effet certain SVG plus complexe nécessite l’utilisation de la balise object). La balise img est la balise de référence pour inclure une image et permet d’y ajouter un attribut alt pris en compte par les moteurs de recherche. Dans ce cas précis, l’image SVG est accessible aux robots d’indexation.
<img src= »equilateral.svg » alt= »un triangle aux trois côtés égaux » />
La balise object
La balise object permet d’inclure une image SVG de la manière suivante :
<object data= »parallelogramme.svg » type= »image/svg+xml »> </object>
Cependant, cette inclusion n’est pas SEO friendly. L’astuce est d’utiliser une balise img en plus pour permettre l’indexation :
<object data= »parallelogramme.svg » type= »image/svg+xml »>
<img src= »parallelogramme.svg » alt= »un quadrilatère dont les côtés sont parallèles deux à deux » />
</object>
A savoir : à l’origine l’inclusion d’une balise img dans la balise object sert à fournir au navigateur une image dans un autre format que le SVG au cas où le navigateur ne serait pas compatible avec le format SVG. Cependant nous l’utilisons ici dans un but SEO.
La balise SVG
Ici il s’agit d’écrire le code du fichier SVG directement dans notre HTML :
<svg width= »300″ height= »200″>
<rect width= »100% » height= »100% » fill= »green » />
</svg>
Impossible dans ce cas pour les robots d’indexation de comprendre l’image et de la positionner dans les résultats de recherche.
