Bien référencer ses images, en HTML, en JavaScript et en Flash

Publié le 13 avril 2010 par Delphine Dietrich 6 commentaires »

Les images tiennent une place très importante sur le web et le rendent plus attractif. Cependant, leur propre référencement ainsi que leur participation au référencement de la page au sein de laquelle elles se trouvent est loin d’être aussi simple que le référencement du texte.

Participation au référencement de la page

HTML

référencement des images en html
Si le nom de l’image et l’attribut "title" ne semblent pas être pris en compte par google dans le référencement de la page au sein de laquelle l’image se trouve, l’influence de l’attribut "alt" n’est plus à prouver.

<img src="http://…" alt="texte alternatif" />

Attention, le contenu de l’attribut "alt" remplace l’image si son chargement échoue et pour les mal-voyants qui utilisent une synthèse vocale. Il doit être une description du contenu et des informations apportées par l’image et non une simple succession de mots clés.

Cependant, cette solution ne concerne que les images insérées directement dans le corps de la page en HTML et ne solutionne pas le référencement des images appelées en JavaScript ou contenues dans des animations Flash.

JavaScript

référencement des images en javascript
Autant le dire tout de suite, il n’y a pas de solution optimale pour référencer le JavaScript et si vous pouvez obtenir le même résultat en HTML, c’est vivement recommandé. Sinon, un texte alternatif peut être inséré dans la balise <noscript>, qui doit être placée à la fin du script, soit juste après </script>.

<script language="javascript" type="text/javascript">le script</script>
<noscript>texte alternatif</noscript>

Attention à ne pas en abuser, un texte alternatif trop long ou trop répétitif sera considéré comme du spam.

Flash

référencement des images en flash
Plusieurs solutions sont possibles pour mieux référencer le contenu de ses animations Flash.

  • La balise <object>

Cette méthode consiste à appeler l’animation Flash en swf par une balise <object> dans lequel le texte alternatif peut-être placé.

<object type="application/x-shockwave-flash" data="animation.swf" height="265" width="540">
<param name="movie" value="animation.swf" />
texte alternatif
</object>

C’est la méthode que j’ai utilisée sur la page d’accueil de mon site et cela semble bien fonctionner. Si je cherche une phrase contenue dans le texte alternatif, google trouve bien la page web.

  • Le JavaScript

Cette méthode consiste à utiliser un script javascript pour insérer l’animation Flash. Il faut récupérer le fichier swfobect.js et l’appeller de cette manière :

<script language="javascript" type="text/javascript" src="/swfobject.js"></script>
<div id="flashcontent">
texte alternatif
</div>
<script language="javascript" type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>

Je n’ai pas testé cette méthode mais c’est il me semble la plus utilisée aujourd’hui.

Le référencement des images elles-mêmes

Le nom de l’image

référencer les images
S’il n’influence pas le référencement de la page dans laquelle l’image est affichée, le nom du fichier a de l’importance pour le référencement de l’image elle-même, sur google images par exemple. Il est conseillé d’utiliser le caractère – pour signifier un espace.

Le sitemap

images dans le sitemap
Et voici, enfin, ce qui m’a poussé a écrire cet article : l’évolution du sitemap de google pour aider au référencement des images. Vous pouvez dorénavant utiliser la balise <image:image> pour déclarer des images au sein d’une page ! Ci-dessous un exemple.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://www.site.com/page.html</loc>
<image:image>
<image:loc>http://www.site.com/image.jpg</image:loc>
<image:title>titre de l’image ou de la photo</image:title>
<image:caption>description</image:caption>
<image:geo_location>lieu s’il ‘agit d’une photo</image:geo_location>
<image licence>licence</image licence>
</image:image>
</url>
</urlset>

Seules les balises <image:image> et <image:loc> sont obligatoires.


Articles liés
Publicité

6 commentaires

  1. Seomix dit :

    Concernant les fichiers flashs, il faut faire attention à la technique de javascript puisqu’elle pourrait être considérée comme du cloacking. Il vaut mieux préférer la balise object.

    Concernant le sitemap image, il est encore trop tôt pour en connaître l’impact . J’ai fait un article complet dessus à cette adresse :
    http://www.seomix.fr/referencement/naturel/sitemap-image-google
    Le soucis, c’est que seul Google le prend en charge, qu’on ne connait pas le poids donné à ces informations du sitemap, et qu’il n’est expliqué nulle part la différence entre les champs title et caption. Si quelqu’un a une réponse pour ce dernier point, je suis preneur…

    Daniel, de SeoMix

  2. ptg69 dit :

    Bon article présentant les concepts de base par contre une petite erreur, c’est un tiret « - » et pas un underscore « _ » qu’il faut utiliser dans les noms d’images « alt » (tout comme pour l’url rewriting d’ailleur)

  3. @Seomix: Je ne comprends pas très bien pourquoi la technique de JavaScript pourrait être considérée comme du cloacking.

  4. Juntha dit :

    Bonjour,
    Petite question, j’ai créé différents diaporamas flash, contenant chacun 7 petites images + 1 grande image, clic sur une des petite images faisant apparaitre celle-ci dans la grande image, avec des transitions sympa, bon bref rien de vraiment exceptionnel, un diaporama fixe…
    Point de vue référencement, par contre, je peux effectivement utiliser la balise object, mais cela ne pointe que mon fichier swf et non les images incluses dedans.
    Si j’externalise les images afin de les appeler dans mon fichier flash et non les inclure comme il est construit actuellement, y-a-t-il une subtilité pour les référencer ?
    Ou, dans la mesure ou c’est un diaporama fixe, dois-je le construire en html pur afin effectivement d’utiliser « alt » ? Ce qui me gène, c’est d’être obliger d’utiliser du java afin de générer quelques transitions sympa ? j’ai déjà quelques scripts sur mes pages, j’aimerai éviter d’alourdir…
    J’espère avoir été assez clair et merci pour votre retour.
    La bonne journée !
    juntha

  5. @Juntha: Salut, merci pour ton commentaire mais tu es beaucoup plus calé que moi et je ne pense pas pouvoir t’aider beaucoup ! Il me semble qu’il n’y a pas de possibilité d’indiquer un texte alternatif pour une image appelée dans une animation flash. En revanche externaliser les images permet à chaque image d’exister indépendamment, et donc de pouvoir être indexée. Apparemment Google est capable d’indexer du contenu qui provient d’un fichier externe appelé par un .swf. Donc c’est surement bien de le faire pour le référencement, même s’il n’y a pas de « subtilité ». Puis ensuite tu peux les déclarer dans le sitemap pour la page qui contient l’animation.

  6. Seomix dit :

    @Delphine : pour revenir à ce que je disais sur le cloaking et le javascript, cela ne concerne que le javascript couplé au flash.

    Toutes les techniques de réécriture de contenu sont utilisées par ceux qui essaient justement de contourner les limitation imposées de Google. En réalité, les robots des moteurs de recherche peuvent considérer que le texte qui va être écrit dans la div (le flash) est du cloaking puisque le contenu sera différent entre le visiteur et le robot du moteur de recherche (qui lit très mal le javascript).

    Bien entendu, ce n’est qu’une possibilité et utiliser cette technique ne sera pas forcément considérée comme du cloaking à chaque fois. Il faut donc l’utiliser avec parcimonie.

    @Juntha : même si les images sont séparées, elles ne seront pas référencées. Il faut qu’elles apparaissent en dur dans le code source d’une de tes page (affichage direct ou liens menant vers elles), ou alors via un fichier sitemap image (uniquement pour google).