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

Publié le 16 mai 2013 Images et vidéos

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 :

MapArea et référencement naturel
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é.

lalimasupermaparealalouarea
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.

youpliaareayouplamaparea2
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 ?

Daniel Roch

Conférencier, auteur, consultant et expert SEO WordPress, CEO de SeoMix et SEOKEY

5 Commentaires

Diije Le 16 mai 2013 à 8h19

Je m’étonne un peu qu’on puisse encore utiliser les mapareas de nos jours !
As-tu pensé à découper l’affichage de l’image en plusieurs blocs à l’aide de sprites CSS ?

Ad Le 16 mai 2013 à 10h57

JE ne comprends pas comment tu peux conclure quelque chose sur le 1er test.
Tu utilises la même requête dans les attributs TITLE et ALT. Et en plus, les 3 pages de destinations sont de la dupli, utilisant aussi la requête.
Comment tu peux dire que « 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. »
Les 3 pages ressortes sur la requête, sauf que sur ton screen shot tu n’as pas cliquer sur « relancer la recherche pour inclure les résultats omis. »
Pour conclure quelque chose, il aurait fallu utiliser des requêtes différentes et pas faire de dupli sur tes pages de destinations.
Normalement le ALT est bien pris en compte dans un area…

    Daniel Roch Le 16 mai 2013 à 11h13

    Tu n’as pas dù lire en entier mon article, puisque justement le premier test a été remanié en cours de route pour corriger ce défaut. Et malheureusement, ce test n’a jamais permis de référencer la page cible de mes différentes MapArea, avec ou sans attribut title ou Alt.

Willy Le 16 mai 2013 à 11h46

Très bon test, qui vient confirmer qu’il vaut mieux ne pas utiliser les maparea.

Comme tu le dis, les alternatives valables sont :
– soit de passer par du CSS, mais pour des maps très compliquées ça peut devenir galère. Et en plus c’est quand même moins maintenable et pas très maniable si on veut que le contenu soit dynamique.
– soit passer par du JS avec des librairies comme « RaphaelJS » pour « dessiner » le contenu dans le navigateur (sous forme de canvas).

À quand un petit article sur RaphaelJS ? :-P

Ad Le 16 mai 2013 à 11h50

Ok, tu as raison j’ai été trop vite en besogne :), j’ai vu en détail le test, après ça utilise toujours les même pages de destination.
C’est étrange quand même…
Encore plus quand on regarde ce que nous donne Google sur la requête « gogolitopinguinpowerseomix test ».

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *