Maparea et référencement naturel : comment l’optimiser ?

Il y a plusieurs mois, j'ai eu un de mes clients qui utilisait un maparea sur un image, une carte en l’occurrence. J'ai voulu savoir quelle était la meilleure façon d'optimiser un maparea pour le référencement naturel, et il s'avère qu'il y a très peu de documentation sur ce sujet.

J'ai donc mis en place un petit test SEO pour savoir comment optimiser correctement un maparea.

C'est quoi un maparea ?

Pour faire simple, un maparea permet de délimiter des zones cliquable dans une image. Vous pouvez définir autant de zones que vous le souhaitez en leur attribuant :

• une destination (href).
• une forme (shape).
• des coordonnées dans la zone ciblée (coords).

Par exemple, le code suivant affiche une carte qui contient à l'intérieur 3 zones cliquables distinctes :

<img src="images/01.png" usemap="#seomixmap1" height="126" width="145">
<map name="seomixmap1">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea1-1.php">
    <area shape="circle" coords="90,58,3" alt="lalimasupermaparealalouarea" href="test-seo-maparea1-2.php">
    <area shape="circle" coords="124,58,8" title="lalimasupermaparealalouarea" href="test-seo-maparea1-3.php">
</map>

Sur cette image de présentation, on peut justement voir les 3 zones cliquables :

Peut-on transmettre une valeur d'ancre sur les 3 zones cliquables ?

Déroulement du test

Cette expérimentation a été divisée en deux tests distincts, et a été lancé en Août dernier (oui je sais, cela fait des mois que cet article aurait dû être publié...). Vous trouverez les deux tests de maparea juste ici.

1er test

Le premier test vise à savoir quels sont les attributs d'un élément area qui sont interprété correctement par Google. Dans une première image, on retrouve donc 3 zones distinctes

• un area sans attribut
• un area avec attribut alt
• un area avec attribut title

<map name="seomixmap1">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea1-1.php">
    <area shape="circle" coords="90,58,3" alt="lalimasupermaparealalouarea" href="test-seo-maparea1-2.php">
    <area shape="circle" coords="124,58,8" title="lalimasupermaparealalouarea" href="test-seo-maparea1-3.php">
</map>

Chaque page de destination est identique et contient le mot clé "lalimasupermaparealalouarea". Le résultat initial était le suivant : c'est la page avec le liens ayant l'attribut title qui ressort depuis des mois sur Google, les deux autres étant considérées comme du contenu dupliqué.

Résultat pour lalimasupermaparealalouarea

PS : ne tenez pas compte du titre affiché par Google, c'est lui qui a décidé de le réécrire dynamiquement...

Je me suis ensuite posé la question suivante : la page se référence t-elle car elle possède elle-même le mot clé ou parce que l'area possède un title contenant le mot clé. J'ai donc  réinitialisé le test en changeant dans chaque area le mot clé utilisé par un autre "gogolitopinguinpowerseomix", qui cette fois-ci n'est pas présent sur la page de destination. Le résultat est que Google ne renvoi aucun résultat, même plusieurs semaines après.

Conclusion : dans un élément area, Google n'interprète aucune balise :ni le Alt, ni le Title. Il va cependant suivre les liens contenus à l'intérieur.

2ème test

Le second test fait exactement de même, mais cette fois-ci en plaçant le mot clé "youpliaareayouplamaparea2" directement avec 3 images différentes. Le mot n'est plus placé dans l'élément area mais directement dans l'élément map. Nous avons alors 4 map distinctes :

• une map sans attribut
• une map avec attribut alt
• une map avec attribut title
• une map sans attribut mais avec une image ayant un attribut alt

<img src="images/02.png" usemap="#youpliaareayouplamaparea2" height="126" width="145">
<map name="youpliaareayouplamaparea2">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea2-1.php">
</map>
<img src="images/03.png" usemap="#youpliaareayouplamaparea3" height="126" width="145">
<map name="youpliaareayouplamaparea3" title="youpliaareayouplamaparea2">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea2-2.php">
</map>
<img src="images/04.png" usemap="#youpliaareayouplamaparea4" height="126" width="145">
<map name="youpliaareayouplamaparea4" alt="youpliaareayouplamaparea2">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea2-3.php">
</map>
<img src="images/05.png" alt="youpliaareayouplamaparea2" usemap="#youpliaareayouplamaparea5" height="126" width="145">
<map name="youpliaareayouplamaparea5">
    <area shape="rect" coords="0,0,82,126" href="test-seo-maparea2-4.php">
</map>

Lors du premier test, les pages de destination contenaient toute le mot clé concerné, et c'est une fois de plus celle avec l'attribut title qui ressort dans les moteurs de recherche.

Résultats pour youpliaareayouplamaparea2

Là aussi, le test a été modifié en cours de route pour utiliser un nouveau mot clé "ohyeahrockinareashapetogoongoogle" non utilisé dans les pages de destinations. Le résultat est le suivant : seule la page qui contenait la maparea apparaît, et non plus la page de destination.

Conclusion : dans un élément map, Google suit les liens mais ne prend pas en compte les attributs éventuels Alt et Title.

MapArea et SEO

Un maparea est un bon moyen technique pour rendre cliquable des zones dans une image, comme dans une carte par exemple. Cet élément HTML existe depuis longtemps et l'on pourrait se dire que c'est ce qu'il existe de mieux. Cependant, le test semble démontrer que l'on ne peut transférer directement dans cet élément la valeur de l'attribut TITLE ou ALT. Le maparea perd donc énormément d'intérêt pour le référencement naturel. Attention, cependant, comme pour tout test de référencement naturel, les résultats de celui-ci doivent être considérés avec précaution.

Il y a une chose que je n'ai pas testé cependant : est-ce que le ALT ou le TITLE de l'image associée est transférée à chaque zone cliquable ? J'avoue que cela ne m'a pas intéressé de prolongé le test car :

• si ce n'est pas le cas, le maparea est à bannir du référencement naturel (à aucun moment on ne peut transmettre une valeur sémantique).
• si c'est le cas, c'est aussi à bannir car on transmet à tord le même attribut (et donc la même sémantique) à chaque zone, ce qui nuirait donc à la structure du site.

Bref, il vaut mieux soit décomposer l'image en plusieurs parties, soit utiliser un code HTML propre et le surcharger en JS et CSS pour afficher proprement et dynamiquement les zones cliquable d'une image, comme par exemple ici.

Et vous, vous utilisez les maparea ?